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

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

François Beaufort
François Beaufort
GitHub

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

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

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

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

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

การสนับสนุนเบราว์เซอร์

  • 37
  • 13
  • 50
  • 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 ไม่รวมการเร่งความเร็วของเมาส์เมื่อตัวชี้ล็อกอยู่

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

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

ข้อความแสดงการยอมรับ

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