Augmented Reality; AR; เทคโนโลยีความจริงเสริม; เทคโนโลยีความเป็นจริงเสริม; เทคโนโลยีเสริมความจริง; การสร้างสื่อ AR Facebook : https://www.facebook.com/TouchPoint.in.th Website : http://touchpoint.in.th โดย อาจารย์กฤษณพงศ์ เลิศบำรุงชัย

3. เทคโนโลยีความจริงเสริม 1
โปรแกรมที่ใช้ในการสร้างสื่อ AR 2
การติดตั้งโปรแกรมสำหรับการสร้างสื่อ AR 6
การเตรียมความพร้อมก่อนเริ่มทำ AR 27
การเปิดโปรแกรม Unity 28
การสร้างโปรเจ็คต์ใหม่ 29
การบันทึกฉากและโปรเจ็คต์ Unity 30
การเปิดโปรเจ็คต์ Unity 30
ส่วนประกอบของหน้าต่างใน Unity 31
การควบคุมการแสดงผลและการจัดการวัตถุ 32
การสร้าง AR โมเดล 3 มิติ 33
การสร้าง AR โมเดลแอนิเมชั่น 3 มิติ 45
การสร้าง AR หมุน ย้าย ย่อ ขยาย โมเดล 3 มิติ 55
การสร้าง AR เสียง 62
การสร้าง AR วิดีโอ 67
การสร้าง AR มากกว่า 1 มาร์คเกอร์ 73
การสร้างปุ่มเชื่อมโยงไปยังเว็บไซต์ 78
การสร้างปุ่มออกจากแอพพลิเคชั่น 85
การสร้างหน้าเมนู AR 89
การส่งออกเป็นแอพพลิเคชั่นแอนดรอยด์ 116

5. 1
เทคโนโลยีความจริงเสริม (Augmented Reality: AR) หมายถึง เทคโนโลยีที่ผสมผสานระหว่างโลก
ของความจริง (Real World) เข้ากับโลกเสมือน (Virtual World) โดยใช้วิธีซ้อนภาพในโลกเสมือนไว้บนภาพใน
โลกความเป็นจริง ผ่านอุปกรณ์ดิจิทัล ได้แก่ แว่นตาดิจิทัล แท็บเล็ต สมาร์ทโฟน หรืออุปกรณ์แสดงผลภาพอื่นๆ
เพื่อให้เห็นภาพเสมือนอยู่ในสภาพแวดล้อมจริง
หลักการทำงานของเทคโนโลยีความจริงเสริม (Augmented Reality: AR) จะเริ่มจากผู้ใช้ติดตั้ง
แอพพลิเคชั่นที่พัฒนาขึ้นสำหรับการใช้งานโดยเฉพาะ เมื่อเปิดแอพพลิเคชั่นโปรแกรมจะสั่งให้อุปกรณ์ดิจิทัล
เช่นสมาร์ทโฟนเปิดการทำงานของกล้องออปติคอล โปรแกรมจะทำการค้นหามาร์คเกอร์ (Marker) เมื่อผู้ใช้
มองไปที่มาร์คเกอร์และโปรแกรมสามารถตรวจพบ โปรแกรมจะจับตำแหน่งของมาร์คเกอร์เพื่อประมวลผลและ
ระบุวัตถุดิจิทัลที่สัมพันธ์กับมาร์คเกอร์ แล้วแสดงผลวัตถุดิจิทัลบนมาร์คเกอร์ในสภาพแวดล้อมจริง ผู้ใช้สามารถ
ปฏิสัมพันธ์กับวัตถุดิจิทัลหรือเนื้อหาดิจิทัลที่ปรากฏขึ้นได้

6. 2
โปรแกรม Unity 3D เป็นโปรแกรมที่มีความสามารถในหลากหลาย ได้แก่ การสร้างเกม 2 มิติ การ
สร้างเกม 3 มิติ การสร้างเทคโนโลยีความจริงเสริม (Augmented Reality: AR) และเทคโนโลยีความจริง
เสมือน (Virtual Reality: VR) โดยทำงานร่วมกับโปรแกรม Vuforia และ Visual Studio สามารถส่งออกเป็น
เว็บ HTML5 และแอพพลิเคชั่นบนระบบปฏิบัติการต่างๆ เช่น Windows, iOS และ Android แล้วนำไปติดตั้ง
ในสมาร์ทโฟนได้ทันที

7. 3
โปรแกรม Vuforia เป็นโปรแกรมฟรีบนเทคโนโลยีคลาวด์ ใช้สำหรับพัฒนาฐานข้อมูล (Database)
และรหัส (License) ของแอพพลิเคชั่นเทคโนโลยีความจริงเสริม (Augmented Reality: AR) ที่ต้องการพัฒนา
มีระบบการพัฒนา SDK ที่รองรับการทำงานได้ทั้งรูปแบบ 2 มิติ และ 3 มิติ

8. 4
โปรแกรม Android Studio เป็นโปรแกรมที่ใช้สำหรับพัฒนาโมบายแอพพลิเคชั่นสำหรับ
ระบบปฏิบัติการแอนดรอยด์ เป็นเครื่องมือ IDE จาก Google พัฒนามาจากการทำงานของ Eclipse และ
Android ADT Plugin เพื่ออำนวยความสะดวกในการพัฒนาแอพพลิเคชั่นแอนดรอยด์ให้มีประสิทธิภาพมาก
ขึ้น ทั้งด้านการออกแบบกราฟิกส่วนประสานงานผู้ใช้ (Graphic User Interface: GUI) ที่ช่วยทดสอบการ
แสดงผล (Preview) แอพพลิเคชั่นในมุมมองที่แตกต่างกันบนสมาร์ทโฟนแต่ละรุ่นผ่าน Emulator โดยทำงาน
ร่วมกับ Java SDK เพื่อให้สามารถพัฒนาเทคโนโลยีความจริงเสริม (Augmented Reality: AR) จากโปรแกรม
Unity 3D และสามารถส่งออกเป็นแอพพลิเคชั่นแอนดรอยด์ได้
Java Development Kit หรือ JDK คือชุดของเครื่องมือที่ใช้ในการพัฒนาโปรแกรม Java ของบริษัท
Sun Micro Systems ผู้ที่ต้องการพัฒนาแอพพลิเคชั่นสำหรับแอนดรอยด์จะต้องติดตั้ง Java JDK เพื่อให้
โปรแกรมสามารถคอมไพล์แอพพลิเคชั่นได้

