การวางแนวของอุปกรณ์และการเคลื่อนไหว

Pete LePage

เหตุการณ์การเคลื่อนไหวและการวางแนวของอุปกรณ์ช่วยให้สามารถเข้าถึงฟีเจอร์ในตัว ตัวตรวจวัดความเร่ง เครื่องวัดการหมุน และเข็มทิศในอุปกรณ์เคลื่อนที่

เหตุการณ์เหล่านี้ใช้เพื่อวัตถุประสงค์หลายอย่าง ในเกม เช่น เพื่อควบคุม ทิศทางหรือการกระทำของตัวละคร เมื่อใช้กับตำแหน่งทางภูมิศาสตร์ มิติข้อมูลนี้สามารถ ช่วยสร้างการนำทางแบบเลี้ยวต่อเลี้ยวที่แม่นยำยิ่งขึ้น หรือให้ข้อมูลเกี่ยวกับ สถานที่ตั้งที่เฉพาะเจาะจง

สรุป

  • ตรวจจับด้านใดด้านหนึ่งของอุปกรณ์และการหมุนอุปกรณ์
  • ดูว่าควรตอบสนองต่อเหตุการณ์การเคลื่อนไหวและการวางแนวเมื่อใดและอย่างไร

ปลายสายข้างไหนเป็นปลายสาย

หากต้องการใช้ข้อมูลที่การวางแนวของอุปกรณ์และเหตุการณ์การเคลื่อนไหวแสดงผล คุณจำเป็นต้องเข้าใจค่าที่ระบุ

เฟรมพิกัด Earth

เฟรมพิกัด Earth ซึ่งอธิบายโดยค่า X, Y และ Z อยู่ในแนวเดียวกัน ขึ้นอยู่กับแรงโน้มถ่วงและการวางแนวแม่เหล็กมาตรฐาน

ระบบพิกัด
X หมายถึงทิศทางตะวันออก-ตะวันตก (ที่ตะวันออกเป็นค่าบวก)
Y หมายถึงทิศเหนือ-ใต้ (โดยที่ทิศเหนือเป็นค่าบวก)
Z หมายถึงทิศทางขึ้นลง ตั้งฉากกับพื้น (เมื่อขึ้นเป็นบวก)

เฟรมพิกัดของอุปกรณ์

วันที่ ภาพของเฟรมพิกัดของอุปกรณ์
ภาพของเฟรมพิกัดของอุปกรณ์

เฟรมพิกัดของอุปกรณ์ ซึ่งอธิบายด้วยค่า x, y และ z อยู่ในแนวเดียวกัน โดยอิงจากจุดกึ่งกลางของอุปกรณ์

ระบบพิกัด
X ในระนาบของหน้าจอ ให้บวกไปทางขวา
Y ในระนาบของหน้าจอ ให้บวกขึ้นไปทางด้านบน
Z ตั้งฉากกับหน้าจอหรือแป้นพิมพ์ ขยายเป็นบวก ได้เลย

สำหรับโทรศัพท์หรือแท็บเล็ต การวางแนวของอุปกรณ์จะอิงตาม การวางแนวของหน้าจอ สำหรับโทรศัพท์และแท็บเล็ต ข้อมูลจะอิงตามอุปกรณ์ ในโหมดภาพบุคคล สำหรับคอมพิวเตอร์เดสก์ท็อปหรือแล็ปท็อป การวางแนวคือ เมื่อเทียบกับแป้นพิมพ์

ข้อมูลการหมุนเวียน

ข้อมูลการหมุนจะแสดงผลเป็นมุมออยเลอร์ แสดงองศาของความแตกต่างระหว่างพิกัดของอุปกรณ์ และเฟรมของพิกัด Earth

อัลฟ่า

วันที่ ภาพอัลฟ่าในเฟรมพิกัดของอุปกรณ์
ภาพอัลฟ่าในเฟรมพิกัดของอุปกรณ์

การหมุนรอบแกน z ค่า alpha คือ 0° เมื่อที่ด้านบนของ อุปกรณ์จะหันไปทางทิศเหนือโดยตรง เนื่องจากอุปกรณ์หมุนทวนเข็มนาฬิกา ค่า alpha จะเพิ่มขึ้น

เบต้า

วันที่ ภาพเฟรมพิกัดของอุปกรณ์
ภาพของเวอร์ชันเบต้าในเฟรมพิกัดของอุปกรณ์

