AR_Is_Trainning_Doc_V01

ก เอกสารประกอบการอบรม การพัฒนาเทคโนโลยีความเปนจริงเสริมเบ้ืองตน ดวยโปรแกรม Unity และ Vuforia โดย อาจารยป ริวฒั น พสิ ิษฐพงศ สาขาสอ่ื นฤมติ คณะวิทยาการสารสนเทศ มหาวทิ ยาลัยมหาสารคาม 24 สิงหาคม 2562

ข สารบัญ หนา บทท่ี 1 การติดตั้งและใชงานโปรแกรม Unity ....................................................................................... 4 1.1 เกีย่ วกบั Unity3D .....................................................................................................................4 1.2 การใชง านโปรแกรม Unity ในอุตสาหกรรม จะแบงออกเปน หมวดหมยู อยตา ง ๆ เชน..............5 1.3 การดาวนโหลดและติดตง้ั โปรแกรม Unity.................................................................................6 1.4 การสมคั ร Account ของ Unity เพอ่ื เขาชาน..........................................................................10 1.5 การติดตง้ั โปรแกรม Unity.......................................................................................................13 บทท่ี 2 พืน้ ฐานการใชง านโปรแกรม Unity .........................................................................................15 2.1 การสรางโปรเจคใหม ...............................................................................................................15 2.2 การตง้ั คา Platform สาํ หรับ Publish เกมออกมาใชง าน ........................................................16 2.3 สว นติดตอผูใช (User Interface) ตา ง ๆ ของโปรแกรม Unity................................................17 บทท่ี 3 การใชงาน Vuforia สําหรบั สราง Augmented Reality ........................................................19 3.1 เก่ียวกบั Vuforia .....................................................................................................................19 3.2 จดุ เดน ในการ Tracking ของโปรแกรม Vuforia ......................................................................19 3.3 การลงทะเบียนเพ่ือเขาใชงาน Vuforia ....................................................................................20 3.4 การใช Development Key....................................................................................................21 3.5 การสรา งภาพ Marker สําหรบั ใชง าน AR ................................................................................22 3.6 การทดสอบใชงาน AR ใน Unity .............................................................................................24 บทที่ 4 การสรา ง Application Watch Selection............................................................................29 4.1 ทาํ การออกแบบการใชงานโปรแกรม .......................................................................................29 4.2 การสรางไฟล GameManager.cs ...........................................................................................29 4.3 ทาํ การสรา งนาฬิกามา 2 เรอื น ................................................................................................30 4.4 ทาํ การสรา ง UI ........................................................................................................................31 4.5 ทาํ การแกสคริป GameManager.cs .......................................................................................31 4.6 เพมิ่ นาฬกิ าลงไปใน GameManager.......................................................................................31 4.7 การกาํ หนดใหป ุมมี Event ตาง ๆ............................................................................................32 ประวัตยิ อ วิทยากร...............................................................................................................................33

ค สารบัญตาราง หนา ตารางที่ 1.1 เปรยี บเทยี บโปรแกรม Unity ในเวอรช นั Beginners Hobbylists และ Pro ....................7

สารบัญภาพประกอบ หนา ภาพประกอบท่ี 1.1 โปรแกรม Unity ....................................................................................................5 ภาพประกอบท่ี 1.2 Application ของบอนคา สิโนตา ง ๆ ทีใ่ ช Unity ในการพฒั นาโปรแกรม...............5 ภาพประกอบที่ 1.3 การใช Unity สาํ หรับการนําเสนอสถาปตยกรรมตาง ๆ .........................................5 ภาพประกอบที่ 1.4 การใช Unity ในการพฒั นาเกมลงในแตล ะ Platform ...........................................6 ภาพประกอบที่ 1.5 เปด เว็บ Browser แลว พิมพ unity.com ...............................................................6 ภาพประกอบที่ 1.6 คลิกเลอื กทป่ี มุ Get Started .................................................................................7 ภาพประกอบท่ี 1.7 การดาวนโ หลดโปรแกรม Unity.............................................................................9 ภาพประกอบที่ 1.8 คลกิ ปมุ Go here ในสวนของ Experienced Users...........................................10 ภาพประกอบที่ 1.9 การดาวนโ หลด Unity Hub.................................................................................10 ภาพประกอบที่ 1.10 ไอคอนโปรแกรมชวยตดิ ตั้ง Unity Hub.............................................................10 ภาพประกอบที่ 1.11 การเขา ไปยังปุม Sign in เพ่ือสมคั รเขาใชง าน Unity.........................................11 ภาพประกอบท่ี 1.12 การคลิกปุม create one เพ่อื สราง ID ของ Unity ใหม หรือสามารถใช ID ของ Google และ Facebook เพ่ือเขาใชงานได.......................................................11 ภาพประกอบท่ี 1.13 การกรอกขอมลู ในชองตาง ๆ สาํ หรับการสมัคร Unity ID..................................12 ภาพประกอบที่ 1.14 หนาตา ง Confirm you Email..........................................................................12 ภาพประกอบที่ 1.15 การคลิกที่ link ภายในกลอ งจดหมายของ Email เพื่อยนื ยันตวั ตน....................13 ภาพประกอบท่ี 1.16 การเลือกปมุ Install และปุม Add เพ่ือติดตั้งโปรแกรมเวอรช นั ใหม ..................13 ภาพประกอบท่ี 1.17 หนา ตา งสําหรับเลือก Version ของ Unity กอนจะทําการคลกิ ที่ปุม NEXT.......14 ภาพประกอบท่ี 1.18 การเพ่ิม Module ทตี่ องการจะ Publish โปรแกรมไปตดิ ต้ังยังอุปกรณที่ ตองการ.............................................................................................................14 ภาพประกอบท่ี 1.19 Unity Hub กาํ ลังทาํ การ Download และตดิ ต้ังโปรแกรม Unity Editor.........14 ภาพประกอบที่ 2.1 การสรางโปรเจคใหมภ ายใน Unity......................................................................15 ภาพประกอบท่ี 2.2 ตัวเลือกตาง ๆ ในการสราง Project ....................................................................15 ภาพประกอบที่ 2.3 หนาตางขณะโปรแกรมทําการประมวลผลเพ่อื Import Asset Packages ...........16 ภาพประกอบท่ี 2.4 การเปลย่ี น Platform สําหรบั การพฒั นาโปรแกรมภายใน Unity ........................16 ภาพประกอบที่ 2.5 การเปดใชงาน Vuforia ในระบบปฏิบัตกิ าร Android .........................................17 ภาพประกอบที่ 2.6 สวนตดิ ตอผใู ช (User Interface) ตาง ๆ ภายในโปรแกรม Unity........................17 ภาพประกอบที่ 2.7 เครอ่ื งมอื Transform Tool ................................................................................18