9. 5
โปรแกรม Visual Studio เป็นโปรแกรมที่ใช้พัฒนาซอฟต์แวร์และระบบต่างๆ ที่สามารถใช้เขียน
โปรแกรมภาษาต่างๆ ภาษา C หรือ C# มีโครงสร้างการเขียนที่เป็นรูปแบบบังคับ เขียนง่าย มีความทันสมัย
การพัฒนาเทคโนโลยีความจริงเสริม (Augmented Reality: AR) จะใช้โปรแกรม Vuforia และ Unity 3D เป็น
หลัก หากต้องการเขียนชุดคำสั่งที่เฉพาะเจาะจง จะต้องใช้โปรแกรม Visual Studio ร่วมพัฒนาด้วย

10. 6
การติดตั้ง Unity
1. ดับเบิ้ลคลิก Unity 2018 Pro x64.exe เพื่อเริ่มติดตั้งโปรแกรม
2. คลิก Next
3. คลิกเลือก I accept the terms of the License Agreement
4. คลิก Next
5. คลิก Next

11. 7
6. คลิก Next แล้วรอสักครู่
7. คลิก Finish
การติดตั้ง Android Support
1. เข้าไปที่โฟลเดอร์ Support แล้วดับเบิ้ลคลิก UnitySetup-Android-Support-for-Editor-2018.2.exe
2. คลิก Next
3. คลิกเลือก I accept the terms of the License Agreement
4. คลิก Next

12. 8
5. คลิก Next
6. กำหนด Destination Folder ไปที่ C:Program FilesUnity
7. คลิก Next
8. คลิก Finish
การติดตั้ง Vuforia AR Support
1. เข้าไปที่โฟลเดอร์ Support แล้วดับเบิ้ลคลิก UnitySetup-Vuforia-AR-Support-for-Editor-2018.2.exe
2. คลิก Next

13. 9
3. คลิกเลือก I accept the terms of the License Agreement
4. คลิก Next
5. คลิก Next
6. กำหนด Destination Folder ไปที่ C:Program FilesUnity
7. คลิก Next แล้วรอสักครู่
8. คลิก Finish

14. 10
การลงทะเบียนเข้าใช้งาน Vuforia
1. ไปที่ developer.vuforia.com
2. คลิก Register
3. กรอกรายละเอียดของผู้ใช้
4. กรอกรหัสที่ปรากฏในช่อง Captcha Code
5. คลิก I agree และ I acknowledge
6. คลิก Create account

15. 11
7. คลิก OK
8. ยืนยันการสมัครด้วยอีเมล์ โดยการคลิกลิงค์ลงทะเบียน
9. คลิก OK

16. 12
การลงชื่อเข้าใช้ Vuforia
1. ไปที่ developer.vuforia.com
2. คลิก Log In
3. กรอกอีเมลและรหัสผ่าน
4. คลิก Login
5. จะเข้าสู่ระบบพร้อมใช้งาน

17. 13
การติดตั้ง Android Studio
1. เปิดโปรแกรม Unity
2. คลิก New project
3. กำหนดรายละเอียดดังนี้
▪ Project Name กำหนดชื่อโปรเจ็คต์
▪ Location กำหนดที่จัดเก็บโปรเจ็คต์
▪ Template กำหนดเป็น 3D

18. 14
4. คลิก Create project
5. ไปที่ Edit > Preferences
6. ไปที่ External Tools
7. ไปที่ SDK คลิก Download
8. โปรแกรมจะเปิดเว็บ developer.android.com/studio
9. คลิก Download Android Studio

19. 15
10. คลิก I have read and agree with the above terms and conditions
11. คลิก Download Android Studio for Windows
12. ดับเบิ้ลคลิก Android Studio IDE.exe เพื่อเริ่มการติดตั้งโปรแกรม

20. 16
13. คลิก Next
14. คลิก Next
15. คลิก Next
16. คลิก Install แล้วรอสักครู่
17. คลิก Next
18. คลิกเลือก Start Android Studio
19. คลิก Finish

21. 17
20. คลิกเลือก Do not import settings
21. คลิก OK
การตั้งค่า Android Studio
1. เมื่อเข้าสู่โปรแกรม Android Studio แล้ว ให้คลิก Next
2. ที่หน้า Install Type คลิกเลือก Standard
3. คลิก Next
4. ที่หน้า Select UI Theme คลิกเลือก Theme ที่ต้องการ
5. คลิก Next
6. คลิก Finish

22. 18
7. ที่หน้า Downloading Components ให้รอสักครู่
8. คลิก Finish
9. คลิก Start a new Android Studio project

23. 19
10. คลิกเลือก Add No Activity
11. คลิก Next
12. กำหนดรายละเอียดดังนี้
▪ Name กำหนดชื่อโปรเจ็คต์
▪ Package name กำหนดชื่อแพ็คเกจ (ควรกำหนดเป็น Reverse Domain)
▪ Save location กำหนดที่จัดเก็บไฟล์
▪ Language กำหนดภาษาโปรแกรมเป็น Java
▪ Minimum API level กำหนดเวอร์ชั่นของระบบปฏิบัติการแอนดรอยด์ขั้นต่ำ
13. คลิก Finish
14. เมื่อเข้าสู่โปรแกรมแล้ว ให้ไปคลิกที่ SDK
Manager
15. ที่ Android SDK ให้คลิกเลือกติดตั้งเวอร์ชั่น
แอนดรอยด์ขั้นต่ำที่รองรับแอพพลิเคชั่น
16. คลิก OK
17. คลิก OK

24. 20
18. คลิก Accept
19. คลิก Next แล้วรอสักครู่
20. คลิก Finish
21. คลิกปิดโปรแกรม Android Studio
22. คลิก Exit
23. กลับไปที่ Unity โปรแกรมจะตรวจพบ SDK ที่หน้าต่าง Android SDK detected ให้คลิก Yes
หมายเหตุ
หาก Unity ไม่ตรวจพบอัตโนมัติ ในหน้าต่าง Unity Preferences > External Tools ให้อ้างอิง SDK โดยการคลิก Browse แล้ว
เลือกไดเรคทอรี่ C > Users > User Name > AppData > Local > Android > Sdk
1. เปิดโปรแกรม Unity แล้วไปที่ Edit > Preferences
2. ไปที่ External Tools
3. ไปที่ JDK คลิก Download

25. 21
4. จะเข้าสู้เว็บไซต์ Java ในส่วนของ Java SE Development Kit ให้คลิก Accept License Agreement
5. เลือกดาวน์โหลดตามระบบปฏิบัติการที่ใช้อยู่
6. ลงชื่อเข้าใช้ด้วยบัญชี Oracle

26. 22
7. เมื่อดาวน์โหลดเสร็จแล้ว ให้ดับเบิ้ลคลิก JDK Windows x64.exe เพื่อทำการติดตั้ง
8. คลิก Next
9. คลิก Next แล้วรอสักครู่
10. คลิก Next แล้วรอสักครู่
11. คลิก Close

