[How To] ສ້າງແອັບຈໍາລອງວັດຖຸດ້ວຍ ARKit ສໍາລັບ iOS

ກ່ອນອື່ນມາຮູ້ຈັກກັບ AR ກັນກ່ອນ

AR ຫຼື Augmented Reality ແມ່ນເຕັກໂນໂລຢີການນໍາເອົາຮູບແບບສາມມິຕິເຂົ້າສູ່ໂລກແທ້ຜ່ານກ້ອງ ເຊີ່ງໄດ້ຈາກການເອົາວັດຖຸມາຊ້ອນໆເປັນຮູບດຽວຈົນສາມາດເບີ່ງແບບສາມມິຕິຜ່ານກ້ອງໄດ້.

ທີ່ຈິງ AR ບໍ່ແມ່ນເລື່ອງໃຫມ່ ເລີ່ມມີການພັດທະນາມາແຕ່ປີ 2010 ແຕ່ຈຸດທີ່ດັງລະເບີດແຕກຈົນທຸກຄົນຮູ້ຈັກກັນທົ່ວບ້ານທົ່ວເມືອງແມ່ນຊ່ວງກາງປີ 2016 ຊ່ວງທີ່ Pokémon Go ປ່ອຍໃຫ້ໂຫຼດ ເຊິ່ງໃຊ້ AR ມາເປັນຈຸດຫຼັກຂອງເກມ ຈຸດຂາຍແມ່ນສາມາດເອົາໂຕລະຄອນໃນເກມອອກມາສະຖານທີ່ແທ້ໄດ້ຕອນນັ້ນທຸກຄົນພາກັນຕື່ນເຕັ້ນກັບເທັກໂນໂລຊີ້ໃຫມ່ຈົນຍອດດາວໂຫຼດຮອດ 500 ລ້ານເທື່ອໃນເດືອນດຽວ.

ແລ້ວມື້ນີ້ ເຮົາຊິມາລອງສ້າງແອັບທີ່ເອົາວັດຖຸສາມມິຕິ ມາເຂົ້າໃນໂລກແທ້ຜ່ານ AR ນໍາກັນ.

ກ່ອນອື່ນ ທີ່ເຮົາຕ້ອງກຽມແມ່ນ:

• MacBook ຫຼື ຄອມລຸ້ນໃດກະໄດ້ທີ່ໃຊ້ macOS
• Xcode 11 ຂື້ນໄປ ແລະ Reality Composer (ສ່ວນເສີມໃນ Xcode)
• ໂມເດວ 3D ທະຫານລາວລ້ານຊ້າງ ແລະ Stormtrooper ໄດ້ຢູ່ນິ ຫຼື ໃຜສົນໃຈຢາກໃຊ້ໂມເດວໂຕອື່ນແມ່ນໄປໂຫຼດທາງໄຟລ໌ USDZ ມາເກັບໄວ້ໃນ https://developer.apple.com/augmented-reality/quick-look/
• ທີ່ຂາດບໍ່ໄດ້ແມ່ນ iPhone

ຫຼັງຈາກມີຄົບໝົດແລ້ວເຮົາມາລົງມືກັນເລີຍ

1. ກ່ອນອື່ນ ແມ່ນເປີດ Xcode ແລ້ວເປີດ Reality Composer ຂື້ນມາເພື່ອສ້າງ ສາກສາມມິຕິສໍາລັບ Export ເອົາໄປໃຊ້ໃນແອັບ

1

2. ຈະໄດ້ໜ້າຕາປະມານນີ້

2

ຫຼັງຈາກນັ້ນ ໃຫ້ເລືອກ Horizontal ຖ້າຕ້ອງການໃຫ້ວັດຖຸ 3D ຂອງເຮົາອ້າງອີງຈາກພື້ນທີ່ເປັນລວງນອນ ໃຫ້ເລືອກ Vertical ສໍາລັບຢາກໃຫ້ວັດຖຸອີງຈາກຝາທີ່ເປັນລວງຕັ້ງ, (ໃນກໍລະນີນີ້ຊິເລືອກແບບ Horizontal, ສຳລັບແລ້ວໝາຍຖືກບ່ອນ Template Content)

