ปิดใช้การเร่งเมาส์เพื่อมอบประสบการณ์การเล่นเกม 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 } เพื่อปิดใช้ การปรับระดับ OS สำหรับการเร่งความเร็วเมาส์ และเข้าถึงอินพุตเมาส์ดิบ วิธีนี้จะช่วยให้ข้อมูลการเคลื่อนไหวของเมาส์จากเหตุการณ์ 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 ฯลฯ) เป็นเบราว์เซอร์เดียวที่รองรับการปิดใช้การปรับระดับ OS สำหรับการเร่งความเร็วของเมาส์ ณ เดือนตุลาคม 2020 ดูข้อมูลอัปเดตได้ในตารางความเข้ากันได้ของเบราว์เซอร์ของ MDN

การรองรับระบบปฏิบัติการ

ChromeOS, macOS Catalina 10.15.1 และ Windows รองรับการปิดใช้การปรับระดับระบบปฏิบัติการสำหรับการเร่งความเร็วของเมาส์ Linux จะตามมา

ตัวอย่าง

คุณทดลองใช้ Pointer Lock API ได้โดยเรียกใช้ตัวอย่าง

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

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

การรับทราบ

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