ตอนนี้เว็บแอปสามารถปิดใช้การเร่งความเร็วเมาส์เมื่อจับภาพเหตุการณ์ตัวชี้ได้แล้ว
การเคลื่อนที่แบบเร่งเป็นฟีเจอร์ที่ได้รับการปรับตามหลักการยศาสตร์เมื่อใช้เมาส์หรือแทร็กแพดเพื่อย้ายตัวชี้บนหน้าจอ ช่วยให้สามารถเคลื่อนที่ได้อย่างแม่นยำโดยการเลื่อนช้าๆ ขณะเดียวกันก็ช่วยให้ตัวชี้ข้ามทั้งหน้าจอได้ด้วยการเคลื่อนที่สั้นๆ กล่าวอย่างเจาะจงคือ ในระยะห่างทางกายภาพเดียวกันกับที่คุณเลื่อนเมาส์ ตัวชี้บนหน้าจอจะเดินทางไกลขึ้นหากระยะทางเดินทางเร็วขึ้น
ระบบปฏิบัติการจะเปิดใช้การเร่งความเร็วเมาส์โดยค่าเริ่มต้น สำหรับเกมมุมมองของบุคคลที่หนึ่งบางเกม ซึ่งโดยทั่วไปคือเกมยิงมุมมองบุคคลที่หนึ่ง (FPS) ระบบจะใช้ข้อมูลอินพุตดิบของเมาส์เพื่อควบคุมการหมุนกล้องโดยไม่ต้องปรับความเร่ง การเคลื่อนไหวร่างกายแบบเดียวกัน ไม่ว่าจะช้าหรือเร็ว จะส่งผลให้เกิดการหมุนแบบเดียวกัน วิธีนี้ทำให้ประสบการณ์การเล่นเกมดีขึ้นและความแม่นยำสูงขึ้นตามข้อมูลของเกมเมอร์มืออาชีพ
ตั้งแต่ Chrome 88 เป็นต้นไป เว็บแอปสามารถสลับระหว่างข้อมูลการเคลื่อนที่ของเมาส์แบบเร่งและไม่เร่งได้ด้วย API ล็อก Pointer ที่อัปเดตแล้ว
แพลตฟอร์มเกมบนเว็บอย่าง 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
ไม่รวมการเร่งความเร็วของเมาส์เมื่อตัวชี้ล็อกอยู่
ใช้คำสัญญาใหม่ที่ส่งคืนจาก 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();
}
});
}
คุณสามารถสลับระหว่างข้อมูลการเคลื่อนที่ของเมาส์แบบเร่งและไม่เร่งความเร็วได้โดยไม่ต้องยกเลิกการล็อกตัวชี้ เพียงแค่ขอล็อกตัวชี้อีกครั้ง ด้วยตัวเลือกที่ต้องการ หากคำขอนั้นไม่สำเร็จ ล็อกเดิมจะยังอยู่ และคำสัญญาที่ส่งกลับมาจะปฏิเสธ จะไม่มีเหตุการณ์การล็อกตัวชี้เริ่มทำงาน สำหรับคำขอเปลี่ยนแปลงที่ล้มเหลว
การสนับสนุนเบราว์เซอร์
Pointer Lock API รองรับการใช้งานในเบราว์เซอร์ต่างๆ เป็นอย่างดี แต่เบราว์เซอร์ที่ใช้ Chromium (เช่น Chrome, Edge ฯลฯ) เป็นเพียงเบราว์เซอร์เดียวที่รองรับการปิดใช้การปรับระดับระบบปฏิบัติการสำหรับการเร่งเมาส์ในเดือนตุลาคม 2020 โปรดดูการอัปเดตในตารางความเข้ากันได้ของเบราว์เซอร์ของ MDN
การรองรับระบบปฏิบัติการ
ใน ChromeOS, macOS Catalina 10.15.1 และ Windows จะปิดใช้การปรับระดับระบบปฏิบัติการสำหรับการเร่งเมาส์ได้ Linux จะตามมาเอง
ตัวอย่าง
คุณเล่นกับ Pointer Lock API ได้โดยเรียกใช้ตัวอย่างใน Glitch อย่าลืมตรวจสอบซอร์สโค้ด
ลิงก์ที่มีประโยชน์
- คำอธิบาย
- ข้อกำหนด PR
- ที่เก็บของ GitHub
- รายการ ChromeStatus
- ข้อบกพร่องในการติดตามของ Chrome
- ตั้งใจที่จะจัดส่ง
- ตำแหน่งของ Mozilla
- ตำแหน่งของ WebKit
ข้อความแสดงการยอมรับ
ขอขอบคุณ James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques และ Vincent Scheib ที่รีวิวบทความนี้