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

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

François Beaufort

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

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

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

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

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

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

قفل المؤشر هو المصطلح الأساسي عندما يخفي تطبيق سطح المكتب رمز المؤشر ويفسر حركة الماوس لشيء آخر، مثل النظر حولك في عالم ثلاثي الأبعاد.

توضّح لك السمتان 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. تأكد من التحقق من رمز المصدر.

روابط مفيدة

• الشرح
• علاقات عامة حول المواصفات
• مستودع جيت هب
• إدخال حالة Chrome
• خطأ في تتبُّع Chrome
• نية الشحن
• منصب Mozilla
• مكانة WebKit

شكر وتقدير

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