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
François Beaufort

Hızlandırılmış hareket, ekrandaki işaretçiyi hareket ettirmek için fare veya dokunmatik yüzey kullanırken ergonomik bir özelliktir. Yavaş hareket ederek hassas hareket sağlarken işaretçinin hızlı ve kısa bir hareketle ekranın tamamını geçmesine de olanak tanır. Daha açık belirtmek gerekirse, fareyi hareket ettirdiğiniz fiziksel mesafe aynı olsa bile mesafe daha hızlı katedildiyse ekrandaki işaretçi daha uzağa gider.

İşletim sistemleri fare hızlandırmasını varsayılan olarak etkinleştirir. Bazı birinci taraf perspektif oyunlarında (genellikle birinci şahıs nişancı oyunları) kamera dönüşünü hızlandırma ayarı olmadan kontrol etmek için ham fare giriş verileri kullanılır. Yavaş veya hızlı aynı fiziksel hareket aynı rotasyonla sonuçlanır. Profesyonel oyunculara göre bu, daha iyi bir oyun deneyimi ve daha yüksek doğruluk sağlıyor.

Windows 10 ayarlarındaki işaretçi hareket kontrolü ekran görüntüsü.
Windows 10 ayarlarında işaretçi hareket 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 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 özellikleri zaten kullanıyor.

Tarayıcı desteği

  • Chrome: 37.
  • Edge: 13.
  • Firefox: 50.
  • Safari: 10.1.

Kaynak

API'yi kullanma

İşaretçi kilidi isteğinde bulunma

İşaretçi kilidi, bir masaüstü uygulamasının işaretçi simgesini gizlemesi ve fare hareketini başka bir şey (ör. 3D bir dünyada etrafı inceleme) olarak yorumlaması için kullanılan 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) artık işaretçinin ekranın dışına çıkması konusunda endişelenmenize gerek kalmaz. 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.

Fare imleci kilidi istemek için hedef öğede requestPointerLock()'ü çağırın ve fare imleci 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 ayarı devre dışı bırakmak ve ham fare girişine erişmek üzere { unadjustedMovement: true } ile requestPointerLock() çağrısı yapın. Bu sayede, 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 döndürülen yeni promise'i 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. İ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 söz reddedilir. Başarısız bir değişiklik isteği için işaretçi kilidi etkinliği tetiklenmez.

Tarayıcı desteği

İşaretçi Kilidi API'si tarayıcılarda iyi desteklenir. Ancak Ekim 2020 itibarıyla fare hızlandırması için OS 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ırması için işletim sistemi düzeyinde ayarlama devre dışı bırakma özelliği ChromeOS, macOS Catalina 10.15.1 ve Windows'ta 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 koduna göz atın.

Faydalı bağlantılar

Teşekkür ederiz

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