เทคโนโลยี AR โดยใช้ Unity + Vufuria

8. สรา้ งปุม่ เมนูสำหรับคลิกไปยงั หน้าผจู้ ัดทำและปุม่ เมนูสำหรบั ปิด โดยทำขน้ั ตอนที่ 1-7 ซำ้ ▪ ป่มุ เมนูสำหรับคลกิ ไปยังหน้าผู้จดั ทำ กำหนดชอ่ื เป็น ButtonAuthor ▪ ปุ่มเมนสู ำหรบั ปิด กำหนดชือ่ เปน็ ButtonExit 9. ไปท่ี File > Save Scene เพ่อื บันทึกฉาก MainMenu การสร้างฉากผจู้ ดั ทำ 1. เข้าไปทีโ่ ฟลเดอร์ Scene แล้วดับเบล้ิ คลิกที่ฉาก Author 2. ไปที่ GameObject > UI > Image 99

3. ไปทีพ่ าเนล Hierarchy คลกิ Canvas 4. ไปท่พี าเนล Inspector ที่คำสั่ง UI Scale Mode ใหเ้ ลอื ก Scale With Screen Size 5. กำหนด Reference Resolution (ตัวอยา่ งกำหนด X = 1280 และ Y = 720) 100

6. ไปทีพ่ าเนล Hierarchy คลิก Image แล้วเปล่ยี นชอ่ื โดยการคลิกขวา > Rename 7. พมิ พ์ชื่อทตี่ อ้ งการแล้วกด Enter (ตวั อย่างกำหนดเปน็ BGAuthor) 8. ไปที่พาเนล Inspector คลิก Anchor Presets 9. คลกิ เลือก Stretch 101

10. กำหนด Left Right Top Bottom เปน็ 0 11. เขา้ ไปที่โฟลเดอร์ที่จดั เกบ็ รูปภาพ (ช่ือ Graphics) คลิกรปู ภาพทต่ี อ้ งการให้เปน็ ภาพพ้นื หลัง แลว้ ลากไปไว้ ที่คำสั่ง Source Image ในพาเนล Inspector 12. จะปรากฏรปู ภาพใน Image (ชื่อ BGAuthor) 102

การสร้างป่มุ ย้อนกลบั 1. ไปท่ีพาเนล Hierarchy คลกิ ขวาท่ี Image (ช่ือ BGAuthor) > UI > Button 2. เปลีย่ นช่ือปุ่มโดยการคลกิ ขวา > Rename 3. กำหนดชอ่ื ปุ่มตามต้องการ (ตวั อยา่ งกำหนดเปน็ ButtonBack) 4. คล่ีปุ่มออกมา จะพบ Text ให้ลบ Text ออกโดยการคลกิ ขวาที่ Text > Delete 103

5. ไปทีพ่ าเนล Hierarchy คลิก Button (ช่อื ButtonBack) 6. ดับเบ้ิลคลิกเข้าไปที่โฟลเดอร์ที่จัดเก็บรูปภาพกราฟิก คลิกที่รูปภาพที่ต้องการ แล้วลากไปไว้ที่คำสั่ง Source Image ในพาเนล Inspector 7. กำหนดขนาดและตำแหน่งของปุม่ ที่คำสง่ั Rect Transform ใน พาเนล Inspector ▪ Anchor Presets กำหนดตำแหนง่ อา้ งองิ การวางปุ่ม (ตัวอย่างกำหนดเป็น Top Left) ▪ Pos X, Pos Y และ Pos Z กำหนดตำแหน่งตามแกน X, Y และ Z ▪ Width กำหนดความกว้าง ▪ Height กำหนดความสูง 8. ไปท่ี File > Save Scene เพือ่ บนั ทกึ ฉาก Author 104