การหมุนรอบแกน x ค่า beta คือ 0° เมื่อด้านบนและ ที่ด้านล่างของอุปกรณ์มีระยะห่างเท่ากันกับพื้นผิวโลก ค่า จะเพิ่มขึ้นเมื่อด้านบนของอุปกรณ์เอียงไปยังพื้นผิวโลก

แกมมา

วันที่ ภาพเฟรมพิกัดของอุปกรณ์
ภาพของแกมมาในเฟรมพิกัดของอุปกรณ์

การหมุนรอบแกน y ค่า gamma คือ 0° เมื่อทางซ้ายและ ขอบด้านขวาของอุปกรณ์มีระยะห่างจากพื้นผิวโลกเท่ากัน ค่า จะเพิ่มขึ้นเมื่อด้านขวาเอียงไปยังพื้นผิวโลก

การวางแนวของอุปกรณ์

เหตุการณ์การวางแนวของอุปกรณ์จะแสดงผลข้อมูลการหมุน ซึ่งรวมถึงจำนวน วางอุปกรณ์โดยหันด้านหน้าไปด้านหลัง หันไปทางด้านข้าง และถ้าโทรศัพท์หรือแล็ปท็อป มีเข็มทิศ ทิศทางที่อุปกรณ์หันหน้าไป

ใช้เท่าที่จำเป็น ทดสอบการสนับสนุน ห้ามอัปเดต UI ในทุกเหตุการณ์การวางแนว ให้ซิงค์กับ requestAnimationFrame แทน

กรณีที่ควรใช้เหตุการณ์การวางแนวอุปกรณ์

เหตุการณ์การวางแนวของอุปกรณ์มีประโยชน์หลายอย่าง ตัวอย่างมีดังต่อไปนี้

  • อัปเดตแผนที่ขณะที่ผู้ใช้เคลื่อนที่
  • ปรับแต่ง UI เล็กน้อย เช่น การเพิ่มเอฟเฟกต์พารัลแลกซ์
  • ใช้ร่วมกับตำแหน่งทางภูมิศาสตร์ได้ สามารถใช้สำหรับการนำทางแบบเลี้ยวต่อเลี้ยว

ตรวจหาการสนับสนุนและรับฟังเหตุการณ์

หากต้องการฟัง DeviceOrientationEvent ก่อนอื่นให้ตรวจสอบว่าเบราว์เซอร์รองรับเหตุการณ์ดังกล่าวหรือไม่ จากนั้นแนบ Listener เหตุการณ์เข้ากับวัตถุ window ที่รอฟังเหตุการณ์ deviceorientation รายการ

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', deviceOrientationHandler, false);
  document.getElementById('doeSupported').innerText = 'Supported!';
}

จัดการเหตุการณ์การวางแนวอุปกรณ์

เหตุการณ์การวางแนวของอุปกรณ์จะเริ่มทำงานเมื่ออุปกรณ์เคลื่อนที่หรือเปลี่ยนแปลง การวางแนว โดยจะแสดงข้อมูลเกี่ยวกับความแตกต่างระหว่างอุปกรณ์ใน ตำแหน่งปัจจุบันเมื่อสัมพันธ์กับ เฟรมพิกัด Earth

โดยทั่วไปเหตุการณ์จะแสดงพร็อพเพอร์ตี้ 3 รายการ ได้แก่ alpha, beta และ gamma ใน Safari บนอุปกรณ์เคลื่อนที่ พารามิเตอร์เพิ่มเติม webkitCompassHeading จะแสดงผลพร้อมทิศทางเข็มทิศ

การเคลื่อนไหวของอุปกรณ์

เหตุการณ์การวางแนวของอุปกรณ์จะแสดงผลข้อมูลการหมุน ซึ่งรวมถึงจำนวน วางอุปกรณ์โดยหันด้านหน้าไปด้านหลัง หันไปทางด้านข้าง และถ้าโทรศัพท์หรือแล็ปท็อป มีเข็มทิศ ทิศทางที่อุปกรณ์หันหน้าไป

ใช้การเคลื่อนที่ของอุปกรณ์เมื่อจำเป็นต้องมีการเคลื่อนไหวปัจจุบันของอุปกรณ์ rotationRate จะอยู่ในหน่วย°/วินาที acceleration และ accelerationWithGravity จะระบุเป็นหน่วยม./วินาที2 โปรดระวังความแตกต่างระหว่างการใช้งานเบราว์เซอร์