2 สารบัญภาพประกอบ หนา ภาพประกอบท่ี 3.1 การใช Vuforia บนวัตถุจริง (ซา ย เพ่ือทําการแสดงผลวตั ถสุ ามมิติซอ นทับ (ขวา ....................................................................................................................19 ภาพประกอบท่ี 3.2 การ Tracking รปู ภาพและวางวตั ถุสามมิตลิ งไปบนหนาจอ .................................19 ภาพประกอบท่ี 3.3 การ Tracking วตั ถุแลว วางโมเดลสามมติ ิทบั ลงไปอีกที........................................20 ภาพประกอบท่ี 3.4 การวางวัตถสุ ามมิติลงไปบนการ Tracking ระนาบของพ้นื ..................................20 ภาพประกอบที่ 3.5 การลงทะเบียนนักพฒั นาของ Vuforia.................................................................21 ภาพประกอบที่ 3.6 การสรางคยี สําหรับนกั พัฒนา...............................................................................21 ภาพประกอบท่ี 3.7 การตงั้ ชื่อ License Name และยืนยันการใชง าน ................................................21 ภาพประกอบที่ 3.8 การเลอื ก License ท่ไี ดส รางขนึ้ มา......................................................................22 ภาพประกอบท่ี 3.9 การคัดลอก License เพื่อเขา ใชงาน Vuforia ใน Unity.....................................22 ภาพประกอบที่ 3.10 การสราง Database ของ Marker สาํ หรับใชง าน AR........................................22 ภาพประกอบท่ี 3.11 การสรา ง Marker สําหรบั นํามาใชงานภายในโปรแกรม Vuforia.......................23 ภาพประกอบที่ 3.12 การคลิกเลือก Marker ที่ตองการและคลิกเลือกทป่ี ุม Download Database...23 ภาพประกอบท่ี 3.13 การคลิกตัวเลอื กในการดาวนโ หลด Marker ลง Unity.......................................24 ภาพประกอบท่ี 3.14 การนําเขาขอมูล Database ของ Vuforia ไปใน Unity Editor.........................24 ภาพประกอบที่ 3.15 การลบ Vulkan .................................................................................................25 ภาพประกอบท่ี 3.16 การ Import AR Camera มาใชภ ายใน Unity Engine.....................................25 ภาพประกอบที่ 3.17 การปรับแตง คา ของ AR Camera ......................................................................26 ภาพประกอบที่ 3.18 การเปดใชงาน Vuforia Engine Configuration...............................................26 ภาพประกอบท่ี 3.19 ชองสําหรับใส License Key ทส่ี รางขึ้นมาบนเว็บไซต .......................................26 ภาพประกอบที่ 3.20 การใช Image Maker ใน Vuforia ....................................................................27 ภาพประกอบท่ี 3.21 การสรา งวตั ถสุ ามมติ ิมาใชทดสอบภายในโปรแกรม............................................27 ภาพประกอบที่ 3.22 การ Set Parent-Child แกว ตั ถุ ImageTarget และ Cube..............................27 ภาพประกอบที่ 3.23 การคลิกทป่ี ุม Play เพ่ือทดสอบโปรแกรม .........................................................28 ภาพประกอบที่ 4.1 โปรแกรมทอ่ี อกแบบเพื่อใชงาน............................................................................29 ภาพประกอบที่ 4.2 การแกไ ขไฟล GameManager.cs .......................................................................30 ภาพประกอบที่ 4.3 การสรางวตั ถุ GameManager สาํ หรบั ใชก บั สคริป GameManager.cs..............30 ภาพประกอบท่ี 4.4 การลากสครปิ GameManager.cs ไปใส Inspector ของ GameManager.......30 ภาพประกอบที่ 4.5 เพมิ่ Script สําหรับเรียกใชง านเวลาคลกิ ปมุ ตา ง ๆ ..............................................31

3 สารบญั ภาพประกอบ หนา ภาพประกอบท่ี 4.6 การเพ่ิมวตั ถสุ ามมติ ิสําหรบั ใชอางองิ การแสดงผลลงไปในสคริป GameManager32 ภาพประกอบท่ี 4.7 การใส Event ใหก บั ปมุ .......................................................................................32

บทที่ 1 การติดต้ังและใชง านโปรแกรม Unity 1.1 เก่ียวกับ Unity3D ปจจบุ นั คอมพิวเตอรไมใชแ คอปุ กรณท่ีตองตงั้ อยูบนโตะ เทานนั้ คอมพิวเตอรน ัน้ อยแู ทบทุกท่ี ในชีวติ ประจาํ วนั ของเรา เชน โทรศพั ทมือถือ โทรทัศน เปน ตน ทําใหมีสื่อบนั เทิงรูปแบบใหมๆ ออกมา มากมาย เชน ภาพยนตร 3 มิติ เกม 3 มติ ิ เทคโนโลยโี ลกเสมือน (Virtual Reality หรือ VR) เทคโนโลยี เสรมิ เสมือนจรงิ (Augmented Reality หรอื AR) ซ่ึงในปจ จุบนั เปนท่นี ิยมเปนอยา งมาก ในการสรางเกมสองมติ ิ (2D) และเกม 3 มติ ิ (3D) ในสมัยกอนจําเปนจะตองเขียนโปรแกรม เพอ่ื ดึงเอา Library ตางๆ มาใชง าน ทาํ ใหเกดิ ความยุงยากในการจดั การองคประกอบ (Content) ตางๆ ภายในเกม เชน รูปภาพ วตั ถุ 3 มิติ เสยี ง หรือแมกระท่ังการจดั การเง่ือนไขภายในเกม เชน การ ตรวจสอบการชนของวัตถุ (Object Collision) การจดั การระบบฟส ิกส (Physic) การจัดการแสง ฯลฯ ดวยเหตุนีน้ กั พัฒนาจงึ ไดทําการสรา งโปรแกรมเพ่ือจัดการทุกอยา งท่ีจาํ เปน จะตอ งใชภายในเกม เพือ่ ให เกดิ ความรวดเร็วในการทาํ งานและเกดิ ประสทิ ธิภาพสงู สุด คอื เกมเอนจ้นิ (Game Engine) เกมเอนจนิ้ แตเดิมนั้นถูกพัฒนาใหใ ชภายในองคกรเทานัน้ เชน Unreal Engine ทีถ่ กู พัฒนา เพ่ือนํามาใชก ับเกม Unreal Tournament ของบริษทั Epic Game แตเมอื่ ทางบรษิ ัทเล็งเห็นวา โปรแกรมเกมเอนจ้ินจะไดร บั ความนยิ มนอนาคต จึงเปดจัดจําหนายใหบริษทั ตางๆ ไดน าํ ไปใช ในเชงิ พาณิชยและก็มบี ริษัทอืน่ ๆ ทําตาม เชน CryTech ผพู ฒั นาโปรแกรม CryEngine และ Unity ก็เปนหนง่ึ ในเกมเอนจิน้ ทถ่ี ูกนําออกมาจําหนายเชนเดยี วกัน Unity เปน โปรแกรมเกมเอนจน้ิ ทไี่ ดรับความนิยมเปนอยา งมากในปจ จบุ นั เนื่องจากมีการ จัดการ Content ภายในตัวเกมทง่ี า ย สามารถ Publish ออกไปใชไดทกุ Platform มีเคร่ืองมือที่ หลากหลาย เชน เครอ่ื งมือสรางภมู ปิ ระเทศ (Terrain) เครื่องมือสรา งระบบฟสิกส เคร่ืองมือสรา ง ปญ ญาประดิษฐภ ายในเกม เปนตน อีกท้ังยังรองรับภาษาในการเขียนโปรแกรมไดถึงสองภาษาคือ C# และ UnityScript ซง่ึ เปน สคริปทด่ี ดั แปลงมาจาก JavaScript อกี ทั้งยงั มี Asset Store ใหน กั พฒั นา สามารถดาวนโหลดโปรแกรม วตั ถุ 3 มติ ิ เสยี ง สคริป ฯลฯ เพื่อนาํ มาทาํ การศึกษาพัฒนาเปนเกมของ ตนเองหรอื ทําขายเองภายใน Asset Store เองก็ได เมือ่ โปรแกรม Unity3D ไดร ับความนยิ มเปนอยา ง มาก ทางผูพฒั นาจงึ ไดเพ่ิมความสามารถในการสรางเกมสองมติ ิได โดยปจจุบัน Unity ไดออกเวอรช่นั 5 ใหนกั พฒั นาสามารถดาวนโ หลดไปพัฒนาเกมและสือ่ ตา ง ๆ ไดฟรีโดยมีการจาํ กัดความสามารถบางสวน

5 ภาพประกอบท่ี 1.1 โปรแกรม Unity 1.2 การใชง านโปรแกรม Unity ในอุตสาหกรรม จะแบง ออกเปนหมวดหมยู อยตาง ๆ เชน 1.2.1 Unity for Gambling เปน การนํา Unity ไปใชใ นเชงิ พาณชิ ยด า นการพนัน เชน การ แสดงผลของการเลนไพ โปก เกอรในคาสโิ น เปน ตน ภาพประกอบที่ 1.2 Application ของบอนคาสโิ นตา ง ๆ ทใี่ ช Unity ในการพัฒนาโปรแกรม 1.2.2 Unity AEC (Architecture, Engineering, and Construction เปนการนํา Unity ไป ใชในเชิงพาณชิ ยใ นดานสถาปตยกรรม เชน การนําเสนอตึกอาคาร การนําเสนอผลติ ภณั ฑ เปนตน ภาพประกอบที่ 1.3 การใช Unity สาํ หรับการนาํ เสนอสถาปต ยกรรมตา ง ๆ

6 1.2.3 Unity for Serious Games เปนการนาํ Unity ไปใชในเชิงพาณิชยด า นการทําเกมท่ีมี ความหลากหลายในการผลติ เชน การผลติ เกมเพื่อใหมคี วามรวดเรว็ การผลติ Cinematic และเสยี ง ภายในเกม การสรา งเกมโดยใชร ะบบเครือขายข้นั สงู การจัดการทรัพยากรของเกมใหมปี ระสทิ ธภิ าพ สงู สดุ ฯลฯ ภาพประกอบท่ี 1.4 การใช Unity ในการพัฒนาเกมลงในแตละ Platform 1.3 การดาวนโหลดและตดิ ต้งั โปรแกรม Unity 1.3.1 ใหเปดเว็บ Browser แลว พมิ พ URL ดังตอไปนี้ unity3d.com ภาพประกอบท่ี 1.5 เปด เวบ็ Browser แลว พมิ พ unity.com 1.3.1.1 ที่หนาเว็บหลกั ใหคลิกเลือกที่ปุม Get Started

7 ภาพประกอบท่ี 1.6 คลกิ เลอื กทปี่ มุ Get Started 1.3.2 ที่ Browser จะดดี ไปทห่ี นา https://store.unity.com/ โดยหนาหนา นีจ้ ะบอก รายละเอียดตาง ๆ เดยี วกับ Unity ในแตล ะ Package ดงั ตอไปน้ี 1.3.2.1 เวอรช นั Unity สาํ หรบั นกั พฒั นาอิสระและสตูดโิ อ โดยจะมตี ารางเรยี บเทยี บ Features ตาง ๆ ดงั ตอไปนี้ - เวอรชนั Pro จะเปน โปรแกรม Unity ท่ที างบรษิ ัทจะทําการใหก าร Support ทุก อยางให จําเปน จะตองตดิ ตอกบั ทาง Unity โดยตรงเพ่ือกําหนดคา ใชจายตาง ๆ - เวอรช นั Plus จะเปนโปรแกรม Unity ทใ่ี หน ักพฒั นาอสิ ระ - เวอรช ัน Personal จะเปน โปรแกรม Unity ท่ีสามารถใชงานไดฟรี ตารางที่ 1.1 เปรียบเทยี บโปรแกรม Unity ในเวอรชนั Beginners Hobbylists และ Pro สงิ่ ท่ี ผูใช/ทีมงาน/บรษิ ทั จะไดรับ เวอรช ันสาํ หรบั เวอรช ันสําหรับ เวอรชนั สาํ หรับ Beginners Hobbylists (Personal) Team and (Plus) Freelancer (Pro) เกยี่ วกับการเงนิ สามารถสรา ง ทีมตองสรา ง สามารถสรา ง รายไดน อยกวา รายไดมากกวา รายไดไ มจาํ กัด $100k $200k การ Support ของทีมงาน Unity  มากกวา 3 คน พืน้ ที่จัดเก็บขอมูลในคลาวน 25GB  ใชไ ดทกุ คนในทมี

8 สงิ่ ที่ ผูใช/ทมี งาน/บรษิ ัท จะไดร ับ เวอรช ันสาํ หรบั เวอรช ันสําหรับ เวอรช ันสาํ หรบั Beginners Hobbylists Team and มีเจา หนา ที่ของ Unity แนะนําการ (Personal) Freelancer สรา งเกมใหประสบความสําเร็จ (Plus)  ใชฟ รี 1 ป (Pro) Unity Lean Premium เพิม่ ได โดยเสีย (หลังจากนั้นจะ เก็บ $60)  Unity Icon Collective Access $15/เดือน ตามลําดับ  ความสาํ คัญ Priority queue for Customer ไดแ ค 1 จํากดั การเขา ถงึ Service   Analytics: Core Analytics   มลู คา($165/ป Analytics: Priority Support & มลู คา($165/ป Livestream  Analytics: 50GB/month of Raw  (มลู คา $249) Data Export  Source Code Access for  Purchase  Premium Support for Purchase   Pro Editor UI Skin   Splash Screen Customization ไดไ มจาํ กดั Cloud Diagnostics Advanced   Integrations  Ads  In-App Purchasing     ไดไมจํากดั  

9 สิ่งที่ ผใู ช/ทมี งาน/บริษทั จะไดรบั เวอรช นั สําหรับ เวอรชันสําหรบั เวอรช ันสําหรบั Beginners Hobbylists Team and Beta Access (Personal) Freelancer Flexible Seat Management (Plus) Continuous Updates  (Pro) Royalty-Free    All Core Engine Features &   Platforms          1.3.3 ในการดาวนโหลดโปรแกรมท่ีจะใชใ นการอบรมใหค ลิกท่ีปุม Get Started for Free (วงกลมสแี ดง ภาพประกอบที่ 1.7 การดาวนโหลดโปรแกรม Unity 1.3.4 ในหนา ตาง Start Creating with Unity ใหเ ลอื กปุม Go here ทด่ี านขวา (ในสว นของ Experienced Users)

10 ภาพประกอบท่ี 1.8 คลิกปุม Go here ในสวนของ Experienced Users 1.3.5 ท่หี นาตา ง Get Started with Unity Personal ใหคลิกยอมรับเง่ือนไขการใชงานของ บรษิ ทั (**ควรอานกอน จากนนั้ จึงคลิกปมุ Download Unity Hub ภาพประกอบท่ี 1.9 การดาวนโหลด Unity Hub 1.3.6 จากนั้นใหดับเบ้ลิ คลิกไอคอน Unity Hub Setup ท่ีไดดาวนโหลดมาเพอื่ ติดตง้ั โปรแกรม ภาพประกอบที่ 1.10 ไอคอนโปรแกรมชว ยตดิ ตง้ั Unity Hub 1.4 การสมัคร Account ของ Unity เพื่อเขา ชา น

11 1.4.1 เมอื่ ติดตั้งแลว ใหเปด หนา ตา ง Unity Hub ข้ึนมาจากนน้ั ใหทาํ การคลิกท่ปี มุ บนขวาและ เลอื กไปที่ Sign in ภาพประกอบที่ 1.11 การเขาไปยงั ปุม Sign in เพอื่ สมคั รเขาใชงาน Unity 1.4.2 สามารถใช ID ของ Google และ Facebook สาํ หรับเขา ใชงานได (หมายเลข 2 หรอื จะสมัครสมาชกิ ใหมโ ดยคลิกที่ปมุ Create one (หมายเลข 1 ภาพประกอบที่ 1.12 การคลิกปมุ create one เพ่ือสรา ง ID ของ Unity ใหม หรือสามารถใช ID ของ Google และ Facebook เพ่ือเขา ใชงานได 1.4.3 ทีห่ นาตา ง Create a Unity ID จะตองใสขอมลู ตาง ๆ ดังตอไปน้ี 1.4.3.1 E-mail สําหรับยนื ยันตัวตน 1.4.3.2 Password หรอื รหสั ผานโดยมเี งอ่ื นไขการตงั้ รหัสผาน ดงั ตอไปน้ี - ตอ งมอี ยางนอย 8 ตวั อักษร - สามารถมตี ัวอักษรไดม ากท่ีสุด 72 ตวั อกั ษร - ตองมตี ัวอักษรภาษาองั กฤษเปน ตัวพมิ พใหญอยางนอย 1 ตัวอักษร

12 - ตองมตี ัวอักษรภาษาองั กฤษเปนตวั พิมพเลก็ อยางนอ ย 1 ตวั อกั ษร - ตอั งมีตวั เลขอาระบิกอยางนอย 1 ตวั อกั ษร 1.4.3.3 Username สําหรับใชในการ Log-in เพ่ือเขาไปถามตอบปญหาตา ง ๆ ภายใน Web Board Community ของ Unity 1.4.3.4 Full Name จะเปนชอื่ จรงิ ท่ใี ชแสดงภายใน Web Board Community ของ Unity 1.4.3.5 คลิก I Agree to the Unity (ควรอานขอตกลงการใชงาน 1.4.3.6 คลกิ I understand that by checking this box, I am agreeing to receive promotional materials from Unity ซ่ึงจะเปนการตอบตกลงการรับขอ มลู ขา วสารตาง ๆ จาก Unity (จะคลิกหรือไมก ็ได 1.4.3.7 คลิกท่ปี มุ Create a Unity ID ภาพประกอบที่ 1.13 การกรอกขอมลู ในชองตาง ๆ สาํ หรับการสมัคร Unity ID 1.4.4 จากนัน้ จะข้ึนหนาตา ง Confirm your Email ดงั ภาพประกอบท่ี 1.14 ภาพประกอบท่ี 1.14 หนาตา ง Confirm you Email 1.4.5 ไปท่ีกลองจดหมายภายใน Email ท่ใี ชสมคั รคลิกท่ีอีเมลของ Unity และเลอื ก Link

13 ภายใน Email น้ันเพ่ือยืนยนั ตัวตน ภาพประกอบท่ี 1.15 การคลิกที่ link ภายในกลองจดหมายของ Email เพื่อยืนยนั ตัวตน 1.4.5.1 กลบั ไปทีห่ นา ตาง Unity Hub จากนนั้ จงึ ใช Email และ Password เขาใชง าน 1.5 การติดตัง้ โปรแกรม Unity 1.5.1 ท่หี นาตาง Unity Hub ใหคลิกเลอื กท่ปี ุม Install จากน้ันจงึ เลือกปุม Add หากที่ เครือ่ งมโี ปรแกรม Unity อยูแลวสามารถคลิกท่ีปุม Locate เพอ่ื ทําการหาไฟล Unity.exe ในการใชง าน โปรแกรมเวอรช ันเกาได ภาพประกอบที่ 1.16 การเลือกปมุ Install และปมุ Add เพื่อติดตง้ั โปรแกรมเวอรชนั ใหม 1.5.2 จากน้ันใหท ําการเลอื ก Version ทต่ี องการจะติดตัง้ และคลิกทีป่ มุ NEXT

14 ภาพประกอบที่ 1.17 หนา ตา งสําหรบั เลือก Version ของ Unity กอ นจะทําการคลิกทป่ี ุม NEXT 1.5.3 ทําการเลือก Add Module ทตี่ อ งการจะ Publish โปรแกรมออกไปตดิ ต้ังกับอปุ กรณ ท่ตี อ งการ (ในที่น้ใี หเลอื ก Android Build Support และ iOS Build Support) แลว คลิกท่ีปมุ DONE ภาพประกอบท่ี 1.18 การเพิ่ม Module ที่ตองการจะ Publish โปรแกรมไปติดตงั้ ยังอุปกรณท ีต่ องการ 1.5.4 Unity Hub จะทําการ Download และตดิ ตั้งโปรแกรม Unity Editor ตามเวอรช นั ท่ี ไดเลือกใช ภาพประกอบท่ี 1.19 Unity Hub กาํ ลงั ทาํ การ Download และตดิ ตั้งโปรแกรม Unity Editor

15 บทท่ี 2 พ้นื ฐานการใชงานโปรแกรม Unity 2.1 การสรางโปรเจคใหม 2.1.1 ทห่ี นาตา ง Unity Hub ใหค ลิกเลอื กท่ีปุม Projects จากน้ันคลกิ ท่ปี มุ NEWดัง ภาพประกอบท่ี 2.1 ภาพประกอบท่ี 2.1 การสรางโปรเจคใหมภายใน Unity ซึ่งจะมเี มนูตา งๆ ดังตอ ไปน้ี 2.1.2 ทําการเลือกสวนตาง ๆ ดงั ตอไปนี้ 2.1.2.1 เลอื กชนดิ ของโปรเจค เปน 3D 2.1.2.2 ตัง้ ชอ่ื โปรเจค “AR_Project” 2.1.2.3 เลอื กตาํ แหนงทจี่ ะทาํ การสรา ง Project 2.1.2.4 คลกิ ท่ีปุม Create เพ่ือทาํ การสรา งโปรเจค ภาพประกอบท่ี 2.2 ตัวเลือกตา ง ๆ ในการสรา ง Project

16 2.1.2.5 เมือ่ คลิกทป่ี มุ Create Project โปรแกรมจะทาํ การประมวลผลเพ่ือทําการ Import Asset Packages ตาง ๆ เขา ไปภายในโปรเจคและสรางโปรเจคใหมขึน้ มา ภาพประกอบท่ี 2.3 หนา ตางขณะโปรแกรมทําการประมวลผลเพื่อ Import Asset Packages 2.2 การตง้ั คา Platform สาํ หรบั Publish เกมออกมาใชงาน 2.2.1 ไปทเี่ มนู File 2.2.2 เลือกไปทค่ี าํ ส่งั Build Settings 2.2.3 คลกิ เลอื กทีป่ ุม Add Open Scenes เพอื่ เอาซีนปจ จบุ ันมาทาํ การสรา งเปน โปรแกรม 2.2.4 จากนน้ั ใหค ลิกเลือกที่ android (หรือ iOS) 2.2.5 คลกิ ทป่ี มุ Switch Platform ภาพประกอบที่ 2.4 การเปล่ียน Platform สําหรับการพัฒนาโปรแกรมภายใน Unity 2.2.6 จากนัน้ ใหทาํ การคลกิ ทีป่ ุม Build แลวเลือกตําแหนง ทต่ี องการจะใชง านโปรแกรม 2.2.7 หากมอื ถอื ทใี่ ชเ ปน ระบบปฏบิ ตั กิ าร Android

17 2.2.7.1 ใหเลือกที่ปมุ Android 2.2.7.2 คลิกเลือกปุม Switch Platform 2.2.7.3 คลกิ เลอื กทีป่ ุม Player Settings… 2.2.7.4 ทหี่ นา ตาง Player Settings ในเมนู XR Settings ใหเ ลือกเปด ใชงาน Vuforia Augmented Reality Supported* ภาพประกอบที่ 2.5 การเปดใชง าน Vuforia ในระบบปฏบิ ัตกิ าร Android 2.3 สวนติดตอ ผูใช (User Interface) ตา ง ๆ ของโปรแกรม Unity ภาพประกอบท่ี 2.6 สวนติดตอผูใช (User Interface) ตาง ๆ ภายในโปรแกรม Unity

18 2.3.1 Menubar เปน สว นท่ีใชส าํ หรับเปดใชงานเมนูตางๆ ดังภาพประกอบท่ี 9.8 2.3.2 Toolbar เปน สว นทใ่ี ชสาํ หรบั เก็บเคร่ืองมือตางๆ ดังตอ ไปนี้ 2.3.2.1 Transform Tools เปน เครือ่ งมือสาํ หรบั จดั การวตั ถุและมุมกลองเชน ภาพประกอบท่ี 2.7 เครื่องมือ Transform Tool 1) Camera Pan ขยับมุมกลองขนึ้ ลงซาย-ขวา ในหนาตา ง Scene View (ปมุ ลดั คือกด เมาสกลางลง 2) Move ใชในการขยับวัตถุ (ปุมลดั คือกด W) 3) Rotate ใชใ นการหมนุ วตั ถุ (ปุมลัดคือ E) 4) Scale ใชใ นการ (ปุม ลดั คือ R 5) Select Object ใช เปด -ปด การเลือกวตั ถโุ ดยการลาก Selection ครอบท้งั ช้นิ หรอื แคบางสว น 2.3.2.2 Transform Gizmo Toggles ใชส าํ หรบั ปรบั แกนหมุน ของวตั ถุ 2.3.2.3 Cloud Button เปนปมุ สาํ หรบั เปด ใชงานบรกิ าร Cloud 2.3.2.4 Layer Drop-down เปนปุมสาํ หรบั ใชเลเยอรเ พ่ือจัดการวัตถุ ภายในซนี 2.3.2.5 Layout Drop-down เปนปุมสําหรบั ปรับการจดั Layout ของโปรแกรมใหตรงตามความตองการของผใู ช 2.3.3 Scene View เปนหนาตางสําหรับจดั การวัตถุภายในเกม 2.3.4 Hierarchy Window เปนหนาตางสําหรบั เลอื กวตั ถุหรอื Content ตา ง ๆ ภายในซีน 2.3.5 Project Window เปน หนาตางสาํ หรับเพิ่มหรือลบ Content ตา ง ๆ ภายในโปรเจค เชน วัตถุ 3 มติ ิ เสียง รปู ภาพ เปน ตน 2.3.6 Inspector เปนหนา ตา งสําหรบั ปรบั คา ตา ง ๆ ของวัตถุภายในซีน เชน ตําแหนง ของ วัตถุ 3 มติ ิ ความสวา งของแสง เปน ตน

19 บทท่ี 3 การใชงาน Vuforia สาํ หรบั สรา ง Augmented Reality 3.1 เกี่ยวกับ Vuforia Vuforia Engine เปน แพลตฟอรมซอฟตแวรสาํ หรับการสรา งแอพ Augmented Reality: AR ซ่งึ นักพฒั นาสามารถเพิ่มฟง กชนั การมองเห็นของคอมพิวเตอรขนั้ สงู ใหกบั แอพพลเิ คชน่ั ใด ๆ ทําให สามารถจดจาํ รูปภาพและวตั ถแุ ละโตตอบกับชองวางในโลกแหง ความเปน จรงิ ภาพประกอบที่ 3.1 การใช Vuforia บนวัตถจุ รงิ (ซาย เพื่อทําการแสดงผลวตั ถสุ ามมิติซอนทับ (ขวา 3.2 จุดเดน ในการ Tracking ของโปรแกรม Vuforia 3.2.1 การ Tracking รปู ภาพ ภาพประกอบท่ี 3.2 การ Tracking รปู ภาพและวางวตั ถสุ ามมิตลิ งไปบนหนาจอ

20 3.2.2 การ Tracking วัตถุ ภาพประกอบท่ี 3.3 การ Tracking วตั ถแุ ลววางโมเดลสามมติ ทิ ับลงไปอีกที 3.2.3 การ Tracking ระนาบพ้ืน ภาพประกอบท่ี 3.4 การวางวตั ถสุ ามมติ ลิ งไปบนการ Tracking ระนาบของพน้ื 3.3 การลงทะเบียนเพ่อื เขาใชงาน Vuforia 3.3.1 เปด Web Browser แลว เขา ไปยัง developer.vuforia.com/vui/auth/register เพอ่ื ทําการลงทะเบยี น กรอกขอมูลใหครบทุกขอและคลิกที่ปมุ Create Account และยืนยนั ตัวตนที่กลอ ง ขอความในอเี มล

21 ภาพประกอบท่ี 3.5 การลงทะเบยี นนกั พฒั นาของ Vuforia 3.4 การใช Development Key 3.4.1 เมื่อลงทะเบียนเสร็จสิ้นแลว ให Log-in เขา ใชง าน 3.4.2 คลิกเลือกทป่ี ุม Get Development Key เพอ่ื ทําการสรางคยี สาํ หรบั นักพัฒนาของ Vuforia ภายใน Project ของตนเอง (ควรใช 1 Key ตอ 1 Project ภาพประกอบท่ี 3.6 การสรางคียส ําหรับนกั พัฒนา 3.4.3 ทําการใส License Name คลกิ เลือกขอตกลงการใชง านและคลกิ ปุม Confirm ภาพประกอบท่ี 3.7 การตง้ั ช่ือ License Name และยืนยนั การใชง าน

22 3.4.4 เมือ่ Vuforia ทําการสราง License สาํ หรับใชงานมาแลว จะข้นึ ชอ่ื ท่ตี ัง้ ขึ้นมาในสว น ของ License Manager ภาพประกอบที่ 3.8 การเลอื ก License ทไี่ ดส รา งขึน้ มา 3.4.5 ทําการคลิกที่ License Key เพ่ือคัดลอกคยี ลงไปในหนว ยความจาํ ภาพประกอบท่ี 3.9 การคัดลอก License เพ่ือเขา ใชง าน Vuforia ใน Unity 3.5 การสรางภาพ Marker สาํ หรบั ใชงาน AR 3.5.1 คลกิ เลือกที่ปมุ Target Manager 3.5.2 คลกิ เลอื กที่ Add Database และทาํ การต้ังช่ือ เลือกชนดิ เปน Device ภาพประกอบที่ 3.10 การสราง Database ของ Marker สําหรับใชง าน AR

23 3.5.3 คลกิ เลือกปมุ Add Target 3.5.4 ทําการตั้งคา Marker ตาง ๆ ดงั ตอ ไปนี้ 1) เลือกชนดิ ของ Marker เปน Single Image 2) เลอื กภาพทตี่ องการใชเปน Marker 3) เลอื ก Scale ของวตั ถุสามมิติทีต่ อ งการจะใหแสดงผล 4) ตงั้ ชื่อ Marker 5) คลิกทป่ี ุม Add ภาพประกอบที่ 3.11 การสรา ง Marker สําหรับนํามาใชง านภายในโปรแกรม Vuforia 3.5.5 ทาํ การเลือก Marker ท่ตี อ งการแลวคลิกท่ีปุม Download Database ภาพประกอบท่ี 3.12 การคลิกเลอื ก Marker ทีต่ องการและคลิกเลือกทป่ี ุม Download Database 3.5.6 ทาํ การเลอื ก Unity Editor แลวคลิกที่ปุม Download

24 ภาพประกอบท่ี 3.13 การคลิกตวั เลือกในการดาวนโ หลด Marker ลง Unity 3.5.7 ทหี่ นาตาง Unity Editor ทําการลาก Database ท่ีไดลงไปยังหนา ตา ง Project จากนน้ั ใหคลกิ ปุม Import ภาพประกอบที่ 3.14 การนาํ เขาขอมลู Database ของ Vuforia ไปใน Unity Editor 3.6 การทดสอบใชงาน AR ใน Unity 3.6.1 ทําการลบ Vulkan โดยไปท่ี 1) คลกิ ท่ีเมนู File 2) Build Settings 3) คลิก Android 4) คลิก Player Settings… 5) ท่ีหนา ตาง Project Settings คลิกเลอื ก Player 6) เลือก Vulkan 7) คลิกปุม –

