ตอนนี้เว็บแอปสามารถปิดใช้การเร่งความเร็วเมาส์เมื่อบันทึกเหตุการณ์เคอร์เซอร์ได้แล้ว
การเคลื่อนไหวแบบเร่งเป็นฟีเจอร์ที่เหมาะกับสรีระเมื่อใช้เมาส์หรือแทร็กแพดเพื่อย้ายเคอร์เซอร์บนหน้าจอ ซึ่งช่วยให้คุณเคลื่อนไหวได้อย่างแม่นยำด้วยการเลื่อนช้าๆ และช่วยให้เคอร์เซอร์เลื่อนไปทั่วทั้งหน้าจอได้ด้วยการเลื่อนสั้นๆ อย่างรวดเร็ว กล่าวโดยละเอียดคือ เมื่อคุณเลื่อนเมาส์ไปในระยะทางเท่ากัน พ้อยเตอร์บนหน้าจอจะเลื่อนไปไกลกว่าหากเลื่อนเร็วกว่า
ระบบปฏิบัติการจะเปิดใช้การเร่งความเร็วเมาส์โดยค่าเริ่มต้น สำหรับเกมมุมมองบุคคลที่หนึ่งบางเกม ซึ่งมักเป็นเกมยิงมุมมองบุคคลที่หนึ่ง (FPS) ระบบจะใช้ข้อมูลการป้อนข้อมูลเมาส์ดิบเพื่อควบคุมการหมุนกล้องโดยไม่มีการปรับเปลี่ยนการเร่ง การเคลื่อนไหวของวัตถุแบบเดียวกันไม่ว่าจะช้าหรือเร็วจะทำให้เกิดการหมุนแบบเดียวกัน ซึ่งจะส่งผลให้เกมเมอร์มืออาชีพได้รับประสบการณ์การเล่นเกมที่ดีขึ้นและความแม่นยำสูงขึ้น
ตั้งแต่ Chrome 88 เป็นต้นไป เว็บแอปจะสลับไปมาระหว่างข้อมูลการเคลื่อนไหวของเม้าส์แบบเร่งและแบบไม่เร่งได้ โดยใช้ Pointer Lock API ที่อัปเดต
แพลตฟอร์มเกมบนเว็บอย่าง Google Stadia และ Nvidia GeForce Now ใช้ความสามารถใหม่ๆ เหล่านี้เพื่อตอบสนองความต้องการของเกมเมอร์ FPS อยู่แล้ว
การใช้ API
ขอการล็อกเคอร์เซอร์
การล็อกเคอร์เซอร์เป็นคำที่เป็นมาตรฐานเมื่อแอปพลิเคชันบนเดสก์ท็อปซ่อนไอคอนเคอร์เซอร์และตีความการเคลื่อนไหวของเมาส์เป็นอย่างอื่น เช่น การมองไปรอบๆ ในโลก 3 มิติ
แอตทริบิวต์ movementX
และ movementY
จากเหตุการณ์เอกสาร mousemove
จะบอกคุณว่าเคอร์เซอร์ของเมาส์เลื่อนไปเท่าใดนับตั้งแต่เหตุการณ์การเลื่อนครั้งล่าสุด อย่างไรก็ตาม ข้อมูลเหล่านี้จะไม่อัปเดตเมื่อเคอร์เซอร์ย้ายไปนอกหน้าเว็บ
document.addEventListener("mousemove", (event) => {
console.log(`movementX: ${event.movementX} movementY: ${event.movementY}`);
});
การจับภาพเคอร์เซอร์ของเมาส์ (หรือขอการล็อกเคอร์เซอร์) จะช่วยให้คุณไม่ต้องกังวลว่าเคอร์เซอร์จะย้ายไปนอกขอบอีกต่อไป ซึ่งจะเป็นประโยชน์อย่างยิ่งสําหรับเกมบนเว็บที่สมจริง เมื่อล็อกเคอร์เซอร์ไว้ เหตุการณ์เมาส์ทั้งหมดจะไปที่องค์ประกอบเป้าหมายของการล็อกเคอร์เซอร์
เรียกใช้ requestPointerLock()
ในองค์ประกอบเป้าหมายเพื่อขอการล็อกเคอร์เซอร์ และรับฟังเหตุการณ์ pointerlockchange
และ pointerlockerror
เพื่อตรวจสอบการเปลี่ยนแปลงการล็อกเคอร์เซอร์
const myTargetElement = document.body;
// Call this function to request a pointer lock.
function requestPointerLock() {
myTargetElement.requestPointerLock();
}
document.addEventListener("pointerlockchange", () => {
if (document.pointerLockElement) {
console.log(`pointer is locked on ${document.pointerLockElement}`);
} else {
console.log("pointer is unlocked");
}
});
document.addEventListener("pointerlockerror", () => {
console.log("pointer lock error");
});
ปิดใช้การเร่งความเร็วเมาส์
เรียกใช้ requestPointerLock()
ด้วย { unadjustedMovement: true }
เพื่อปิดใช้การปรับระดับระบบปฏิบัติการสำหรับการเร่งความเร็วเมาส์ และเข้าถึงอินพุตเมาส์ดิบ
วิธีนี้จะทำให้ข้อมูลการเคลื่อนไหวของเมาส์จากเหตุการณ์ mousemove
จะไม่รวมการเร่งความเร็วของเมาส์เมื่อล็อกเคอร์เซอร์ไว้
ใช้ Promise ใหม่ที่แสดงผลจาก requestPointerLock()
เพื่อดูว่าคําขอสําเร็จหรือไม่
function requestPointerLockWithUnadjustedMovement() {
const promise = myTargetElement.requestPointerLock({
unadjustedMovement: true,
});
if (!promise) {
console.log("disabling mouse acceleration is not supported");
return;
}
return promise
.then(() => console.log("pointer is locked"))
.catch((error) => {
if (error.name === "NotSupportedError") {
// Some platforms may not support unadjusted movement.
// You can request again a regular pointer lock.
return myTargetElement.requestPointerLock();
}
});
}
คุณสามารถสลับระหว่างข้อมูลการเคลื่อนไหวของเม้าส์แบบเร่งและแบบไม่เร่งได้โดยไม่ต้องปลดล็อกเคอร์เซอร์ เพียงขอการล็อกเคอร์เซอร์อีกครั้งด้วยตัวเลือกที่ต้องการ หากคำขอนั้นไม่สำเร็จ ล็อกเดิมจะยังคงอยู่และ Promise ที่แสดงผลจะปฏิเสธ จะไม่มีเหตุการณ์การล็อกเคอร์เซอร์เกิดขึ้นสำหรับคำขอเปลี่ยนแปลงที่ไม่สำเร็จ
การสนับสนุนเบราว์เซอร์
Pointer Lock API ได้รับการรองรับในเบราว์เซอร์ต่างๆ เป็นอย่างดี อย่างไรก็ตาม ในเดือนตุลาคม 2020 เบราว์เซอร์ที่พัฒนาบน Chromium (เช่น Chrome, Edge ฯลฯ) เป็นเพียงเบราว์เซอร์เดียวที่รองรับการปิดใช้การปรับระดับระบบปฏิบัติการสำหรับการเร่งความเร็วเมาส์ ดูข้อมูลอัปเดตได้ในตารางความเข้ากันได้ของเบราว์เซอร์ของ MDN
การรองรับระบบปฏิบัติการ
การปิดใช้การปรับระดับระบบปฏิบัติการสำหรับการเร่งเมาส์ใช้ได้ใน ChromeOS, macOS Catalina 10.15.1 และ Windows Linux จะตามมา
ตัวอย่าง
คุณเล่นกับ Pointer Lock API ได้โดยเรียกใช้ตัวอย่างใน Glitch อย่าลืมตรวจสอบซอร์สโค้ด
ลิงก์ที่มีประโยชน์
- คำอธิบาย
- การประชาสัมพันธ์ข้อกำหนด
- ที่เก็บ GitHub
- รายการ ChromeStatus
- ข้อบกพร่องการติดตามของ Chrome
- ความตั้งใจที่จะจัดส่ง
- จุดยืนของ Mozilla
- ตําแหน่งของ WebKit
ขอขอบคุณ
ขอขอบคุณ James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques และ Vincent Scheib ที่ตรวจสอบบทความนี้