เมื่อใดควรใช้เหตุการณ์การเคลื่อนไหวของอุปกรณ์

เหตุการณ์การเคลื่อนไหวของอุปกรณ์มีประโยชน์หลายอย่าง ตัวอย่างมีดังต่อไปนี้

  • เขย่าท่าทางสัมผัสเพื่อรีเฟรชข้อมูล
  • ในเกม เพื่อทำให้ตัวละครกระโดดหรือเคลื่อนไหว
  • สำหรับแอปสุขภาพและการออกกำลังกาย

ตรวจหาการสนับสนุนและรับฟังเหตุการณ์

หากต้องการฟัง DeviceMotionEvent ก่อนอื่นให้ดูว่าเหตุการณ์ ที่ได้รับการสนับสนุนในเบราว์เซอร์ แล้วแนบ Listener เหตุการณ์ลงใน window กำลังฟังออบเจ็กต์สำหรับ devicemotion เหตุการณ์

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler);
  setTimeout(stopJump, 3 * 1000);
}

จัดการเหตุการณ์การเคลื่อนไหวของอุปกรณ์

เหตุการณ์การเคลื่อนที่ของอุปกรณ์เริ่มทํางานในช่วงเวลาปกติ และแสดงข้อมูลเกี่ยวกับ การหมุน (เป็น°/วินาที) และการเร่ง (เป็นเมตร/วินาที2) ของอุปกรณ์ได้เป็นอย่างดี อุปกรณ์บางเครื่องไม่มีฮาร์ดแวร์ เพื่อไม่ให้เกิดผลกระทบจากแรงโน้มถ่วง

เหตุการณ์จะแสดงพร็อพเพอร์ตี้ 4 รายการ accelerationIncludingGravity acceleration ซึ่งไม่รวมถึงผลกระทบของ Gravity, rotationRate และ interval

ตัวอย่างเช่น ลองดูที่โทรศัพท์นอนบนโต๊ะราบที่มี หน้าจอหงายขึ้น

รัฐ การหมุน การเร่งความเร็ว (ม./วินาที2) ความเร่งที่มีแรงโน้มถ่วง (ม./วินาที2)
ไม่ย้าย [0, 0, 0] [0, 0, 0] [0, 0, 9.8]
เคลื่อนขึ้นไปบนท้องฟ้า [0, 0, 0] [0, 0, 5] [0, 0, 14.81]
ย้ายไปทางขวาเท่านั้น [0, 0, 0] [3, 0, 0] [3, 0, 9.81]
เลื่อนขึ้นและไปทางขวา [0, 0, 0] [5, 0, 5] [5, 0, 14.81]

ในทางกลับกัน ถ้าถือโทรศัพท์ไว้โดยให้หน้าจอตั้งฉากกับ และปรากฏต่อผู้ชมโดยตรง:

รัฐ การหมุน การเร่งความเร็ว (ม./วินาที2) ความเร่งที่มีแรงโน้มถ่วง (ม./วินาที2)
ไม่ย้าย [0, 0, 0] [0, 0, 0] [0, 9.81, 0]
เคลื่อนขึ้นไปบนท้องฟ้า [0, 0, 0] [0, 5, 0] [0, 14.81, 0]
ย้ายไปทางขวาเท่านั้น [0, 0, 0] [3, 0, 0] [3, 9.81, 0]
เลื่อนขึ้นและไปทางขวา [0, 0, 0] [5, 5, 0] [5, 14.81, 0]

ตัวอย่าง: การคำนวณความเร่งสูงสุดของวัตถุ

วิธีหนึ่งในการใช้เหตุการณ์การเคลื่อนไหวของอุปกรณ์คือการคำนวณความเร่งสูงสุด ของออบเจ็กต์ เช่น ความเร่งสูงสุดของคนคือเท่าไร กระโดด?

if (evt.acceleration.x > jumpMax.x) {
  jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
  jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
  jumpMax.z = evt.acceleration.z;
}

หลังจากแตะปุ่ม "ไป" ระบบจะแจ้งให้ผู้ใช้ข้าม ในช่วงเวลาดังกล่าว หน้าเว็บจัดเก็บค่าการเร่งความเร็วสูงสุด (และต่ำสุด) และอยู่หลัง กระโดด เพื่อบอกผู้ใช้ว่าถึงการเร่งความเร็วสูงสุด

ความคิดเห็น