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

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

François Beaufort

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

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

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

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

שימוש ב-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 בדפדפנים. עם זאת, דפדפנים המבוססים על 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 על בדיקת המאמר הזה.