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

Web uygulamaları artık imleç etkinliklerini yakalarken fare hızlandırmasını devre dışı bırakabilir.

François Beaufort

Hızlandırılmış hareket, işaretçiyi ekranda hareket ettirmek için fare veya dokunmatik yüzey kullanıldığında ergonomik bir özelliktir. Yavaş hareket ederek hassas hareket sağlar ve işaretçinin hızlı kısa bir hareketle tüm ekranı geçmesine olanak tanır. Özellikle, fareyi hareket ettirdiğiniz fiziksel mesafe boyunca, bu mesafe daha hızlı gidildiğinde ekrandaki işaretçi daha da ilerler.

İşletim sistemleri fare hızlandırmasını varsayılan olarak etkinleştirir. Bazı birinci taraf perspektif oyunlarında, yani genellikle birinci şahıs nişancı (FPS) oyunlarında ham fare giriş verileri, ivme ayarı yapılmadan kamera dönüşünü kontrol etmek için kullanılır. Yavaş veya hızlı aynı fiziksel hareket aynı rotasyona neden olur. Bu sayede profesyonel oyunculara göre daha iyi bir oyun deneyimi ve daha doğru sonuçlar elde ediliyor.

Chrome 88'den itibaren web uygulamaları, güncellenen İşaretçi Kilidi API'si sayesinde hızlandırılmış ve hızlandırılmış fare hareketi verileri arasında geçiş yapabilmektedir.

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

API'yi kullanma

İşaretçi kilidi isteme

İşaretçi kilidi, bir masaüstü uygulamasının işaretçi simgesini gizlediği ve fare hareketini başka bir şey için (ör. 3D dünyada etrafa bakma) yorumladığı durumları ifade eden standart terimdir.

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

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

Fare işaretçisini yakalamak (veya işaretçi kilidi istemek), işaretçinin artık dışarı çıkması konusunda endişelenmenize gerek kalmamasını sağlar. Bu ö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.

İşaretçi kilidi istemek için hedef öğede requestPointerLock() yöntemini çağırın 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ırak

Fare hızlandırmaya yönelik işletim sistemi düzeyinde ayarlamayı devre dışı bırakmak ve ham fare girişine erişmek için { unadjustedMovement: true } ile requestPointerLock() çağırın. Bu şekilde, mousemove etkinliklerinden gelen fare hareketi verileri, işaretçi kilitliyken fare hızlandırmasını içermez.

İsteğin başarılı olup olmadığını öğrenmek için requestPointerLock() tarafından gönderilen yeni taahhüdü 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 serbest bırakmadan, hızlandırılmış ve hızlandırılmamış fare hareketi verileri arasında geçiş yapmak mümkündür. İstediğiniz seçeneği kullanarak işaretçi kilidini tekrar isteyebilirsiniz. Bu istek başarısız olursa orijinal kilit bozulmadan kalır ve döndürülen taahhüt reddedilir. Başarısız bir değişiklik isteği için işaretçi kilidi etkinlikleri tetiklenmez.

Tarayıcı desteği

İşaretçi Kilidi API'si tüm tarayıcılarda iyi desteklenir. Bununla birlikte, Ekim 2020'den itibaren fare hızlandırma için işletim sistemi düzeyinde ayarlamanın devre dışı bırakılması yalnızca Chromium tabanlı tarayıcılarda (ör. Chrome, Edge vb.) kullanılabilir. 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 ayarlamanın devre dışı bırakılması; ChromeOS, macOS Catalina 10.15.1 ve Windows'da desteklenir. Linux için de bu özellik yakında kullanıma sunulacaktır.

Örnek

Glitch'te örneği çalıştırarak İşaretçi Kilidi API'siyle oynayabilirsiniz. Kaynak kodu kontrol etmeyi unutmayın.

Faydalı bağlantılar

• Açıklayıcı
• Özellik PR
• GitHub deposu
• ChromeStatus girişi
• Chrome izleme hatası
• Gönderme amacı
• Mozilla'nın tutumu
• WebKit'in konumu

Teşekkür ederiz

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