Web oyunlarınızı bir üst seviyeye taşımak için Gamepad API'sini nasıl kullanacağınızı öğrenin.
Chrome'un çevrimdışı sayfasındaki paskalya yumurtası geçmişte en kötü saklanan sırlardan biridir ([citation needed]
,
ancak çarpıcı etkiye sahip olduğu iddia edilir). Mobil cihazınızda boşluk tuşuna basarsanız
dinozora dokunursanız çevrimdışı sayfa oynanabilir bir arcade oyunu haline gelir. Yeşil Ofis’in bir proje yöneticisinin
oyun oynarken çevrimdışı olmanız gerekmez: Chrome'da, istediğiniz zaman
about://dino
adresine veya içinizdeki "geek" için about://network-error/-106
adresine gidin. Peki, Biliyor muydunuz?
mevcut olduğunu
Her ay 270 milyon Chrome dinozor oyunu oynanıyor mu?
![Chrome dinozor oyununu içeren Chrome'un çevrimdışı sayfası.](https://web.developers.google.cn/static/articles/gamepad/image/chromes-offline-page-th-3d966d4a2f411.png?authuser=8&hl=tr)
Bilinmesi daha faydalı olan ve sizin farkında olmayabileceğiniz bir diğer husus da, arcade modunda oyunu oyun kumandasıyla da oynayabilirsiniz. Oyun kumandası desteği yaklaşık bir yıl önce bir zaman diliminde, taahhüt: Recep Hakim Gördüğünüz gibi bu oyun da diğer Chromium projesi, açık kaynak. İçinde Oyun Kumandası API'sini nasıl kullanacağınızı göstermek istiyorum.
Oyun Kumandası API'sini kullanma
Özellik algılama ve tarayıcı desteği
Gamepad API, hem Android'de hem de PC'de tarayıcı desteğine sahiptir ve mobil cihazlar. Oyun Kumandası API'sinin desteklenip desteklenmediğini aşağıdaki snippet'i kullanarak tespit edebilirsiniz:
if ('getGamepads' in navigator) {
// The API is supported!
}
Tarayıcı, oyun kumandasını nasıl gösterir?
Tarayıcı, oyun kumandalarını Gamepad
olarak temsil eder
nesneler'i tıklayın. Gamepad
aşağıdaki özelliklere sahiptir:
id
: Oyun kumandası için bir tanımlama dizesi. Bu dize, reklamverenin markasını veya bağlı bir oyun kumandası.displayId
:VRDisplay.displayId
/ ilişkiliVRDisplay
(geçerliyse).index
: Gezinmedeki oyun kumandasının dizini.connected
: Oyun kumandasının sisteme hâlâ bağlı olup olmadığını gösterir.hand
: Kumandanın hangi eli tuttuğunu veya tutma olasılığının en yüksek olduğu eli tanımlayan bir sıralama inçtimestamp
: Bu oyun kumandası ile ilgili verilerin son güncellenme zamanı.mapping
: Bu cihaz için kullanılan düğme ve eksen eşlemesi,"standard"
veya"xr-standard"
.pose
:GamepadPose
nesnesi WebVR denetleyicisiyle ilişkili poz bilgilerini temsil eder.axes
: Oyun kumandasının tüm eksenleri için doğrusal olarak normalleştirilmiş değer dizisi-1.0
-1.0
.buttons
: Oyun kumandasının tüm düğmeleri için düğme durumları dizisi.
Düğmelerin dijital (basılmış veya basılmamış) ya da analog (örneğin, %78'ine basılmış) olabileceğini unutmayın. Bu
düğmelerin aşağıdaki özelliklerle GamepadButton
nesneleri olarak raporlanmasının nedeni budur:
pressed
: Düğmenin basılı durumu (düğmeye basılıysatrue
vefalse
basılı tutmanız gerekir.touched
: Düğmenin dokunulan durumu. Düğme, dokunmayı algılayabiliyorsa özellik değeritrue
, düğmeye dokunuluyorsafalse
olur.value
: Analog sensöre sahip düğmeler için bu özellik, analog sensöre düğmesine basıldı ve0.0
–1.0
aralığında doğrusal olarak normalleştirilmiş.hapticActuators
: Şunları içeren bir dizi:GamepadHapticActuator
Her biri kumandada kullanılabilen dokunsal geribildirim donanımını temsil eder.
Tarayıcınıza ve sahip olduğunuz oyun kumandasına bağlı olarak karşılaşabileceğiniz bir diğer şey de
vibrationActuator
özelliğidir. İki tür rumble efektine izin verir:
- Dual-Rumble: Oyun kumandasının her bir tutma noktasında birer tane olacak şekilde, dönen iki alışılmadık kütle aktüatörünün oluşturduğu dokunsal geribildirim efekti.
- Tetikleme-Rumble: Oyun kumandasının tetikleyicilerinin her birinde bir motor bulunan iki bağımsız motor tarafından oluşturulan dokunsal geribildirim etkisi.
Bu şemadan elde edilen şemaya genel bakış doğrudan özelliklere bakın, , genel bir oyun kumandasındaki düğmelerin ve eksenlerin haritasını ve yerleşimini gösteriyor.
Oyun kumandası bağlandığında bildirim alma
Bir oyun kumandasının ne zaman bağlandığını öğrenmek için ekranda tetiklenen gamepadconnected
etkinliğini dinleyin.
window
nesne algılandı. Kullanıcı, USB veya Bluetooth kullanarak bir oyun kumandası bağlandığında
oyun kumandasının ayrıntılarını uygun şekilde adlandırılmış gamepad
özelliğinde içeren bir GamepadEvent
tetiklenir.
Aşağıda, yakınlarda durduğum bir Xbox 360 kumandasını görebilirsiniz (evet, çok hoşuma gidiyorum).
retro oyun).
window.addEventListener('gamepadconnected', (event) => {
console.log('✅ 🎮 A gamepad was connected:', event.gamepad);
/*
gamepad: Gamepad
axes: (4) [0, 0, 0, 0]
buttons: (17) [GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton]
connected: true
id: "Xbox 360 Controller (STANDARD GAMEPAD Vendor: 045e Product: 028e)"
index: 0
mapping: "standard"
timestamp: 6563054.284999998
vibrationActuator: GamepadHapticActuator {type: "dual-rumble"}
*/
});
Oyun kumandasının bağlantısı kesildiğinde bildirim alma
Oyun kumandası bağlantı kesintilerinden haberdar olmak, bağlantıların algılanmasına benzer şekilde gerçekleşir.
Uygulama bu sefer gamepaddisconnected
etkinliğini dinler. Aşağıdaki örnekte bu yöntemin nasıl olduğuna dikkat edin
Xbox 360 kumandasını fişten çektiğimde connected
artık false
oluyor.
window.addEventListener('gamepaddisconnected', (event) => {
console.log('❌ 🎮 A gamepad was disconnected:', event.gamepad);
/*
gamepad: Gamepad
axes: (4) [0, 0, 0, 0]
buttons: (17) [GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton]
connected: false
id: "Xbox 360 Controller (STANDARD GAMEPAD Vendor: 045e Product: 028e)"
index: 0
mapping: "standard"
timestamp: 6563054.284999998
vibrationActuator: null
*/
});
Oyun döngünüzdeki oyun kumandası
Bir oyun kumandasına erişebilmek, navigator.getGamepads()
komutunun çağrılmasıyla başlar ve bu çağrı bir dizi döndürür.
Gamepad
öğeli. Chrome'daki dizi her zaman dört öğe uzunluğunda sabittir. Sıfır veya daha azsa
bağlı olduğunu varsayalım. Bir öğe yalnızca null
olabilir. Şu sayfadaki tüm maddeleri kontrol ettiğinizden emin olun:
oyun kumandalarının "hatırladığını" her zaman toplantıda bulunmayabilir.
ilk uygun zaman aralığı.
// When no gamepads are connected:
navigator.getGamepads();
// (4) [null, null, null, null]
Bir veya daha fazla oyun kumandası bağlı olmasına rağmen navigator.getGamepads()
yine de null
öğe bildiriyorsa
"uyanman" gerekebilir düğmelerinden birine basarak her oyun kumandasını kullanabilirsiniz. Ardından oyun kumandasını yoklayabilirsiniz.
durumlarına aşağıdaki kodda gösterildiği gibi ekleyebilirsiniz.
const pollGamepads = () => {
// Always call `navigator.getGamepads()` inside of
// the game loop, not outside.
const gamepads = navigator.getGamepads();
for (const gamepad of gamepads) {
// Disregard empty slots.
if (!gamepad) {
continue;
}
// Process the gamepad state.
console.log(gamepad);
}
// Call yourself upon the next animation frame.
// (Typically this happens every 60 times per second.)
window.requestAnimationFrame(pollGamepads);
};
// Kick off the initial game loop iteration.
pollGamepads();
Titreşim etkinleştirici
vibrationActuator
özelliği, GamepadHapticActuator
dokunma teknolojisi için güç uygulayabilen motor veya diğer aktüatörlerin konfigürasyonu
geri bildirim. Dokunsal efektler, Gamepad.vibrationActuator.playEffect()
çağrılarak oynatılabilir. Tek
geçerli efekt türleri şunlardır: 'dual-rumble'
ve 'trigger-rumble'
.
Desteklenen rumble efektleri
if (gamepad.vibrationActuator.effects.includes('trigger-rumble')) {
// Trigger rumble supported.
} else if (gamepad.vibrationActuator.effects.includes('dual-rumble')) {
// Dual rumble supported.
} else {
// Rumble effects aren't supported.
}
İkili gürültü
Dual-rumble, standart bir oyun kumandasının her tutma yerinde alışılmadık dönen kütle titreşim motoru. Bu yapılandırmada, her iki motor da oyun kumandasını tüm titreştirebilir. İki kütle eşit değildir, bu nedenle her birinin efektleri birleştirip daha karmaşık dokunma efektleri oluşturmak için kullanılabilir. İkili rulo efektleri şu dört parametreyle tanımlanır:
duration
: Titreşim etkisinin süresini milisaniye cinsinden ayarlar.startDelay
: Titreşim başlatılana kadar geçecek gecikme süresini ayarlar.strongMagnitude
veweakMagnitude
: Daha ağır ve düşük için titreşim yoğunluğu seviyelerini ayarlayın0.0
–1.0
aralığına göre normalleştirilmiş, daha hafif eksantrik dönen kütle motorları.
// This assumes a `Gamepad` as the value of the `gamepad` variable.
const dualRumble = (gamepad, delay = 0, duration = 100, weak = 1.0, strong = 1.0) => {
if (!('vibrationActuator' in gamepad)) {
return;
}
gamepad.vibrationActuator.playEffect('dual-rumble', {
// Start delay in ms.
startDelay: delay,
// Duration in ms.
duration: duration,
// The magnitude of the weak actuator (between 0 and 1).
weakMagnitude: weak,
// The magnitude of the strong actuator (between 0 and 1).
strongMagnitude: strong,
});
};
Sarsıntıyı tetikle
Tetikleme gürültüsü, oyun kumandasının tetikleyicilerinin her birinde bir motor bulunan iki bağımsız motor tarafından oluşturulan dokunsal geribildirim etkisidir.
// This assumes a `Gamepad` as the value of the `gamepad` variable.
const triggerRumble = (gamepad, delay = 0, duration = 100, weak = 1.0, strong = 1.0) => {
if (!('vibrationActuator' in gamepad)) {
return;
}
// Feature detection.
if (!('effects' in gamepad.vibrationActuator) || !gamepad.vibrationActuator.effects.includes('trigger-rumble')) {
return;
}
gamepad.vibrationActuator.playEffect('trigger-rumble', {
// Duration in ms.
duration: duration,
// The left trigger (between 0 and 1).
leftTrigger: leftTrigger,
// The right trigger (between 0 and 1).
rightTrigger: rightTrigger,
});
};
İzin Politikası ile Entegrasyon
Oyun Kumandası API spesifikasyonu,
politika tarafından kontrol edilen özelliği
"gamepad"
dizesi. Varsayılan allowlist
, "self"
değeridir. Bir dokümanın izin politikası,
söz konusu dokümandaki herhangi bir içeriğin navigator.getGamepads()
ürününe erişmesine izin verilip verilmediğini Şu kuruluş biriminde devre dışı bırakılmışsa:
dokümandaki hiçbir içeriğin navigator.getGamepads()
kullanmasına izin verilmeyecek veya
gamepadconnected
ve gamepaddisconnected
etkinlikleri tetiklenir.
<iframe src="index.html" allow="gamepad"></iframe>
Demo
Aşağıdaki örnekte oyun kumandası test kullanıcısı demosu yerleştirilmiştir. Kaynak kodu Glitch'te kullanılabilir. Demoyu denemek için bir düğmelerinden birine basan veya herhangi bir eksenini hareket ettiren oyun kumandası.
Bonus: web.dev'de Chrome dino oynayın
Oyun kumandanızla Chrome Dinozor'u bu cihazda oynayabilirsiniz
çok sitem var. Kaynak koduna GitHub'da ulaşabilirsiniz.
Oyun kumandası yoklama uygulamasına göz atın:
trex-runner.js
tuşlara basma işleminin nasıl emüle olduğuna dikkat edin.
Chrome dinozor oyun kumandası demosunun çalışması için , Chrome dinozor oyununu temel Chromium projesinden çıkarttı ( daha önce Arnelle Ballane), videoyu bağımsız bir siteye yerleştirdi, örtme ve titreşim efektleri eklenerek mevcut oyun kumandası API uygulaması, tam ekran oluşturuldu ve Mehul Satardekar koyu mod katkısıyla hakkında bilgi edindiniz. İyi oyunlar dileriz!
Faydalı bağlantı
Teşekkür
Bu belge, François Beaufort ve Joe Potpur. Gamepad API spesifikasyonu şu kullanıcı tarafından düzenlendi: Steve Agoston, James Hollyer ve Matt Reynolds. Eski spesifikasyon editörleri Brandon Jones, Scott Graham ve Ted Mielczarek Oyun Kumandası Uzantıları özelliği, Brandon Jones Laura Torrent Puig'in hero resmi.