25 ภาพประกอบที่ 3.15 การลบ Vulkan 3.6.2 ที่หนาตาง Hierarchy คลกิ ขวาเลือก Vuforia Engine -> AR Camera ภาพประกอบที่ 3.16 การ Import AR Camera มาใชภ ายใน Unity Engine 3.6.3 ทาํ การลบ Main Camera ออกไปโดยการคลิกขวาเลอื กคําสง่ั Delete 3.6.4 ที่หนา ตา ง Hierarchy คลกิ เลือก AR Camera ทหี่ นา ตาง Inspector จะมคี ําส่ังตาง ๆ ของ Vuforia ออกมาใหป รบั แตง คา

26 ภาพประกอบที่ 3.17 การปรับแตง คา ของ AR Camera 3.6.5 ทาํ การคลิกปุม Open Vuforia Engine configuration ภาพประกอบที่ 3.18 การเปดใชงาน Vuforia Engine Configuration 3.6.6 ที่ชอ ง App License Key ใหทาํ การ Copy ทส่ี รางข้นึ มาภายในเวบ็ ภาพประกอบที่ 3.19 ชองสําหรับใส License Key ทสี่ รางขึ้นมาบนเวบ็ ไซต 3.6.7 ทําการคลิกขวาท่หี นาตาง Hierarchy เลอื ก Vuforia -> Image