3. ເມື່ອເຂົ້າມາແລ້ວ ໃຫ້ກົດປຸ່ມ Objects ທາງເທິງແຖວກາງໆ ແລ້ວໃຫ້ເລືອກ Import ເພື່ອໄປເອີ້ນໃຊ້ File 3D ທີ່ເຮົາໂຫຼດໄວ້ແລ້ວທາງເທິງ

3

4. ຫຼັງຈາກ Import ທັງສອງໄຟລ໌ທີ່ໂຫຼດມາທາງເທິງແລ້ວຈະໄດ້ປະມານນີ້

4

ຕອນນີ້ເຮົາຊິໄດ້ Model ທະຫານລາວລ້ານຊ້າງໃນສະຕະວັດທີ 14 ແລະ ທະຫານ Stormtrooper ຈາກຈັກກະວານທີ່ໄກໂພ້ນມາຢືນຄຽງຂ້າງກັນ,

ຈະສັງເກດວ່າທາງດ້ານຂວາຈະມີເມນູໃຫ້ ປ່ຽນວ່າຊິໃຫ້ ວັດຖຸອີງຈາກພື້ນ ຫຼື ຊິອີງຈາກຝາ ແລະ ຍັງສາມາດປ່ຽນພື້ນຜິວຂອງວັດຖຸເຮົາໄດ້ ບໍ່ວ່າຊິເປັນ ແບບຄອນກີດ ເຫຼັກ ຫຼື ພາສຕິກ. ແລະ ຖ້າກົດເມົ້າໃສ່ໂຕໂມເດວ ກໍຈະສາມາດປັບຂະໜາດໄດ້ ດຽວຊິປັບໃຫ້ທະຫານລ້າງຊ້າງສູງຊໍ່າ Stormtrooper

5. ຫຼັງຈາກນັ້ນໃຫ້ກົດປຸ່ມ Scenes ທາງເທິງຂາວ ເພື່ອຕັ້ງຄ່າສາກສໍາລັບແອັບຂື້ນມາ ໃນເຄສນີ້ຈະຕັ້ງຊື່ວ່າ Scene01

5

6. ເຮົາຊິມາເພີ່ມລູກຫຼີ້ນໃຫ້ສາກ ຂອງເຮົາມີຊີວິດຊີວາຂື້ນ ດ້ວຍການເພີ່ມການຕອບສະໜອງ ແລະ Animation ຜ່ານປຸ່ມ Behaviors ທາງເທິງຂວາ

6

7. ກົດປຸ່ມທາງຂວາຂອງ ເມນູ Behaviors ແລ້ວເລືອກ Custom ໂຕລຸ່ມສຸດ ສ້າງເອັບເຟັກຕາມໃຈແບບທີ່ເຮົາຕ້ອງການ (ຫຼື ຊິເລືອກເມນູອື່ນທີ່ Apple ເຮັດສໍາເລັດຮູບມາໃຫ້ແລ້ວກໍໄດ້ ລອງຫຼີ້ນຕາມຄວາມມັກ)

7

8. ຈະສັງເກດວ່າເມື່ອກົດແລ້ວຈະມີສອງເມນູ ຄື Trigger ແລະ Action Sequence

8

ໜ້າທີ່ຂອງ Trigger ແມ່ນໂຕຮັບຂໍ້ມູນເຂົ້າມາເພື່ອໃຫ້ສິ່ງທີ່ເຮົາຕັ້ງຄ່າໃນ Action Sequence ເຮັດວຽກ

9. ກົດໃສ່ Trigger ເພື່ອເພີ່ມໂຕຮັບຂໍ້ມູນແລະ ເພີ່ມ Action Sequence ຕາມຮູບ

ໃນຮູບຈະເຫັນວ່າ ບ່ອນ Trigger ເຮົາເລືອກຮູບແບບ Tab ແລະ Action Sequence ເລືອກ Spin