27. 23
12. กลับไปที่ Unity โปรแกรมจะตรวจพบ JDK ที่หน้าต่าง Java
Development Kit (JDK) detected ให้คลิก Yes
หมายเหตุ
หาก Unity ไม่ตรวจพบอัตโนมัติ ในหน้าต่าง Unity Preferences > External Tools ให้อ้างอิง SDK โดยการ
คลิก Browse แล้วเลือกไดเรคทอรี่ C > Program Files > Java > jdk
การติดตั้งแบบออนไลน์
1. ไปที่ visualstudio.microsoft.com
2. คลิก Download Visual Studio เลือกรุ่น Community หรือ Professional
3. ดับเบิ้ลคลิกตัวติดตั้ง Visual Studio
4. คลิก Continue
5. รอสักครู่

28. 24
6. คลิก Install
7. คลิก Continue
8. คลิก Not now แล้วรอโปรแกรมดาวน์โหลดและติดตั้งสักครู่
9. เมื่อติดตั้งเสร็จแล้ว คลิก Lunch เพื่อเปิดโปรแกรม Visual Studio

29. 25
10. คลิก Not now, may be later
11. เลือก Theme ที่ต้องการ
12. คลิก Start Visual Studio
13. คลิกปิดโปรแกรม
การติดตั้งแบบออฟไลน์
1. เข้าไปที่โฟลเดอร์ Installer แล้วดับเบิ้ลคลิกที่ vs_Professional1.exe
2. คลิก Continue แล้วรอสักครู่

30. 26
3. คลิก Install
4. คลิก Continue
5. คลิก Not now แล้วรอโปรแกรมดาวน์โหลดและติดตั้งสักครู่
6. คลิก Lunch เพื่อเปิดโปรแกรม Visual Studio
7. คลิก Not now, may be later
8. เลือก Theme ที่ต้องการ
9. คลิก Start Visual Studio
10. คลิกปิดโปรแกรม

31. 27
โมเดล 3 มิติ เป็นสิ่งที่จำเป็นต้องเตรียมหากต้องการสร้าง AR โดยใช้สมาร์ทโฟนส่องไปยังรูปภาพ
Image Target แล้วปรากฏภาพ 3 มิติ ผู้ใช้สามารถปั้นโมเดล 3 มิติขึ้นเองได้จากโปรแกรมสร้างโมเดล 3 มิติ
ได้แก่ Maya, 3Ds Max และ Blender เป็นต้น หรือสามารถเข้าไปดาวน์โหลดได้ที่ models-resource.com,
assetstore.unity.com และ free3d.com
เสียง เป็นวัตถุดิจิทัลที่แสดงเสียงที่ผู้ใช้จำเป็นต้องเตรียมหาก
ต้องการสร้าง AR โดยใช้สมาร์ทโฟนส่องไปยัง รูปภาพ Image Target หรือ
Marker แล้วปรากฏเป็นคลิปเสียง ผู้ใช้สามารถบันทึกเสียงและตัดต่อเสียง
ได้จากโปรแกรมตัดต่อเสียงทั่วไป เช่น Adobe Audition, Sony Sound
Force และ Audacity เป็นต้น
คลิปวิดีโอ เป็นสิ่งที่จำเป็นต้องเตรียมหากต้องการสร้าง AR โดยใช้สมาร์ทโฟนส่องไปยังรูปภาพ
Image Target หรือ Marker แล้วปรากฏเป็นคลิปวิดีโอ ผู้ใช้สามารถถ่ายทำ ตัดต่อ และทำภาพกราฟิก
เคลื่อนไหวได้จากโปรแกรมตัดต่อวิดีโอทั่วไป เช่น Adobe Premiere Pro, Adobe After Effects และ
TechSmith Camtasia เป็นต้น

32. 28
รูปภาพเป้าหมาย (Image Target) มาร์คเกอร์ (Marker) หรือทริกเกอร์ (Tricker) เป็นรูปภาพที่ใช้
อ้างอิงในฐานข้อมูล ผู้ใช้จะต้องออกแบบรูปภาพเพื่อให้สมาร์ทโฟนส่อง สามารถออกแบบรูปภาพได้จาก
โปรแกรมวาดภาพหรือตกแต่งภาพทั่วไป เช่น Adobe Photoshop และ Adobe Illustrator เป็นต้น
ภาพกราฟิก (Graphic) เป็นกราฟิกสำหรับใช้ทำการปฏิสัมพันธ์ระหว่างผู้ใช้ เช่น ในการทำงานของ
เทคโนโลยีความจริงเสริมที่มีการปฏิสัมพันธ์ อาจมีการสร้างปุ่ม (Button) เข้ามาใช้ในโปรเจ็คต์ จึงจำเป็นต้อง
ออกแบบกราฟิกสำหรับปุ่มให้ดูสวยงามน่าใช้
1. คลิก Start
2. คลิก Unity

33. 29
1. เมื่อเปิดโปรแกรม Unity แล้วให้คลิก Projects
2. คลิก New project
3. กำหนดรายละเอียดโปรเจ็คต์ดังนี้
▪ Project name กำหนดชื่อโปรเจ็คต์
▪ Location กำหนดที่จัดเก็บโปรเจ็คต์
▪ Template กำหนดเป็น 3D
4. คลิก Create project

34. 30
การทำงานของ Unity มักจะมีการนำโมเดล นำกล้อง นำรูปภาพ และส่วนประกอบต่างๆ เข้ามาใน
ฉาก (Scene) ดังนั้นการบันทึกจะไปที่ File > Save Scene แต่ถ้าหากมีการนำเข้าไฟล์ต่างๆ ด้วยให้บันทึกโปร
เจ็คต์ โดยไปที่ File > Save Project
1. ไปที่ Projects
2. คลิก Open
3. เลือกโฟลเดอร์โปรเจ็คต์
4. คลิก Select Folder
5. จะปรากฏโปรเจ็คต์

35. 31
หมายเหตุ
การเปิดโปรเจ็คต์สามารถทำได้โดยคลิกที่ Projects โปรแกรมจะแสดงโปรเจ็คต์ล่าสุดที่เคยเปิดไว้ ให้คลิกโปรเจ็คต์ที่ต้องการเปิด
หากไม่พบในรายการให้คลิก Open
หลังจากเปิดโปรแกรมและสร้างโปรเจ็คต์ใหม่ขึ้นมาแล้ว จะพบกับส่วนประสานงานผู้ใช้ (User
Interface) ของโปรแกรม Unity โดยพาเนลหลักที่ใช้งานมีดังนี้

