คู่มือการสร้างARด้วยUnity+Vuforia

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

5. ไปที่พาเนล Hierarchy แล้วคลิก Button (ช่อื ButtonFruitVocabAR) 6. คลกิ ทรี่ ูปภาพท่ตี ้องการ แล้วลากไปไว้ที่คำส่ัง Source Image ในพาเนล Inspector 7. กำหนดขนาดและตำแหน่งของปมุ่ ทีค่ ำส่งั Rect Transform ใน พาเนล Inspector ▪ Pos X, Pos Y และ Pos Z กำหนดตำแหนง่ ตามแกน X Y และ Z ▪ Width กำหนดความกว้าง ▪ Height กำหนดความสูง 98

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

________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ 121

________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ 122