27 ภาพประกอบท่ี 3.20 การใช Image Maker ใน Vuforia 3.6.8 ทําการ Import วตั ถสุ ามมิตขิ ้ึนมาภายในซนี โดยคลิกขวาที่หนาตา ง Hierarchy->3D Object->Cube จากน้นั จึงทําการกดปุม W และคลิกท่ลี ูกศร Gizmo ขยับข้นึ มาใหอยูเ หนอื ภาพ ภาพประกอบที่ 3.21 การสรางวตั ถสุ ามมิตมิ าใชท ดสอบภายในโปรแกรม 3.6.9 ที่หนาตาง Hierarchy คลิกซายคางเอาไวท่ี Cube ลากไปใส ImageTarget ดงั ภาพ ภาพประกอบที่ 3.22 การ Set Parent-Child แกว ตั ถุ ImageTarget และ Cube 3.6.10 กดปมุ Play เพ่ือทําการทดสอบโปรแกรม ดงั ภาพ

28 ภาพประกอบท่ี 3.23 การคลิกทปี่ ุม Play เพ่ือทดสอบโปรแกรม

29 บทที่ 4 การสรา ง Application Watch Selection 4.1 ทําการออกแบบการใชงานโปรแกรม ทดสอบวางแผนการใชง านโปรแกรม ดงั ตอไปน้ี 1) โดยจะใช Marker ตดิ ทีข่ อมือ 2) ใชกลอ งสอ งมาเพ่ือแสดงผลนาฬกิ า 3) สามารถเลอื กนาฬิกาไดโดยการคลิกทป่ี ุมบนหนา จอ ภาพประกอบท่ี 4.1 โปรแกรมทีอ่ อกแบบเพ่ือใชง าน 4.2 การสรางไฟล GameManager.cs 4.2.1 ท่หี นาตาง Project ใหค ลิกขวาเลอื กคําสั่ง Create->C# Script แลวตัง้ ช่อื ไฟลว า GameManager.cs 4.2.2 ทาํ การ Double Click ไฟลนี้เพ่ือทาํ การเปดกับโปรแกรม Visual Studio 4.2.3 ทาํ การแกไขโปรแกรม ดงั ภาพ