36. 32
เมนูบาร์ (Menu Bar) สำหรับเรียกใช้คำสั่งต่างๆ
แถบเครื่องมือ (Tool Bar) สำหรับจัดการกับวัตถุ
พาเนล Hierarchy สำหรับจัดลำดับวัตถุ
พาเนล Scene สำหรับแสดงพื้นที่การทำงาน
พาเนล Project สำหรับจัดเก็บไฟล์ต่างๆ ที่ต้องใช้งาน เช่น รูปภาพ วิดีโอ และเสียง เป็นต้น
พาเนล Inspector สำหรับกำหนดค่าต่างๆ ให้กับวัตถุที่เลือกในพาเนล Hierarchy
การควบคุมการแสดงผลและการจัดการวัตถุ จะใช้เครื่องมือในแถบเครื่องมือ (Tool Bar) โดยแต่ละ
เครื่องมีมีหน้าที่การทำงานดังนี้
Hand Tool สำหรับเลื่อนมุมมองในฉาก
Move Tool สำหรับปรับตำแหน่งวัตถุในฉาก
Rotate Tool สำหรับหมุนวัตถุในฉาก
Scale Tool สำหรับปรับขนาดวัตถุในฉาก
Rect Tool สำหรับปรับขนาดวัตถุในระนาบ 2 มิติ
Move, Rotate or Scale selected objects สำหรับปรับตำแหน่ง หมุน และปรับ
ขนาดวัตถุ
Center สำหรับกำหนดจุดหมุนของวัตถุให้อยู่ตรงกลาง
Pivot สำหรับกำหนดจุดหมุนของวัตถุให้อยู่ด้านล่าง
Global กำหนดวิธีการจับวัตถุแบบสากล
Local กำหนดวิธีการจับวัตถุโดยมีทิศทางการจับตรงข้ามกับ Global
เนื่องจากการใช้เครื่องมือควบคุมการแสดงผลและจัดการวัตถุ อาจทำให้การทำงานเป็นไปได้ช้า การ
ใช้เมาส์และคีย์บอร์ด จะช่วยให้ทำงานได้เร็วขึ้น โดยมีรายละเอียดดังนี้

37. 33
[ALT] + เมาส์กลาง ใช้สำหรับเลื่อนมุมมองในฉาก
[ALT] + เมาส์ซ้าย ใช้หมุนมุมมองในฉาก
[ALT] + เมาส์ขวา ใช้สำหรับซูมเข้า-ซูมออก มุมมองในฉาก
ลูกกลิ้งเมาส์กลาง ใช้สำหรับซูมเข้า-ซูมออก มุมมองในฉาก
[ALT] + ลูกกลิ้งเมาส์กลาง ใช้สำหรับซูมเข้า-ซูมออก ในบริเวณที่เคอร์เซอร์ปรากฏ
1. ไปที่ File > Build Settings
2. ไปที่ Android
3. คลิก Switch Platform
4. คลิก Player Settings
5. ไปที่พาเนล Inspector
6. ไปที่ XR Settings แล้วคลิกเลือก Vuforia Augmented Reality
7. ปิดหน้าต่าง Build Settings

38. 34
1. ลงชื่อเข้าใช้ที่เว็บไซต์ developer.vuforia.com
2. ไปที่เมนู Develop
3. ไปที่แท็บ License Manager
4. คลิก Get Development Key
5. กำหนดชื่อใบอนุญาตที่ช่อง License Name
6. คลิกเลือก By Checking this Box

39. 35
7. คลิก Confirm
8. คลิกที่ชื่อใบอนุญาต
9. ในส่วนของ License Key ให้คลิกที่รหัสที่ปรากฏเพื่อคัดลอกไปยัง Unity

40. 36
1. ไปที่พาเนล Hierarchy คลิกขวาที่ Main Camera แล้วเลือกคำสั่ง Delete
2. ไปที่เมนู GameObject > Vuforia > AR Camera
3. คลิก Import แล้วรอสักครู่
4. คลิกที่ AR Camera
5. ไปที่พาเนล Inspector

41. 37
6. คลิก Open Vuforia Engine Configuration
7. คัดลอก License Key จากเว็บ Vuforia ไปวางที่ช่อง App License Key
8. คลิกบริเวณที่ว่าง 1 ครั้ง เพื่อเสร็จสิ้นการเชื่อมโยงใบอนุญาต

42. 38
1. ไปที่เว็บ Vuforia
2. ไปที่เมนู Develop
3. ไปที่แท็บ Target Manager
4. คลิก Add Database
5. กำหนดชื่อฐานข้อมูลในช่อง Database Name
6. กำหนด Type เป็น Device
7. คลิก Create
8. คลิกที่ฐานข้อมูลที่สร้างขึ้น

43. 39
9. คลิก Add Target
10. คลิกเลือก Single Image
11. คลิก Browse เลือกไฟล์ Image Target
12. เลือกรูปภาพที่ต้องการ
13. คลิก Open
14. กำหนดความกว้างของ Image Target ที่ช่อง Width (ค่าที่เหมาะสมคือ 400)
15. คลิก Add
16. รูปภาพจะปรากฏพร้อมแสดง Rating และ Status
17. คลิก Download Database (All)

44. 40
18. คลิกเลือก Unity Editor
19. คลิก Download
20. เมื่อดาวน์โหลดเสร็จแล้วคลิกที่ไฟล์ฐานข้อมูล
21. จะเข้าสู่โปรแกรม Unity โดยอัตโนมัติ ให้คลิก Import

45. 41
1. คลิก AR Camera
2. ไปที่ GameObject > Vuforia > Image
3. คลิกที่ Image Target
4. ไปที่พาเนล Inspector แล้วกำหนดคสั่งใน Image Target Behavior ดังนี้
▪ Database ให้เลือกฐานข้อมูลที่สร้างขึ้น
▪ Image Target ให้เลือกรูปภาพที่ต้องการ

46. 42
1. ไปที่ models-resource.com
2. คลิกเลือกโมเดล 3 มิติที่ต้องการ
3. คลิก Download Zip Archive

47. 43
4. แตกไฟล์โดยการคลิกขวา แล้วเลือกคำสั่ง Extract Here
5. ลากโฟลเดอร์โมเดลไปวางในโปรแกรม Unity ในโฟลเดอร์ Assets

48. 44
6. ดับเบิ้ลคลิกโฟลเดอร์โมเดล แล้วลากไฟล์โมเดล (.dae) ไปไว้ใน Image Target
7. ย่อ ขยาย หมุน และปรับตำแหน่งโมเดลให้อยู่ภายในรูปภาพ Image Target

