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

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

François Beaufort

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

ระบบปฏิบัติการจะเปิดใช้การเร่งความเร็วเมาส์โดยค่าเริ่มต้น สำหรับเกมที่มีมุมมองของบุคคลที่หนึ่งบางเกม ซึ่งมักจะเป็นเกมยิงมุมมองบุคคลที่หนึ่ง (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 จะไม่รวมการเร่งความเร็วของเมาส์เมื่อเคอร์เซอร์ล็อกอยู่

ใช้สัญญาที่ส่งคืนใหม่จาก 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 โปรดดูซอร์สโค้ด

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

• คำอธิบาย
• การประชาสัมพันธ์ข้อกำหนด
• ที่เก็บ GitHub
• รายการ ChromeStatus
• ข้อบกพร่องการติดตามของ Chrome
• ความตั้งใจที่จะจัดส่ง
• จุดยืนของ Mozilla
• ตําแหน่งของ WebKit

ขอขอบคุณ

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