30 ภาพประกอบที่ 4.2 การแกไ ขไฟล GameManager.cs 4.2.4 ที่หนา ตาง Hierarchy คลกิ ขวาเลอื ก Create Empty ต้ังช่อื GameObject โดยการ กดปุม F2 และต้งั ชอ่ื วา GameManager ภาพประกอบท่ี 4.3 การสรา งวตั ถุ GameManager สําหรบั ใชกับสครปิ GameManager.cs 4.2.5 ทหี่ นาตา ง Hierarchy คลกิ เลือก GameManager จับไฟล GameManger.cs ใน หนา ตาง Project ลากไปใสช องวางในหนาตาง Inspector ภาพประกอบที่ 4.4 การลากสคริป GameManager.cs ไปใส Inspector ของ GameManager 4.3 ทาํ การสรา งนาฬิกามา 2 เรือน 4.3.1 คลกิ ท่วี ตั ถุท่เี ปนนาฬิกา 4.3.2 กดปุม Ctrl + D เพ่ือคัดลอกวตั ถุ 4.3.3 คลกิ ขวาที่หนา ตาง Project เลือกคําสงั่ Create->Material แลว จับใสนาฬกิ าอันใหมที่ คัดลอกมา

31 4.4 ทาํ การสรา ง UI 4.4.1 ทหี่ นา ตา ง Hierarchy คลกิ ขวาเลอื กคําสั่ง UI->Canvas 4.4.2 คลกิ เลือกท่ี Canvas คลกิ ขวาเลือก UI->Button 4.4.3 คลิกเลือกที่ Button ท่ีสรางข้ึนมาใหมแลวกดปุม Ctrl+D เพื่อคัดลอกปุมใหม จดั วางใน ตําแหนง ท่เี หมาะสม 4.5 ทําการแกส คริป GameManager.cs 4.5.1 เพ่ิม Function ตาง ๆ ดังตอไปน้ี ภาพประกอบท่ี 4.5 เพิม่ Script สําหรบั เรยี กใชงานเวลาคลกิ ปมุ ตา ง ๆ 4.6 เพ่มิ นาฬิกาลงไปใน GameManager 4.6.1 คลิกเลือก GameManager ในหนาตาง Hierarchy 4.6.2 คลกิ ซายคางเอาไวท ว่ี ัตถสุ ามมติ ทิ ี่เปน นาฬกิ าเรือนท่ี 1 ลากไปใสพาราเมเตอร Watch1 ในหนา ตา ง Inspector 4.6.3 คลิกซายคางเอาไวทว่ี ัตถสุ ามมติ ิท่ีเปน นาฬกิ าเรือนที่ 2 ลากไปใสพาราเมเตอร