49. 45
8. คลิก Play เพื่อทดสอบการแสดงผล
หมายเหตุ
การย่อ ขยาย หมุน และปรับตำแหน่ง นอกจากใช้เครื่องมือสำหรับย่อ ขยาย หมุน และ
ปรับตำแหน่ง แล้ว สามารถไปที่พาเนล Inspector แล้วกำหนดตำแหน่งที่ Position
กำหนดการหมุนที่ Rotation และกำหนดขนาดที่ Scale โดยการพิมพ์ค่าที่ต้องการ
1. สร้างโปรเจ็คต์ใหม่ใน Unity (ดูเพิ่มเติมที่หน้า 29)
2. ตั้งค่าโปรเจ็คต์ AR (ดูเพิ่มเติมที่หน้า 33-34)
3. การจัดการใบอนุญาตจาก Vuforia (ดูเพิ่มเติมที่หน้า 34-35)
4. จัดการเชื่อมโยงใบอนุญาตจาก Vuforia ให้เรียบร้อย (ดูเพิ่มเติมที่หน้า 36-37)
5. จัดการฐานข้อมูล Image Target (ดูเพิ่มเติมที่หน้า 38-40)
6. นำรูปภาพ Image Target เข้ามาใน Unity (ดูเพิ่มเติมที่หน้า 41)

50. 46
1. ไปที่เว็บไซต์ free3d.com
2. เลือกดาวน์โหลดโมเดล 3 มิติที่มีแอนิเมชั่น
3. แตกไฟล์ให้เรียบร้อย
4. ดับเบิ้ลคลิกที่ไฟล์ Unity
5. จะกลับเข้าสู่โปรแกรม Unity อัตโนมัติ ให้คลิก Import

51. 47
6. โฟลเดอร์โมเดลแอนิเมชั่น 3 มิติ จะมาอยู่ในโฟลเดอร์ Assets ใน Unity
7. เข้าไปที่โฟลเดอร์ที่จัดเก็บโมเดล คลิกที่โมเดลค้างไว้ แล้วลากไปไว้ใน Image Target

52. 48
8. กำหนดตำแหน่ง การหมุน และขนาดของโมเดล ให้อยู่ภายในรูปภาพ Image Target
หมายเหตุ
การเลือกโมเดล 3 มิติ ที่มีแอนิเมชั่นจากเว็บไซต์ free3d.com ให้เลือกหมวดหมู่ 3D ที่ต้องการ แล้วคลิก Animated เว็บไซต์จะ
แสดงเฉพาะโมเดลที่มีแอนิเมชั่นเท่านั้น และในขั้นตอนการดสวน์โหลดให้เลือกไฟล์สำหรับ Unity
1. ไปที่พาเนล Hierarchy แล้วคลิกที่โมเดลใน Image Target
2. ไปที่พาเนล Inspector คลิก Select

53. 49
3. คลิกที่โมเดล แล้วคลิกปุ่ม Expand จะปรากฏแอนิเมชั่นท่าทางต่างๆ
4. คลิกที่ท่าทางที่ต้องการ
5. คลิก Play โปรแกรมจะแสดงแอนิเมชั่นท่าทางที่เลือก
6. คลิกที่ท่าทางที่ต้องการค้างไว้ แล้วลากไปไว้ที่โมเดลในพาเนล Hierarchy

54. 50
7. คลิกที่โมเดล จะพบว่าที่พาเนล Inspector ในส่วนของ Controller จะปรากฏท่าทางที่เลือกไว้
8. ที่พาเนล Inspector คลิก Select
9. ไปที่แท็บ Animation
10. คลิกที่ท่าทางที่เลือก
11. เลื่อน Scroll Bar ลงมา ให้คลิกเลือก Loop Time และ Loop Pose เพื่อให้แอนิเมชั่นเล่นวนซ้ำ
12. คลิก Apply

55. 51
13. ดับเบิ้ลคลิกที่ Animator Controller
14. จะเห็นคำสั่ง Entry กับท่าทางที่เลือกไว้เชื่อมโยงกัน
15. คลิกกลับไปที่ Scene
16. คลิก Play เพื่อทดสอบการแสดงผล

56. 52
1. ดับเบิ้ลคลิกที่ Animator Controller
2. ลากท่าทางที่ต้องการได้หลายท่าทางไปวางไว้ที่พาเนล Animator
3. คลิกขวาที่โหนดท่าทาง แล้วคลิก Make Transition

57. 53
4. คลิกที่โหนดท่าทางที่ต้องการให้เล่นต่อ จะปรากฏลูกศรไปยังโหนดท่าทาง
5. ทำขั้นตอนที่ 3-4 ซ้ำ จนครบรอบ เพื่อให้ท่าทางเล่นวนซ้ำ
6. คลิกที่โมเดลในพาเนล Hierarchy
7. ที่พาเนล Inspector คลิก Select

58. 54
8. ไปที่แท็บ Animation
9. คลิกที่ท่าทางที่เลือก
10. เลื่อน Scroll Bar ลงมา ให้คลิกเลือก Loop Time และ Loop Pose เพื่อให้แอนิเมชั่นเล่นวนซ้ำ
11. คลิก Apply
12. ทำขั้นตอนที่ 10-12 ซ้ำ จนครบทุกท่าทาง
13. คลิก Play เพื่อทดสอบการแสดงผล

59. 55
1. สร้างโปรเจ็คต์ใหม่ใน Unity (ดูเพิ่มเติมที่หน้า 29)
2. ตั้งค่าโปรเจ็คต์ AR (ดูเพิ่มเติมที่หน้า 33-34)
3. การจัดการใบอนุญาตจาก Vuforia (ดูเพิ่มเติมที่หน้า 34-35)
4. จัดการเชื่อมโยงใบอนุญาตจาก Vuforia ให้เรียบร้อย (ดูเพิ่มเติมที่หน้า 36-37)
5. จัดการฐานข้อมูล Image Target (ดูเพิ่มเติมที่หน้า 38-40)
6. นำรูปภาพ Image Target เข้ามาใน Unity (ดูเพิ่มเติมที่หน้า 41)
7. ดาวน์โหลดและจัดการโมเดล 3 มิติ (ดูเพิ่มเติมที่หน้า 42-45)
Lean Touch เป็นส่วนเสริมของ Unity ใช้สำหรับสร้างการปฏิสัมพันธ์กับโมเดล 3 มิติ ที่ใช้กับ
เทคโนโลยีความจริงเสริม (Augmented Reality: AR) เช่น ควบคุมการหมุน ย้าย ย่อ ขยาย โดยใช้นิ้วสัมผัส
บนหน้าจอสมาร์ทโฟน สามารถดาวน์โหลดมาใช้งานได้ฟรีจาก Unity Assets Store โดยมีขั้นตอนดังนี้

