משביתים את שיפור המהירות באמצעות עכבר כדי לספק חוויית גיימינג טובה יותר ב-FPS

אפליקציות אינטרנט יכולות עכשיו להשבית את האצת העכבר במהלך לכידת אירועי מצביע.

François Beaufort
François Beaufort
GitHub

תנועה מואצת היא תכונה ארגונומית כשמשתמשים בעכבר או במשטח מגע כדי להזיז את הסמן על המסך. התכונה מאפשרת תנועה מדויקת על ידי תנועה איטית ובמקביל מאפשרת למצביע לעבור ברחבי המסך בתנועה קצרה מהירה. באופן ספציפי, באותו מרחק פיזי שאתם מזיזים את העכבר, המצביע על המסך מתרחק אם המרחק הולך מהר יותר.

מערכות הפעלה מאפשרות האצת עכבר כברירת מחדל. בחלק ממשחקי הפרספקטיבה של הצד הראשון, לרוב משחקי יריות בגוף ראשון (FPS), נתונים של קלט עכבר גולמיים משמשים לשליטה בסיבוב המצלמה ללא התאמת האצה. אותה תנועה פיזית, איטית או מהירה, מובילה לאותו סיבוב. התוצאה היא חוויית גיימינג טובה יותר ורמת דיוק גבוהה יותר, לדברי גיימרים מקצועיים.

צילום מסך של פקד תנועת הסמן בהגדרות Windows 10.
בקרת תנועת הסמן בהגדרות של Windows 10.

החל מגרסה 88 של Chrome, אפליקציות אינטרנט יכולות לעבור בין נתונים של תנועת עכבר מואצת לנתונים לא מואצת, בעזרת ה-API העדכני של Pointer Lock.

פלטפורמות גיימינג מבוססות-אינטרנט כמו Google Stadia ו-Nvidia GeForce Now כבר משתמשות ביכולות החדשות האלה כדי לאהוב גיימרים של משחקי FPS.

תמיכה בדפדפן

  • 37
  • 13
  • 50
  • 10.1

מקור

שימוש ב-API

בקשה לנעילת מצביע

נעילת מצביע היא המונח הקנוני למצבים שבהם אפליקציה בשולחן העבודה מסתירה את סמל המצביע ומפרשת תנועת עכבר בהקשר אחר, כמו התבוננות מסביב בעולם תלת-ממדי.

המאפיינים 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 נתמך היטב בכל הדפדפנים. עם זאת, נכון לאוקטובר 2020, דפדפנים המבוססים על Chromium (למשל Chrome, Edge וכו') הם היחידים שתומכים בהשבתה של התאמה ברמת מערכת ההפעלה לצורך האצת עכבר. לעדכונים, יש לעיין בטבלה תאימות דפדפן של MDN.

תמיכה במערכת ההפעלה

אפשר להשבית את ההתאמה ברמת מערכת ההפעלה לשיפור המהירות של עכבר ב-ChromeOS, ב-macOS Catalina 10.15.1 וב-Windows. Linux תעבוד.

דוגמה

כדי לשחק עם Pointer Lock API, מריצים את הדוגמה ב-Glitch. אל תשכחו לבדוק את קוד המקור.

קישורים שימושיים

אישורים

תודה לג'יימס הולייר, תומאס סטיינר, ג'ו מדלי, קייס באסק ווינסנט שייב על הביקורות שלהם על המאמר.