32 Watch2 ในหนาตา ง Inspector ภาพประกอบท่ี 4.6 การเพ่ิมวัตถสุ ามมติ สิ ําหรบั ใชอางอิงการแสดงผลลงไปในสครปิ GameManager 4.7 การกาํ หนดใหป มุ มี Event ตา ง ๆ 4.7.1 ใหทําการคลิกทป่ี ุมทต่ี องการเพิ่ม Event 4.7.2 ท่หี นาตาง Inspector คลิกเครื่องหมาย + 4.7.3 คลกิ ทีเ่ ครื่องหมาย . หรือลาก GameManager.cs มาใส 4.7.4 เลือก Event ของ Function ทีไ่ ดเขยี นลงไปในขอ 4.5.1 ใหถ กู ตองกบั ปุมทต่ี องการจะ ใช ภาพประกอบท่ี 4.7 การใส Event ใหกับปุม

33 ประวตั ิยอ วทิ ยากร

34 ประวัติยอวิทยากร ช่อื นามสกุล นายปริวฒั น พสิ ษิ ฐพงศ E-Mail [email protected] จงั หวัด และประเทศท่เี กิด อําเภอเมืองฯ จังหวัดมหาสารคาม ประวตั กิ ารศึกษา พ.ศ. 2535 สาํ เรจ็ การศกึ ษาระดับชัน้ ประถม โรงเรยี น อนุบาลมหาสารคาม พ.ศ. 2538 สําเร็จการศึกษาระดบั ชนั้ มธั ยมตน โรงเรียน สารคามวิทยาคม พ.ศ. 2541 สําเรจ็ การศึกษาระดับช้นั มัธยมปลาย โรงเรียนสารคามวิทยาคม พ.ศ. 2544 สําเร็จการศกึ ษาระดับชัน้ มัธยมปลาย โรงเรยี นสารคามวทิ ยาคม พ.ศ. 2549 วทิ ยาศาสตรบัณฑติ สาขาวิทยาการคอมพวิ เตอร มหาวิทยาลัยมหาสารคาม พ.ศ. 2555 วทิ ยาศาสตรมหาบณั ฑติ สาขาเทคโนโลยีสารสนเทศ มหาวทิ ยาลัยมหาสารคาม ตําแหนง สถานท่ีทํางาน อาจารยป ระจาํ สาขาวิชาส่อื นฤมติ หลกั สตู รคอมพวิ เตอรแ อนิเมชันและเกม คณะวิทยาการสารสนเทศ มหาวิทยาลัยมหาสารคาม ทีอ่ ยูท่ีสามารถติดตอได สาขาส่อื นฤมิต คณะวิทยาการสารสนเทศ มหาวิทยาลัยมหาสารคาม ต.ขามเรยี ง อ.กนั ทรวิชยั จ.มหาสารคาม 44150 ผลงานงานวิจัยท่ีผา นมา ปรวิ ัฒน พิสิษฐพงศ, ดร.มนัสวี แกนอาํ พรพันธ. การพฒั นาระบบจัดเก็บขอ มลู ทางการเกษตร เพอ่ื เผยแพรด ว ยเทคโนโลยเี สรมิ เสมือนจรงิ . การประชมุ วชิ าการ งานวจิ ัย และงานพฒั นาเชิงประยกุ ต ครั้งท่ี 3; 5 พฤษภาคม 2554; กรุงเทพ, ประเทศไทย. หนา . 6

