JavaScript ile Gamepad Desteği Oluşturdum

Bir hafta sonumu, bir tarayıcı oyunu için kontrolcü girişlerini tersine mühendislik yöntemiyle inceleyerek geçirdim. Gece saat 2'de boş bir diziye bakakalmıştım. Hiçbir şey görünmüyordu.

Bu deneyim, bana tarayıcı API'leri ve donanım sorgulama (polling) hakkında herhangi bir eğitim videosundan çok daha fazlasını öğretti.

Web oyunculuğu büyüyor. WebGL ve WebGPU ile tarayıcı oyunları artık yüksek kalite seviyelerine ulaşıyor. Oyuncular, bir Xbox veya PS5 kontrolcüsünü takıp hemen çalışmasını bekliyor.

Eğer oyunlar, erişilebilirlik araçları veya özel paneller geliştiriyorsanız, HTML5 Gamepad API'sine ihtiyacınız var. Chrome, Firefox ve Edge'de çalışır. Herhangi bir kütüphane gerektirmez.

İşte öğrendiklerim:

  • API, bağlantılar için olay güdümlü (event-driven), girişler için ise sorgulama (polling) tabanlıdır.
  • Girişleri sürekli okumak için requestAnimationFrame kullanmalısınız.
  • Tarayıcılar, kullanıcı bir düğmeye basana kadar kontrolcüyü göstermez. Bu, donanım parmak izi (hardware fingerprinting) alınmasını önlemek için bir gizlilik özelliğidir.

Verileri yönetmek:

  • "Standart" bir düzeni kontrol etmek için gamepad.mapping kullanın. Standart eşleme, 0 numaralı düğmenin her zaman en alttaki yüz düğmesi olmasını sağlar.
  • Satıcı (Vendor) ve Ürün (Product) kimlikleri için gamepad.id değerini kontrol edin. Bu, Sony DualSense gibi belirli donanımları tanımlamanıza yardımcı olur.
  • Her zaman bir ölü bölge (deadzone) filtresi uygulayın. Analog çubuklar asla mükemmel şekilde merkezlenmez. Bir ölü bölge olmazsa, karakteriniz veya kameranız sürekli kayacaktır.

Ölü bölgeleri yönetmenin basit bir yolu: Eğer Math.abs(axis) > 0.1 ise, değeri kullanın.

Dokunsal geri bildirim (Haptic feedback): Titreşimi tetiklemek için gamepad.vibrationActuator.playEffect kullanabilirsiniz. Bu, Chrome ve Edge'de iyi çalışır. Firefox kısmi destek sunar. Safari ise desteklemez.

Projeniz için temel çıkarımlar:

  • gamepadconnected ve gamepaddisconnected olaylarını dinleyin.
  • Bir "basma" (press) ile "basılı tutma" (hold) farkını tespit etmek için önceki düğme durumlarını takip edin.
  • Küçük çubuk hareketlerini görmezden gelmek için bir ölü bölge eşiği kullanın.
  • Birden fazla tarayıcıda test edin.
  • navigator.getGamepads() fonksiyonunun bir anlık görüntü (snapshot) döndürdüğünü unutmayın. Güncel verileri almak için onu döngünüzün içinde çağırmalısınız.

Kod yazmadan önce donanımınızı test etmek isterseniz GamepadTester.pro'yu kullanın. Size ham API verilerini ve eksen değerlerini gerçek zamanlı olarak gösterir.

Kaynak: https://dev.to/grezalazar23453/i-built-gamepad-support-into-my-web-app-using-pure-javascript-heres-everything-i-learned-51a5