Daha iyi bir FPS oyun deneyimi sunmak için fare hızlandırmayı devre dışı bırakın

Web uygulamaları artık işaretçi etkinliklerini yakalarken fare hızlandırmayı devre dışı bırakabilir.

François Beaufort

Hızlı hareket, ekrandaki işaretçiyi hareket ettirmek için fare veya dokunmatik yüzey kullanırken yararlanabileceğiniz ergonomik bir özelliktir. Bu özellik, yavaş hareket ederek hassas hareket etmenizi sağlarken işaretçinin kısa ve hızlı bir hareketle ekranın tamamını geçmesine de olanak tanır. Özellikle, fareyi hareket ettirdiğiniz aynı fiziksel mesafede, mesafe daha hızlı katedildiyse ekrandaki işaretçi daha uzağa gider.

İşletim sistemleri, fare hızlandırmayı varsayılan olarak etkinleştirir. Genellikle birinci şahıs nişancı oyunları (FPS) olan bazı birinci taraf bakış açısı oyunlarında, hızlanma ayarı olmadan kamera dönüşünü kontrol etmek için ham fare giriş verileri kullanılır. Aynı fiziksel hareket, yavaş veya hızlı olsun, aynı dönüşü sağlar. Bu sayede daha iyi bir oyun deneyimi ve profesyonel oyunculara göre daha yüksek doğruluk elde edilir.

Chrome 88'den itibaren web uygulamaları, güncellenen Pointer Lock API sayesinde hızlandırılmış ve hızlandırılmamış fare hareketi verileri arasında geçiş yapabilir.

Google Stadia ve Nvidia GeForce Now gibi web tabanlı oyun platformları, FPS oyuncularını memnun etmek için bu yeni özelliklerden yararlanıyor.

API'yi kullanma

İşaretçi kilidi isteğinde bulunma

İşaretçi kilidi, masaüstü uygulamasının işaretçi simgesini gizleyip fare hareketini başka bir amaçla (ör. 3D dünyada etrafa bakmak) yorumladığı durumlarda kullanılan terimdir.

mousemove doküman etkinliklerindeki movementX ve movementY özellikleri, son hareket etkinliğinden bu yana fare işaretçisinin ne kadar hareket ettiğini gösterir. Ancak, fare işaretçisi web sayfasının dışına çıktığında bunlar güncellenmez.

document.addEventListener("mousemove", (event) => {
  console.log(`movementX: ${event.movementX} movementY: ${event.movementY}`);
});

Fare işaretçisini yakalama (veya işaretçi kilidi isteme), işaretçinin artık dışarı çıkması konusunda endişelenmemenizi sağlar. Bu özellik, özellikle sürükleyici web oyunları için yararlıdır. İşaretçi kilitlendiğinde tüm fare etkinlikleri, işaretçi kilidinin hedef öğesine gider.

Hedef öğede requestPointerLock() işlevini çağırarak işaretçi kilidi isteyin ve işaretçi kilidi değişikliklerini izlemek için pointerlockchange ve pointerlockerror etkinliklerini dinleyin.

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");
});

Fare hızlandırmayı devre dışı bırakma

Fare hızlandırması için işletim sistemi düzeyinde ayarlamayı devre dışı bırakmak ve ham fare girişine erişmek üzere requestPointerLock() ile { unadjustedMovement: true } tuşlarına basın. Bu sayede, mousemove etkinliklerinden gelen fare hareketi verileri, işaretçi kilitlendiğinde fare hızlandırmasını içermez.

İsteğin başarılı olup olmadığını öğrenmek için requestPointerLock() öğesinden döndürülen yeni sözü kullanın.

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();
      }
    });
}

İşaretçi kilidini açmadan hızlandırılmış ve hızlandırılmamış fare hareketi verileri arasında geçiş yapabilirsiniz. İstediğiniz seçenekle işaretçi kilidini tekrar isteyin. Bu istek başarısız olursa orijinal kilit bozulmadan kalır ve döndürülen söz reddedilir. Başarısız bir değişiklik isteği için işaretçi kilitleme etkinlikleri tetiklenmez.

Tarayıcı desteği

Pointer Lock API, tarayıcılarda iyi desteklenir. Ancak Ekim 2020 itibarıyla, fare hızlandırması için işletim sistemi düzeyinde ayarlamayı devre dışı bırakmayı destekleyen tek tarayıcılar Chromium tabanlı tarayıcılardır (ör. Chrome, Edge vb.). Güncellemeler için MDN'nin Tarayıcı uyumluluğu tablosuna bakın.

İşletim sistemi desteği

Fare hızlandırma için işletim sistemi düzeyinde ayarlamayı devre dışı bırakma özelliği ChromeOS, macOS Catalina 10.15.1 ve Windows'da desteklenir. Linux sürümü de daha sonra kullanıma sunulacaktır.

Örnek

Örneği çalıştırarak Pointer Lock API ile denemeler yapabilirsiniz.

Faydalı bağlantılar

• Açıklama
• Spesifikasyon PR
• GitHub deposu
• ChromeStatus girişi
• Chrome izleme hatası
• Kargoya verme amacı
• Mozilla'nın konumu
• WebKit'in konumu

Teşekkür

Bu makaleyi inceledikleri için James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques ve Vincent Scheib'e teşekkür ederiz.