Web uygulamaları artık imleç etkinliklerini yakalarken fare hızlandırmasını devre dışı bırakabilir.
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.
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.
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
- 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.