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 kaydederken fare hızlandırmasını devre dışı bırakabilir.

François Beaufort
François Beaufort
GitHub

Hızlandırılmış hareket, ekrandaki işaretçiyi hareket ettirmek için fare veya dokunmatik yüzey kullanılırken ergonomik bir özelliktir. Bu özellik, yavaş hareket ederek hassas hareket etmeyi sağlarken işaretçinin hızlı bir kısa hareketle tüm ekranı aşmasına olanak tanır. Özellikle, fareyi hareket ettirdiğiniz fiziksel mesafe için, mesafe daha hızlı giderildiyse ekrandaki işaretçi daha da ileri gider.

İşletim sistemleri, varsayılan olarak fare hızlandırmasını etkinleştirir. Genellikle birinci şahıs nişancı (FPS) oyunlarında (FPS) yer alan bazı birinci taraf perspektif oyunlarında ham fare giriş verileri, hız ayarı olmadan kamera dönüşünü kontrol etmek için kullanılır. Yavaş veya hızlı da olsa aynı fiziksel hareket aynı dönüşü sağlar. Böylece, profesyonel oyunculara göre daha iyi bir oyun deneyimi ve daha yüksek doğruluk elde edilir.

Windows 10 ayarlarındaki işaretçi hareketi kontrolünün ekran görüntüsü.
Windows 10 ayarlarında işaretçi hareketi kontrolü.

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

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

Tarayıcı Desteği

  • 37
  • 13
  • 50
  • 10.1

Kaynak

API'yi kullanın

İşaretçi kilidi isteğinde bulunma

İş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 bir dünyada etrafa bakma) yorumlaması için kullanılan standart terimdir.

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

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

Fare işaretçisini yakalamak (veya işaretçi kilidi isteğinde bulunmak), işaretçinin artık dışarı çıkması konusunda endişelenmenize gerek kalmaz. Bu, özellikle sürükleyici web oyunları için çok kullanışlı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() 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ırmasını devre dışı bırak

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() işlevini { unadjustedMovement: true } ile çağırın. Bu şekilde, işaretçi kilitliyken mousemove etkinliklerine ait fare hareket verileri, fare hızlandırmasını içermez.

İsteğin başarılı olup olmadığını öğrenmek için requestPointerLock() tarafından gönderilen 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 bırakmadan hızlandırılmış ve hızlandırılmamış fare hareketi verileri arasında geçiş yapmak mümkündür. İşaretçi kilidini istediğiniz seçenekle tekrar isteyebilirsiniz. Bu istek başarısız olursa orijinal kilit değişmeden 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 kilidi etkinlikleri tetiklenmez.

Tarayıcı desteği

Pointer Lock API, tarayıcılar arasında iyi desteklenir. Bununla birlikte, Ekim 2020'den itibaren fare hızlandırma için işletim sistemi düzeyinde düzenlemenin devre dışı bırakılmasını yalnızca Chromium tabanlı tarayıcılar (ör. Chrome, Edge vb.) desteklemiştir. Güncellemeler için MDN'nin Tarayıcı uyumluluğu tablosuna bakın.

İşletim sistemi desteği

Fare hızlandırması için OS düzeyinde ayarlamanın devre dışı bırakılması ChromeOS, macOS Catalina 10.15.1 ve Windows'da desteklenir. Linux bunu takip eder.

Örnek

Glitch'te sample çalıştırarak Pointer Lock API'yi kullanabilirsiniz. Kaynak koduna göz atmayı unutmayın.

Faydalı bağlantılar

Teşekkür

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