60. 56
1. คลิกที่แท็บ Asset Store
2. ค้นหา Lean Touch
3. คลิกที่ Lean Touch
4. คลิก Download (ต้องลงชื่อเข้าใช้ Unity)

61. 57
5. คลิก Import
6. จะปรากฏหน้า Import Unity Package ให้คลิก Import
7. จะปรากฏโฟลเดอร์ Lean ในโฟลเดอร์ Assets
8. คลิก Scene เพื่อกลับสู่หน้าต่างการทำงานตามปกติ
9. ไปที่ GameObject > Lean > Touch
10. จะปรากฏ LeanTouch ในพาเนล Hierarchy

62. 58
11. คลิกที่โมเดลในพาเนล Hierarchy
12. ไปที่พาเนล Inspector
13. คลิก Add Component
14. ค้นหาแล้วเลือกคอมโพเนนท์ ดังนี้
▪ Lean Twist Rotate สำหรับหมุนโมเดล
▪ Lean Drag Translate สำหรับเคลื่อนย้ายโมเดล
▪ Lean Pinch Scale สำหรับย่อขยายโมเดล
15. ทดสอบการแสดงผล โดยต้อง Build เป็น .apk แล้วติดตั้งในสมาร์ทโฟนแอนดรอยด์
1. คลิกที่โมเดลในพาเนล Hierarchy
2. ลบคอมโพเนนท์ Lean Drag Translate โดยการคลิก แล้วเลือกคำสั่ง Remove Component

63. 59
3. คลิก Add Component
4. เลือก New Script
5. กำหนดชื่อสคริปต์
6. คลิก Create and Add
7. จะปรากดับเบิ้ลคลิกที่สคริปต์ที่สร้างขึ้น
8. จะเข้าสู่โปรแกรม Visual Studio ให้ลบสคริปต์ที่ไม่ได้ใช้ออก

64. 60
9. พิมพ์สคริปต์ดังนี้
float rotationSpeed = 1f;
private void OnMouseDrag()
{
float rotationX = Input.GetAxis("Mouse X")*rotationSpeed;
float rotationY = Input.GetAxis("Mouse Y")*rotationSpeed;
transform.Rotate(Vector3.down, rotationX);
transform.Rotate(Vector3.right, rotationY);
}
10. คลิก Save แล้วปิดโปรแกรม Visual Studio
11. คลิกที่โมเดลในพาเนล Hierarchy
12. คลิก Add Component
13. เลือก Capsule Collider

65. 61
14. ที่คอมโพเนนท์ Capsule Collider กำหนดขนาดและตำแหน่งแคปซูลให้ครอบคลุมโมเดล
15. คลิก Play เพื่อทดสอบการแสดงผล

66. 62
หมายเหตุ
การปรับขนาดและตำแหน่งของคอมโพเนนท์ Capsule Collider ให้ปรับขนาดที่ Radius และปรับตำแหน่งที่ Center โดยการ
พิมพ์ค่า X Y และ Z
1. สร้างโปรเจ็คต์ใหม่ใน Unity (ดูเพิ่มเติมที่หน้า 29)
2. ตั้งค่าโปรเจ็คต์ AR (ดูเพิ่มเติมที่หน้า 33-34)
3. การจัดการใบอนุญาตจาก Vuforia (ดูเพิ่มเติมที่หน้า 34-35)
4. จัดการเชื่อมโยงใบอนุญาตจาก Vuforia ให้เรียบร้อย (ดูเพิ่มเติมที่หน้า 36-37)
5. จัดการฐานข้อมูล Image Target (ดูเพิ่มเติมที่หน้า 38-40)
6. นำรูปภาพ Image Target เข้ามาใน Unity (ดูเพิ่มเติมที่หน้า 41)
7. ดาวน์โหลดและจัดการโมเดล 3 มิติ (ดูเพิ่มเติมที่หน้า 42-45)

67. 63
1. สร้างโฟลเดอร์ Sound ไว้ในโฟลเดอร์ Assets โดยการคลิกขวา > Create > Folder
2. ลากไฟล์เสียงเข้ามาไว้ในโฟลเดอร์ Sound
3. ไปที่พาเนล Hierarchy ให้คลิกที่ Image Target
4. ไปที่พาเนล Inspector ให้คลิก Add Component

68. 64
5. คลิกเลือก Audio
6. คลิกเลือก Audio Source
7. ลากไฟล์เสียงไปวางไว้ที่ Audio Clip
8. คลิกยกเลิกคำสั่ง Play On Awake เพื่อไม่ให้เสียงเล่นทันที
9. ไปที่พาเนล Hierarchy ให้คลิกที่ Image Target
10. ไปที่พาเนล Inspector ในส่วนของ Default Trankable Event Handler ให้ดับเบิ้ลคลิกที่ Script

69. 65
11. จะเข้าสู่โปรแกรม Visual Studio โดยอัตโนมัติ กด Enter ที่บรรทัดที่ 19 แล้วพิมพ์สคริปต์ดังนี้
public AudioSource soundFruit;
void Awake()
{
soundFruit = GetComponent<AudioSource>();
}
12. ไปที่ส่วนของ protected virtual void OnTrackingFound() กด Enter ที่บรรทัด 105 แล้วพิมพ์สคริปต์
ดังนี้
soundFruit.Play();
13. ไปที่ส่วนของ protected virtual void OnTrackingLost() กด Enter ที่บรรทัด 126 แล้วพิมพ์สคริปต์
ดังนี้
soundFruit.Stop();
14. คลิก Save และปิดโปรแกรม Visual Studio

70. 66
15. กลับไปที่ Unity แล้วคลิก Play เพื่อทดสอบการแสดงผล
หมายเหตุ
▪ public AudioSource soundFruit; “soundFruit” จะเป็นชื่ออะไรก็ได้
▪ protected virtual void OnTrackingFound() หมายถึง ถ้าพบรูปภาพ Image Target จะเล่นเสียง
▪ protected virtual void OnTrackingLost() หมายถึง ถ้าไม่พบรูปภาพ Image Target จะเลิกเล่นเสียง

71. 67
1. สร้างโปรเจ็คต์ใหม่ใน Unity (ดูเพิ่มเติมที่หน้า 29)
2. ตั้งค่าโปรเจ็คต์ AR (ดูเพิ่มเติมที่หน้า 33-34)
3. การจัดการใบอนุญาตจาก Vuforia (ดูเพิ่มเติมที่หน้า 34-35)
4. จัดการเชื่อมโยงใบอนุญาตจาก Vuforia ให้เรียบร้อย (ดูเพิ่มเติมที่หน้า 36-37)
5. จัดการฐานข้อมูล Image Target (ดูเพิ่มเติมที่หน้า 38-40)
6. นำรูปภาพ Image Target เข้ามาใน Unity (ดูเพิ่มเติมที่หน้า 41)
1. ไปที่พาเนล Hierarchy ให้คลิกขวาที่ Image Target > 3D Object > Quad

