Virtual RealityWebXR

WebXR กับ A-frame ตอนที่ 3 การเขียน Javascript ควบคุมการ Spawn วัตถุในเกม VR

ซีรีย์การพัฒนาเกม VR ผ่าน WebXR ด้วย A-Frame กับการเขียน Javascript ในการทำ Spawn วัตถุในเกมให้ปรากฏออกมา

ซีรีย์การพัฒนาเกม VR ผ่าน WebXR ด้วย A-Frame กับการเขียน Javascript ในการทำ Spawn วัตถุในเกมให้ปรากฏออกมา

ศึกษาบทเรียนก่อนหน้าได้ที่:

จากบทเรียนก่อนเราสามารถทดสอบ ผ่าน WebXR API Emulator ได้ตามตัวอย่าง

ทีนี้เราจะทำ Game Object ที่เป็นอุปสรรคให้สุ่มวิ่งเข้าหาผู้เล่น โดยแบ่งออกเป็น 3 เลน คือ ซ้าย กลาง ขวา (left-center-right) ผ่านการ Spawn เจ้า A-Frame จำเป็นต้องเขียนควบคุมด้วย Javascript ดังนั้นสิ่งที่เราจะสร้างเพิ่มใน index.html คือ

เพิ่มเข้าไปใน <a-scene> ส่วนของ  <a-entity id=”tree-container”>

เราจะมี id คือ monster-left,monster-center และ monster-right โดยมี animation บังคับคือ position เดิมของตัวกลาง 0, 1.3, -7 จะมีการ animation แบบ linear วิ่งเป็นเชิงเส้นตรง ความเร็ว 5 ,000 หรือ 5 วินาที ไป 0,1.3,3 นั่นคือแกน z จาก -7 ไกลตัวเข้าหากล้องที่ระยะ 3 แล้วทำให้เป็น loop วนไปเรื่อยๆ ทั้งสามตัวต่างแค่ position ของแกน x ตัวเดียว

เขียนโปรแกรมควบคุมหน่อยล่ะกันให้เราสร้างไฟล์ game.js ขึ้นมาเป็น Javascript แทรกใน <head> ของ index.html ดังนี้

เข้าไปแก้ไขไฟล์ game.js

ประกาศตัวแปรรับค่าจำนวน Monster ที่เราจะสร้างชื่อ numMonster เริ่มต้นเป็น 0   รับ id ของ <a-entity> คือ id treeContainer จาก index.html  เก็บลงตัวแปรชื่อเดียวกัน

หลังจากนั้นประกาศตัวแปรสำหรับไป getElementById ของ Javascript ชื่อ monsterLeft, monsterCenter และ monsterRight หลังจากนั้นสร้างฟังก์ชัน initMonster() ขึ้นมาเริ่มต้นรับค่าเวลาเริ่มโหลดหน้าเว็บไซต์

monsterLeft,Center,Right ก็ไป document.getElementById ตามชื่อใน index.html ได้เลยเช่นกัน treeContainer ด้วย สร้าง templates ขึ้นมาเก็บ Array ของตำแหน่ง monsterLeft,monsterCenter และ monsterRight

ประกาศฟังก์ชัน removeGameObject() ขึ้นมาเพื่อเคลียร์ค่าของ Monster แต่ละตัว ดังนั้นถ้าเสร็จตรงนี้เราจะไปสร้าง ฟังก์ชันใหม่ชื่อ removeGameObject()

ทำหน้าที่ removeChild ค่าที่รับมาคือตัวแปร obj ที่รับมาจาก initMonster()

สร้างฟังก์ชันขึ้นมา 2 ตัวคือ addMonster() ไว้รับค่า 0,1,2 (0 คือซ้าย , 1 คือ กลาง, 2 คือขวา) บน <a-scene> และ addMonsterTo() คือตำแหน่งที่อ้างอิงตัวแปร template ที่เราประกาศไว้ใน initMonster()

addMonster() จะทำหน้าที่ cloneNode(true) คือ Clone ตัว node Element ให้ปรากฏขึ้น

สุดท้ายใส่คำสั่ง onload เริ่มต้น

ดังนั้นไฟล์ game.js จะเป็นดังนี้:

ทดสอบโดยการ พิมพ์ บน console ของ  Browser ตรงๆไปเลยว่า addMonsterTo(1) หรือ (0) หรือ (2) เพื่อทดสอบ

เรียบร้อยครับ ตัวอย่างของการทดสอบ Spawn ตัว GameObject ใน WebXR ง่ายๆ รอบทที่ 4 ได้เลย!

Tags

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน