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

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

השבתת ההתאמה ברמת מערכת ההפעלה להאצת העכבר נתמכת ב-ChromeOS,‏ macOS Catalina 10.15.1 וב-Windows. אחריו יגיע Linux.

דוגמה

אפשר להתנסות ב-Pointer Lock API על ידי הפעלת הדוגמה.

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

• הסבר
• מפרט PR
• מאגר GitHub
• כניסה ל-ChromeStatus
• באג מעקב ב-Chrome
• כוונה לשלוח
• העמדה של Mozilla
• המיקום של WebKit

תודות

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