การจดั การฉาก AR เบอื้ งตน้ 1. เขา้ ไปทีโ่ ฟลเดอร์ Scene แลว้ ดบั เบ้ลิ คลกิ ท่ฉี าก FruitVocabAR 2. ต้งั ค่าโปรเจ็คต์ AR (ดเู พ่มิ เตมิ ท่ีหนา้ 33-34) 3. การจดั การใบอนุญาตจาก Vuforia (ดูเพิ่มเตมิ ทีห่ น้า 34-35) 4. จัดการเชอื่ มโยงใบอนุญาตจาก Vuforia ใหเ้ รยี บรอ้ ย (ดเู พมิ่ เติมทห่ี นา้ 36-37) 5. จัดการฐานข้อมูล Image Target (ดเู พม่ิ เตมิ ทห่ี นา้ 38-40) 6. นำรปู ภาพ Image Target เขา้ มาใน Unity (ดเู พิม่ เตมิ ท่ีหนา้ 41) 7. สรา้ ง AR ตามต้องการ เชน่ AR โมเดล 3 มติ ิ เสียง วิดีโอ หรอื สร้าง AR มากกว่า 1 มารค์ เกอร์ กไ็ ด้ การสรา้ งปมุ่ ยอ้ นกลบั 1. สร้างปุ่มยอ้ นกลับ (ดูเพิ่มเตมิ ทหี่ นา้ 103-104) 2. ไปที่ File > Save Scene เพือ่ บันทกึ ฉาก FruitVocabAR 105

การส่งั งานปมุ่ ในฉากเมนู 1. เขา้ ไปท่โี ฟลเดอร์ Scenes แลว้ ดบั เบล้ิ คลิกทฉ่ี าก MainMenu 2. ไปที่ GameObject > Create Empty 3. ไปทพี่ าเนล Hierarchy คลกิ Image แล้วเปลย่ี นชอ่ื โดยการคลิกขวา > Rename 4. เปลี่ยนชอื่ GameObject เป็นชื่อตามต้องการ (ตัวอย่างกำหนดเป็น ActionControl) 106

5. คลกิ ท่ี GameObject (ชื่อ ActionControl) 6. ไปท่ีพาเนล Inspector แลว้ คลกิ Add Component 7. คลกิ เลือก New script 8. กำหนดชอื่ ไฟลส์ ครปิ ต์ (ตวั อย่างกำหนดเป็น ActionControl) 9. คลกิ Create and Add 10. ดบั เบ้ิลคลกิ ที่ Script 11. จะเข้าส่โู ปรแกรม Visual Studio โดยอตั โนมตั ิ ใหล้ บสครปิ ตท์ ่ไี มต่ อ้ งการออก 12. กด Enter ที่บรรทัดที่ 3 แล้วพมิ พส์ ครปิ ต์ดงั น้ี using UnityEngine.SceneManagement; 107