72. 68
2. ย่อ ขยาย หมุน และปรับตำแหน่ง Quad ให้อยู่ภายในรูปภาพ Image Target
3. สร้างโฟลเดอร์ Video ไว้ในโฟลเดอร์ Assets โดยการคลิกขวา > Create > Folder

73. 69
4. ลากไฟล์วิดีโอเข้ามาไว้ในโฟลเดอร์ Video
5. ไปที่พาเนล Hierarchy ให้คลิกที่ Quad
6. ไปที่พาเนล Inspector ให้คลิก Add Component
7. คลิกเลือก Video
8. คลิกเลือก Video Player
9. ลากไฟล์วิดีโอไปวางไว้ที่ Video Clip
10. คลิกยกเลิกคำสั่ง Play On Awake เพื่อไม่ให้วิดีโอเล่นทันที

74. 70
11. ไปที่พาเนล Hierarchy ให้คลิกที่ Image Target
12. ไปที่พาเนล Inspector ในส่วนของ Default Trankable Event Handler ให้ดับเบิ้ลคลิกที่ Script

75. 71
13. จะเข้าสู่โปรแกรม Visual Studio โดยอัตโนมัติ กด Enter ที่บรรทัดที่ 19 แล้วพิมพ์สคริปต์ดังนี้
public UnityEngine.Video.VideoPlayer videoplayer;
14. ไปที่ส่วนของ protected virtual void OnTrackingFound() กด Enter ที่บรรทัด 101 แล้วพิมพ์สคริปต์
ดังนี้
videoplayer.Play();
15. ไปที่ส่วนของ protected virtual void OnTrackingLost() กด Enter ที่บรรทัด 122 แล้วพิมพ์สคริปต์
ดังนี้
videoplayer.Stop();
16. คลิก Save และปิดโปรแกรม Visual Studio

76. 72
17. กลับไปที่ Unity ไปที่พาเนล Hierarchy แล้วลาก Quad ไปยัง Videoplayer ในพาเนล Inspector
18. คลิก Play เพื่อทดสอบการแสดงผล

77. 73
1. สร้างโปรเจ็คต์ใหม่ใน Unity (ดูเพิ่มเติมที่หน้า 29)
2. ตั้งค่าโปรเจ็คต์ AR (ดูเพิ่มเติมที่หน้า 33-34)
3. การจัดการใบอนุญาตจาก Vuforia (ดูเพิ่มเติมที่หน้า 34-35)
4. จัดการเชื่อมโยงใบอนุญาตจาก Vuforia ให้เรียบร้อย (ดูเพิ่มเติมที่หน้า 36-37)
5. จัดการฐานข้อมูล Image Target (ดูเพิ่มเติมที่หน้า 38-40) แต่ Add Target มากกว่า 1 รูปภาพ
1. คลิกที่ AR Camera
2. ไปที่ GameObject > Vuforia Engine > Image

78. 74
3. คลิกที่ Image Target
4. ไปที่พาเนล Inspector แล้วกำหนดค่าดังนี้
▪ Database ให้เลือกฐานข้อมูลที่สร้างขึ้น
▪ Image Target จะพบว่ามีมากกว่า 1 รูปภาพ ให้เลือกรูปภาพที่ต้องการ
5. สร้างโฟลเดอร์ 3D Model ไว้ในโฟลเดอร์ Assets โดยการคลิกขวา > Create > Folder

79. 75
6. ลากโฟลเดอร์โมเดลทั้งหมดไปวางในโปรแกรม Unity ในโฟลเดอร์ 3D Model
7. ดับเบิ้ลคลิกโฟลเดอร์โมเดล แล้วลากโมเดลที่ต้องการไปไว้ใน Image Target
8. ย่อ ขยาย หมุน และปรับตำแหน่งโมเดลให้อยู่ภายในรูปภาพ Image Target

80. 76
9. คลิกที่ Image Target แล้วเคลื่อนย้ายตำแหน่งแกน X เพื่อรองรับพื้นที่ Image Target ใหม่
10. เพิ่ม Image Target และโมเดลตามขั้นตอนที่ 7-9 ซ้ำ
11. เปลี่ยนชื่อทุก Image Target โดยการคลิกขวาที่ Image Target > Rename
12. คลิกที่ AR Camera
13. คลิก Open Vuforia Engine Configuration

81. 77
14. กำหนด Max Simultaneous Tracked Images และ กำหนด Max Simultaneous Tracked Objects
ตามจำนวนรูปภาพและวัตถุ
15. คลิก Play เพื่อทดสอบการแสดงผล ต้องแสดงผลทุก Image Target

82. 78
1. เปิดโปรเจ็คต์ AR ที่เคยสร้างไว้
2. ไปที่ GameObject > UI > Button

83. 79
3. ปรับมุมมองการแสดงผลโดยคลิก 2D
4. ไปที่พาเนล Inspector ในส่วนของ Rect Transform ให้กำหนดตำแหน่งและขนาดของปุ่ม
1. ไปที่พาเนล Hierarchy ให้คลิกที่ Button > Text
2. ไปที่พาเนล Inspector และกำหนดรายละเอียดของปุ่มดังนี้
▪ Text กำหนดข้อความที่ปรากฏบนปุ่ม
▪ Character กำหนดลักษณะตัวอักษร
▪ Paragraph กำหนดการจัดย่อหน้า

84. 80
1. ไปที่พาเนล Hierarchy ให้คลี่ Button แล้วคลิก Text
2. ลบ Text โดยการคลิกขวา > Delete
3. สร้างโฟลเดอร์ Button ไว้ในโฟลเดอร์ Assets โดยการคลิกขวา > Create > Folder
4. ลากรูปภาพปุ่มที่ต้องการไปไว้ในโฟลเดอร์ Button แล้วคลิกที่รูปภาพปุ่ม
5. ไปที่พาเนล Inspector แล้วกำหนด Texture Type เป็น Sprite (2D and UI)

85. 81
6. คลิก Apply
7. ไปที่พาเนล Hierarchy ให้คลิกที่ Button
8. ลากรูปภาพปุ่มไปไว้ที่ Source Image ในพาเนล Inspector

86. 82
9. ไปที่พาเนล Inspector ในส่วนของ Rect Transform ให้กำหนดตำแหน่งและขนาดของปุ่ม
1. ไปที่โฟลเดอร์ Assets
2. ไปที่ Assets > Create > C# Script