35 ปริวัฒน พิสษิ ฐพงศ, ดร.มนสั วี แกน อําพรพันธ. โปรแกรมเสรมิ เพื่อเพ่ิมประสทิ ธิภาพในการใช งานเทคโนโลยีเสรมิ เสมือนจริง. การประชุมวชิ าการทางคอมพิวเตอรและเทคโนโลยีสารสนเทศ คร้งั ที่ 9; 13 กุมภาพันธ 2555; เชยี งใหม, ประเทศไทย. หนา . 124-129 ปริวฒั น พิสิษฐพงศ. การใชเทคนคิ สแกนวตั ถุสามมิติและการทาํ พืน้ ผวิ สาํ หรับเกมในการ แสดงผลรายละเอยี ดบนพน้ื ผิวของพุทธศลิ ปอีสาน:กรณีศึกษาสมิ -และฮูบแตม. คณะวทิ ยาการ สารสนเทศ มหาวทิ ยาลัยมหาสารคาม; 2558 ปริวฒั น พิสษิ ฐพงศ. ระบบแสดงโลกเสมอื นจริงเก่ียวกับพุทธศลิ ปอ ีสานแบบ 3 มิตบิ นอุปกรณ เคล่ือนท.ี่ ทนุ งบประมาณแผนดนิ ประจาํ ป 2560. วิจยั แหงชาติ