إيقاف ميزة تسريع الماوس لتوفير تجربة أفضل لعدد اللقطات في الثانية

يمكن الآن لتطبيقات الويب إيقاف تسريع الماوس عند تسجيل أحداث المؤشر.

François Beaufort

الحركة السريعة هي ميزة مريحة عند استخدام الماوس أو لوحة اللمس لتحريك المؤشر على الشاشة. ويتيح هذا الخيار التنقّل بدقة من خلال التحريك ببطء، كما يتيح تحريك المؤشر على كامل الشاشة بحركة قصيرة وسريعة. على وجه التحديد، عند تحريك الماوس للمسافة المادية نفسها، يتحرّك المؤشر على الشاشة لمسافة أبعد إذا تم تحريك الماوس بشكل أسرع.

تتيح أنظمة التشغيل تسريع الماوس تلقائيًا. في بعض ألعاب منظور الشخص الأول، مثل ألعاب إطلاق النار من منظور الشخص الأول (FPS)، يتم استخدام بيانات إدخال الماوس الأولية للتحكّم في دوران الكاميرا بدون تعديل التسارع. ويؤدي الحركة الفيزيائية نفسها، سواء كانت بطيئة أو سريعة، إلى الدوران نفسه. ويؤدي ذلك إلى تحسين تجربة الألعاب وزيادة الدقة وفقًا للاعبين المحترفين.

بدءًا من الإصدار 88 من Chrome، يمكن لتطبيقات الويب التبديل بين بيانات حركة المؤشر السريعة وغير السريعة بفضل واجهة برمجة التطبيقات Pointer Lock API المعدَّلة.

تستخدم منصات الألعاب المستندة إلى الويب، مثل Google Stadia وNvidia GeForce Now، هذه الإمكانات الجديدة لإرضاء محبّي ألعاب إطلاق النار من منظور الشخص الأول.

استخدام واجهة برمجة التطبيقات

طلب قفل المؤشر

قفل المؤشر هو المصطلح الأساسي الذي يُستخدم عندما يخفي تطبيق على الكمبيوتر المكتبي رمز المؤشر ويستخدم حركة الماوس لأغراض أخرى، مثل التجول في عالم ثلاثي الأبعاد.

تخبرك السمتان 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 من خلال تشغيل العينة.

روابط مفيدة

• شرح
• مواصفات طلب السحب
• مستودع GitHub
• إدخال ChromeStatus
• خطأ التتبُّع في Chrome
• Intent to ship
• موقف Mozilla
• موقف WebKit

الإقرارات

نشكر جيمس هوليير وتوماس شتاينر وجو ميدلي وكايس باسكس وفنسنت شيب على مراجعتهم لهذه المقالة.