ปิดใช้การเร่งเมาส์เพื่อมอบประสบการณ์การเล่นเกม FPS ที่ดียิ่งขึ้น

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

François Beaufort
François Beaufort

การเคลื่อนไหวแบบเร่งเป็นฟีเจอร์ที่เหมาะกับสรีระเมื่อใช้เมาส์หรือแทร็กแพดเพื่อย้ายเคอร์เซอร์บนหน้าจอ ซึ่งช่วยให้คุณเคลื่อนไหวได้อย่างแม่นยำด้วยการเลื่อนช้าๆ และช่วยให้เคอร์เซอร์เลื่อนไปทั่วทั้งหน้าจอได้ด้วยการเลื่อนสั้นๆ อย่างรวดเร็ว กล่าวโดยละเอียดคือ เมื่อคุณเลื่อนเมาส์ไปในระยะทางเท่ากัน พ้อยเตอร์บนหน้าจอจะเลื่อนไปไกลกว่าหากเลื่อนเร็วกว่า

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

ภาพหน้าจอของการควบคุมการเคลื่อนไหวของเคอร์เซอร์ในการตั้งค่า Windows 10
การควบคุมการเคลื่อนไหวของเคอร์เซอร์ในการตั้งค่า Windows 10

ตั้งแต่ Chrome 88 เป็นต้นไป เว็บแอปจะสลับไปมาระหว่างข้อมูลการเคลื่อนไหวของเม้าส์แบบเร่งและแบบไม่เร่งได้ โดยใช้ Pointer Lock API ที่อัปเดต

แพลตฟอร์มเกมบนเว็บอย่าง Google Stadia และ Nvidia GeForce Now ใช้ความสามารถใหม่ๆ เหล่านี้เพื่อตอบสนองความต้องการของเกมเมอร์ FPS อยู่แล้ว

การรองรับเบราว์เซอร์

  • Chrome: 37.
  • Edge: 13.
  • Firefox: 50
  • Safari: 10.1

แหล่งที่มา

การใช้ 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 อย่าลืมตรวจสอบซอร์สโค้ด

ลิงก์ที่มีประโยชน์

ขอขอบคุณ

ขอขอบคุณ James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques และ Vincent Scheib ที่ตรวจสอบบทความนี้