ຫຼັກການຂອງແມ່ນກໍຈະເປັນເມື່ອມີການກົດ (Tab) ວັດຖຸ (Affected Objects) ທີ່ເຮົາເລືອກໄວ້

Action Sequence ຈະເຮັດວຽກໂດຍການໝຸນ (Spin) ວັດຖຸ (Affected Objects) ທີ່ເຮົາເລືອກໄວ້ອີກເຊັ່ນກັນ, ເຊີ່ງຖ້າເຮົາເອົາໄປເຂົ້າໃນແອັບ ກໍຈະກາຍເປັນວ່າຫຼັງຈາກວັດຖຸສາມມິຕິຂອງເຮົາ ມີການສະແດງຜົນເທິງໜ້າຈໍໂທລະສັບແລ້ວ ເວລາໄປສໍາຜັດ ກັບວັດຖຸ ມັນກໍຈະໝຸນນັ້ນເອງ.

ຈາກນັ້ນໃຫ້ Save (cmd+s) ໄວ້ບ່ອນໃດບ່ອນໜື່ງເປັນໄຟລ໌ .rcproject ເພື່ອຊິນໍາໄປເຂົ້າໃນ Xcode ເພື່ອສ້າງແອັບຕໍ່ໄປ

10. ມາຮອດນີ້ເຮົາຈະເປີດ Xcode ຂື້ນມາ ເພື່ອສ້າງໂປຣເຈັກໃຫມ່ ຕາມຮູບ

ເລືອກ Augmented Reality App

ຊື່ໂປຣເຈັກ ແລະ ໄອດີຕາມໃຈ ແຕ່ຕ້ອງເລືອກພາສາ swift, content tect ແມ່ນ Reality kit, user interface ແມ່ນ storyboard

ໜ້າຕາໂປຣເຈັກເມື່ອສ້າງສໍາເລັດ

ຈາກນັ້ນໃຫ້ລາກໄຟລ໌ 3D ທີ່ເຮົາບັນທຶກຈາກ Reality Composer ກີ້ນີ້ມາໃສ່ໃນ Folder ໂປເຈັກ ໃນນີ້ຜູ້ຂຽນຕັ້ງຊື່ໄຟລ໌ວ່າ Lanxangtrooper

ລາກໄຟລ໌ມາໃສ່ Folder ໂປຣເຈັກຂອງເຮົາ

ຈາກນັ້ນໃຫ້ປ່ຽນ code ຕາມວົງມົນສີສົ້ມ

ຈະສັງເກດວ່າ

let soldier = try! Lanxangtrooper.loadScene01();

soldier ແມ່ນຊື່ໂຕປ່ຽນທີ່ເຮົາປະກາດມາເພື່ອເກັບໄຟລ໌ 3D ຂອງເຮົາໄວ້

try! Lanxangtrooper.loadScene01();

ແມ່ນໃຫ້ໄຟລ໌ Lanxangtrooper (ໄຟລ໌ 3D ທີ່ເຮົາດຶງມາໃສ່ກີ້ນີ້) ໄປໂຫຼດສາກ ທີ່ຊື່ວ່າ Scene01 ມາໂດຍບໍ່ຕ້ອງ catch error

ແລະ ຄໍາສັ່ງ

arView.scene.anchors.append(soldier)

ແມ່ນໃຫ້ layout arview ຂອງແອັບໄປດຶງເອົາຊີນທີ່ເຮົາໂຫຼດມາໃສ່ໂຕປ່ຽນທີ່ຊື່ soldier ກີ້ນີ້ມາສະແດງຜົນ.

ສໍາເລັດ!!!

ລອງ run ໂປແກມເບີ່ງ ຖ້າມັນ error ບ່ອນ signing ແມ່ນໃຫ້ໄປ login apple id ແລ້ວ signing ໃຫ້ຮຽບຮ້ອຍ

ວິດີໂອຕົວຢ່າງ

ສໍາລັບ source code ແມ່ນສາມາດໄປເບີ່ງໄດ້ທີ່ https://github.com/cometdigital/ArkitDemo

ໂດຍ: Xokthilat Oudomdy — Mobile Developer at Comet Digital Agency