13. ในส่วนของ public class ActionControl : MonoBehavior { ใหพ้ ิมพส์ ครปิ ตด์ ังนี้ public void MainMenuScene(){ SceneManager.LoadScene(\"MainMenu\"); } public void FruitVocabARScene(){ SceneManager.LoadScene(\"FruitVocabAR\"); } public void AuthorScene(){ SceneManager.LoadScene(\"Author\"); } public void Quit(){ Application.Quit(); } 14. คลิก Save แลว้ ปิด Visual Studio 15. ไปท่ีพาเนล Hierarchy คลกิ ทปี่ ุ่ม ButtonFruitVocabAR 16. ไปท่ีพาเนล Inspector ในส่วนของ On Click () ให้คลกิ Add to list 17. ไปท่พี าเนล Hierarchy แล้วลาก GameObject (ชอ่ื ActionControl) ไปไว้ที่ None (Object) 108

18. คลกิ ท่ี No Function > ActionControl > FruitVocabARScene() 19. ไปทพี่ าเนล Hierarchy คลกิ ที่ปมุ่ ButtonAuthor 20. ทำขน้ั ตอนท่ี 16-18 ซำ้ 21. คลกิ ที่ No Function > ActionControl > AuthorScene() 109

22. ไปที่พาเนล Hierarchy คลกิ ทป่ี มุ่ ButtonExit 23. ทำข้ันตอนท่ี 15-17 ซำ้ 24. คลิกท่ี No Function > ActionControl > Quit() 25. ไปที่ File > Save Scene เพ่อื บันทกึ ฉาก MainMenu 110

การสั่งงานป่มุ ในฉากผู้จดั ทำ 1. คดั ลอก GameObject (ชื่อ ActionControl) โดยคลกิ ขวา > Copy 2. เขา้ ไปท่โี ฟลเดอร์ Scenes แลว้ ดับเบิล้ คลิกที่ฉาก Author 3. ไปท่พี าเนล Hierarchy คลกิ ขวาในพน้ื ทวี่ า่ ง แล้วคลกิ ขวา > Paste 4. คลิกท่ีปุม่ ButtonBack 5. ไปทีพ่ าเนล Inspector ในสว่ นของ On Click () ใหค้ ลกิ Add to list 6. ไปท่พี าเนล Hierarchy แล้วลาก GameObject (ชื่อ MenuControl) ไปไวท้ ี่ None (Object) 111

7. คลกิ ท่ี No Function > ActionControl > MainScene() 8. ไปท่ี File > Save Scene เพอื่ บนั ทึกฉาก Author 112

การสัง่ งานปุ่มในฉาก AR 1. เขา้ ไปท่โี ฟลเดอร์ Scenes แลว้ ดบั เบลิ้ คลกิ ทฉ่ี าก FruitVocabAR 2. วธิ กี ารเหมอื นการสง่ั งานปมุ่ ในฉากผู้จัดทำ โดยทำตามขั้นตอนท่ี 1-7 ซำ้ (ดูเพ่มิ เตมิ ท่หี นา้ 111-112) 3. ไปที่ File > Save Scene เพอ่ื บันทึกฉาก FruitVocabAR 1. เข้าไปทโ่ี ฟลเดอร์ Scene แล้วดบั เบล้ิ คลกิ ทีฉ่ าก MainMenu 2. ไปที่ File > Build Settings 113

3. คลิก Add Open Scene สังเกตที่ Scenes In Build จะปรากฏ Scenes/MainMenu 4. คลิกปดิ หน้า Build Settings 114

5. ทำขัน้ ตอนท่ี 1-4 ซำ้ แต่เปลีย่ นเป็นฉาก Author และ FruitVocabAR 6. คลิก Play เพอื่ ทดสอบการแสดงผล หมายเหตุ การทดสอบการแสดงผล ให้ตรวจสอบว่าการทำงานของปุ่มถูกต้องหรือไม่ ยกเว้นปุ่ม Exit จะต้อง Build เป็น .apk ไปติดตั้งใน สมาร์ทโฟนแอนดรอยด์ คำสั่งจงึ จะทำงาน 115

1. สรา้ งโฟลเดอรแ์ ละจดั เตรียมรูปภาพกราฟิกสำหรับส่งออกเปน็ แอพพลิเคชนั่ 2. คลกิ เลอื กรปู ภาพทง้ั หมด 3. ไปที่พาเนล Inspector แล้วกำหนด Texture Type เป็น Sprite (2D and UI) 4. คลิก Apply 116

5. ไปท่ี File > Build Settings 6. คลกิ Android 7. คลิก Player Settings 8. ไปที่พาเนล Inspector แล้วกำหนดรายละเอยี ดดังน้ี ▪ Company Name กำหนดชอ่ื บริษัท ช่ือองคก์ ร หรอื ช่อื ผ้จู ดั ทำกไ็ ด้ ▪ Product Name กำหนดชอ่ื แอพพลิเคช่ัน ▪ Default Icon กำหนดรปู ภาพไอคอนของแอพพลเิ คช่ัน 9. ไปทีค่ ำสั่ง Icon แล้วกำหนดรปู ภาพตามขนาดทโี่ ปรแกรมกำหนด 117

10. ไปท่คี ำสัง่ Splash Image แล้วกำหนดรายละเอียดดงั นี้ ▪ Splash Screen กำหนดใหแ้ สดงผลหน้าจอระหว่างรอแอพพลเิ คชั่นกำลงั โหลด ▪ Logos กำหนดการแสดงโลโก้ สามารถเลือกให้แสดงโลโก้ Unity หรือ รูปภาพโลโกท้ ต่ี ้องการได้ ▪ Background กำหนดการแสดงผลพ้ืนหลงั สามารถเลือกเปน็ สีหรอื รูปภาพกไ็ ด้ 11. ไปท่ีคำสง่ั Other Settings แล้วกำหนดรายละเอียดดงั นี้ ▪ Package Name กำหนดช่อื แพค็ เกจ โดยกำหนดเปน็ Reverse Domain ▪ Version กำหนดเวอรช์ ่ันทต่ี อ้ งการ ▪ Minimum API Level กำหนดแอนดรอยดเ์ วอรช์ ่ันตำ่ สดุ ทีส่ ามารถติดตง้ั แอพพลิเคชั่นได้ 12. คลิก Build 118

13. เลอื กท่ีจดั เกบ็ ไฟล์ 14. กำหนดชื่อไฟล์ 15. คลิก Save 16. เม่อื Build เสร็จแลว้ จะไดไ้ ฟล์ .apk ใหค้ ดั ลอกไปตดิ ต้งั ในสมารท์ โฟน 17. ติดต้งั แอพพลิเคช่นั 119

________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ 120