87. 83
3. ตั้งชื่อไฟล์ C# (ตัวอย่างชื่อ LinkWebButton) แล้วดับเบิ้ลคลิกที่ไฟล์ C# ที่สร้างขึ้น
4. จะเข้าสู่โปรแกรม Visual Studio โดยอัตโนมัติ แล้วลบสคริปต์ที่ไม่ต้องการ
5. ไปที่บรรทัดที่ 6 แล้วพิมพ์สคริปต์ดังนี้
public string url;
public void open()
{
Application.OpenURL(url);
}
6. คลิก Save และปิดโปรแกรม Visual Studio

88. 84
7. กลับไปที่ Unity แล้วคลิกลากไฟล์ C# ไปไว้ที่ Button
8. คลิกที่ Button
9. ไปที่พาเนล Inspector ในส่วนของ On Click () ให้คลิก Add to list
10. ไปที่พาเนล Hierarchy แล้วลาก Button ไปไว้ที่ None (Object)
11. คลิกที่ No Function > LinkWebButton > open()
12. ในส่วนของ Url ให้พิมพ์ชื่อเว็บไซต์

89. 85
13. คลิก Play เพื่อทดสอบการแสดงผล
1. ไปที่ GameObject > UI > Button

90. 86
2. แทรกรูปภาพเข้ามาในปุ่ม (ดูเพิ่มเติมที่หน้า 80-82) และกำหนดตำแหน่งและขนาดของปุ่ม
3. ไปที่ GameObject > Create Empty
4. เปลี่ยนชื่อ GameObject โดยการคลิกขวา > Rename แล้วกำหนดชื่อตามต้องการ (ตัวอย่างกำหนดเป็น
ExitControl)
5. คลิกที่ GameObject (ชื่อ ExitControl)
6. ไปที่พาเนล Inspector แล้วคลิก Add Component

91. 87
7. คลิกเลือก New script
8. กำหนดชื่อไฟล์สคริปต์ (ตัวอย่างกำหนดเป็น ExitControl)
9. คลิก Create and Add
10. ดับเบิ้ลคลิกที่ Script

92. 88
11. จะเข้าสู่โปรแกรม Visual Studio โดยอัตโนมัติ ให้ลบสคริปต์ที่ไม่ต้องการออก
12. ในส่วนของ public class ExitControl : MonoBehavior { ให้พิมพ์สคริปต์ดังนี้
public void Quit(){
Application.Quit();
}
13. คลิก Save แล้วปิด Visual Studio
14. ไปที่พาเนล Hierarchy คลิกที่ Button ปุ่มออกจากแอพพลิเคชั่น
15. ไปที่พาเนล Inspector ในส่วนของ On Click () ให้คลิก Add to list

93. 89
16. ไปที่พาเนล Hierarchy แล้วลาก GameObject (ชื่อ ExitControl) ไปไว้ที่ None (Object)
17. คลิกที่ No Function > ExitControl > Quit()
18. ทดสอบการแสดงผล โดยต้อง Build เป็น .apk แล้วติดตั้งในสมาร์ทโฟนแอนดรอยด์
1. สร้างโปรเจ็คต์ใหม่ใน Unity (ดูเพิ่มเติมที่หน้า 29)
2. ดับเบิ้ลคลิกเข้าไปที่โฟลเดอร์ Scene

94. 90
3. เปลี่ยนชื่อฉากโดยการคลิกขวาที่ไฟล์ > Rename
4. กำหนดชื่อตามที่ต้องการ (ตัวอย่างกำหนดเป็น MainMenu)
5. บันทึก Scene โดยไปที่ File > Save Scene

95. 91
6. สร้างฉากใหม่ โดยไปที่ File > New Scene
7. บันทึก Scene ที่สร้างขึ้นใหม่ โดยไปที่ File > Save Scene As
8. จัดเก็บไฟล์ไว้ในโฟลเดอร์ Scenes
9. กำหนดชื่อ Scene (ตัวอย่างกำหนดเป็น FruitVocabAR)
10. คลิก Save
11. สร้างและบันทึกฉากใหม่ โดยทำขั้นตอนที่ 5-10 ซ้ำ (กำหนดชื่อ Scene เป็น Author)

96. 92
การสร้างฉากเมนู
1. เข้าไปที่โฟลเดอร์ Scene แล้วดับเบิ้ลคลิกที่ฉาก MainMenu
2. ไปที่ GameObject > UI > Image
3. เพื่อให้ทำงานกับ UI สะดวกมากขึ้น ให้คลิก 2D
4. ไปที่พาเนล Hierarchy คลิก Canvas
5. ไปที่พาเนล Inspector ที่คำสั่ง UI Scale Mode ให้เลือก Scale With Screen Size

97. 93
6. กำหนด Reference Resolution (ตัวอย่างกำหนด X = 1280 และ Y = 720)
7. ไปที่พาเนล Hierarchy คลิก Image แล้วเปลี่ยนชื่อโดยการคลิกขวา > Rename
8. พิมพ์ชื่อที่ต้องการแล้วกด Enter (ตัวอย่างกำหนดเป็น BGMainMenu)
9. ไปที่พาเนล Inspector คลิก Anchor Presets
10. คลิกเลือก Stretch

98. 94
11. กำหนด Left Right Top Bottom เป็น 0
12. คลิกกลับไปที่โฟลเดอร์ Assets
13. สร้างโฟลเดอร์สำหรับเก็บรูปภาพกราฟิก โดยไปที่ Assets > Create > Folder (ตัวอย่างกำหนดชื่อ
Graphics)

99. 95
14. ดับเบิ้ลคลิกเข้าไปที่โฟลเดอร์ที่สร้างขึ้น ลากไฟล์รูปภาพที่ต้องการใช้มาไว้ในโฟลเดอร์
15. เลือกรูปภาพที่ต้องการ
16. ไปที่พาเนล Inspector ที่คำสั่ง Texture Type ให้เลือก Sprite (2D and UI)
17. คลิก Apply

100. 96
18. ไปที่พาเนล Hierarchy คลิก Image (ชื่อ BGMainMenu)
19. คลิกรูปภาพที่ต้องการให้เป็นภาพพื้นหลัง แล้วลากไปไว้ที่คำสั่ง Source Image ในพาเนล Inspector
20. จะปรากฏรูปภาพใน Image (ชื่อ BGMainMenu)

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

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

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

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

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

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

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

108. 104
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

109. 105
การจัดการฉาก 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

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

111. 107
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;

112. 108
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)

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

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

115. 111
การสั่งงานปุ่มในฉากผู้จัดทำ
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)

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

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

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

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

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

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

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

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

124. 120
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________

125. 121
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________

126. 122
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________