Pelajari cara menggunakan Gamepad API untuk meningkatkan kualitas game web Anda.
Kejutan rahasia halaman offline Chrome adalah salah satu rahasia yang paling buruk dalam sejarah ([citation needed]
,
tetapi klaim dibuat untuk efek dramatis). Jika Anda menekan tombol spasi atau, di perangkat
seluler, mengetuk dinosaurus, halaman offline akan menjadi game arcade yang dapat dimainkan. Anda mungkin mengetahui bahwa
Anda tidak perlu offline saat ingin bermain: di Chrome, Anda cukup membuka
about://dino
, atau, bagi Anda yang gemar teknologi, buka about://network-error/-106
. Namun, tahukah Anda bahwa ada 270 juta game Chrome Dino yang dimainkan setiap bulan?
Fakta lain yang mungkin lebih berguna untuk diketahui dan mungkin tidak Anda ketahui adalah bahwa dalam mode arcade, Anda dapat memainkan game dengan gamepad. Dukungan gamepad ditambahkan sekitar satu tahun yang lalu pada saat penulisan ini dalam commit oleh Reilly Grant. Seperti yang dapat Anda lihat, game ini, seperti project Chromium lainnya, sepenuhnya open source. Dalam postingan ini, saya ingin menunjukkan cara menggunakan Gamepad API.
Menggunakan Gamepad API
Deteksi fitur dan dukungan browser
Gamepad API memiliki dukungan browser yang sangat baik secara universal di desktop dan perangkat seluler. Anda dapat mendeteksi apakah Gamepad API didukung menggunakan cuplikan berikut:
if ('getGamepads' in navigator) {
// The API is supported!
}
Cara browser menampilkan gamepad
Browser menampilkan gamepad sebagai objek
Gamepad
. Gamepad
memiliki properti berikut:
id
: String identifikasi untuk gamepad. String ini mengidentifikasi merek atau gaya perangkat gamepad yang terhubung.displayId
:VRDisplay.displayId
dariVRDisplay
terkait (jika relevan).index
: Indeks gamepad di navigator.connected
: Menunjukkan apakah gamepad masih terhubung ke sistem.hand
: Enum yang menentukan tangan yang digunakan untuk memegang pengontrol, atau kemungkinan besar akan memegang pengontrol.timestamp
: Terakhir kali data untuk gamepad ini diperbarui.mapping
: Pemetaan tombol dan sumbu yang digunakan untuk perangkat ini, baik"standard"
maupun"xr-standard"
.pose
: ObjekGamepadPose
yang mewakili informasi pose yang terkait dengan pengontrol WebVR.axes
: Array nilai untuk semua sumbu gamepad, yang dinormalisasi secara linear ke rentang-1.0
–1.0
.buttons
: Array status tombol untuk semua tombol gamepad.
Perhatikan bahwa tombol dapat berupa digital (ditekan atau tidak ditekan) atau analog (misalnya, 78% ditekan). Itulah
alasan tombol dilaporkan sebagai objek GamepadButton
, dengan atribut berikut:
pressed
: Status tombol yang ditekan (true
jika tombol ditekan, danfalse
jika tidak ditekan.touched
: Status tombol yang disentuh. Jika tombol dapat mendeteksi sentuhan, properti ini adalahtrue
jika tombol disentuh, danfalse
jika tidak.value
: Untuk tombol yang memiliki sensor analog, properti ini mewakili jumlah tombol yang telah ditekan, yang dinormalisasi secara linear ke rentang0.0
–1.0
.hapticActuators
: Array yang berisi objekGamepadHapticActuator
, yang masing-masing mewakili hardware respons haptik yang tersedia di pengontrol.
Satu hal tambahan yang mungkin Anda temui, bergantung pada browser dan gamepad yang Anda miliki,
adalah properti vibrationActuator
. Fitur ini memungkinkan dua jenis efek getar:
- Dual-Rumble: Efek respons haptik yang dihasilkan oleh dua aktuator massa berputar eksentrik, satu di setiap pegangan gamepad.
- Trigger-Rumble: Efek respons haptik yang dihasilkan oleh dua motor independen, dengan satu motor terletak di setiap pemicu gamepad.
Ringkasan skema berikut, yang diambil langsung dari spesifikasi, menunjukkan pemetaan dan pengaturan tombol serta sumbu pada gamepad generik.
Notifikasi saat gamepad terhubung
Untuk mempelajari kapan gamepad terhubung, tangkap peristiwa gamepadconnected
yang dipicu pada
objek window
. Saat pengguna menghubungkan gamepad, yang dapat dilakukan menggunakan USB atau Bluetooth,
GamepadEvent
akan diaktifkan yang memiliki detail gamepad dalam properti gamepad
yang dinamai dengan tepat.
Berikut ini, Anda dapat melihat contoh dari pengontrol Xbox 360 yang saya miliki (ya, saya menyukai
game retro).
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"}
*/
});
Notifikasi saat gamepad terputus
Pemberitahuan tentang pemutusan koneksi gamepad terjadi secara analog dengan cara koneksi terdeteksi.
Kali ini aplikasi memproses peristiwa gamepaddisconnected
. Perhatikan bagaimana dalam contoh berikut
connected
sekarang menjadi false
saat saya mencabut pengontrol Xbox 360.
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
*/
});
Gamepad di loop game Anda
Mendapatkan gamepad dimulai dengan panggilan ke navigator.getGamepads()
, yang menampilkan array
dengan item Gamepad
. Array di Chrome selalu memiliki panjang tetap empat item. Jika tidak ada atau kurang dari empat gamepad yang terhubung, item mungkin hanya null
. Selalu pastikan untuk memeriksa semua item
array dan perhatikan bahwa gamepad "mengingat" slotnya dan mungkin tidak selalu ada di
slot pertama yang tersedia.
// When no gamepads are connected:
navigator.getGamepads();
// (4) [null, null, null, null]
Jika satu atau beberapa gamepad terhubung, tetapi navigator.getGamepads()
masih melaporkan item null
,
Anda mungkin perlu "mengaktifkan" setiap gamepad dengan menekan salah satu tombolnya. Kemudian, Anda dapat melakukan polling pada status gamepad
dalam loop game seperti yang ditunjukkan dalam kode berikut.
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();
Aktuator getaran
Properti vibrationActuator
menampilkan objek GamepadHapticActuator
, yang sesuai dengan
konfigurasi motor atau aktuator lain yang dapat menerapkan gaya untuk tujuan feedback
haptik. Efek haptic dapat diputar dengan memanggil Gamepad.vibrationActuator.playEffect()
. Satu-satunya
jenis efek yang valid adalah 'dual-rumble'
dan 'trigger-rumble'
.
Efek getaran yang didukung
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.
}
Getaran ganda
Dual-rumble menjelaskan konfigurasi haptic dengan motor getaran massa berputar eksentrik di setiap pegangan gamepad standar. Dalam konfigurasi ini, salah satu motor dapat menggetarkan seluruh gamepad. Kedua massa tidak sama sehingga efek masing-masing dapat digabungkan untuk membuat efek haptik yang lebih kompleks. Efek getaran ganda ditentukan oleh empat parameter:
duration
: Menetapkan durasi efek getaran dalam milidetik.startDelay
: Menetapkan durasi penundaan hingga getaran dimulai.strongMagnitude
danweakMagnitude
: Menetapkan tingkat intensitas getaran untuk motor massa berputar eksentrik yang lebih berat dan lebih ringan, yang dinormalisasi ke rentang0.0
–1.0
.
// 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,
});
};
Memicu getaran
Getaran pemicu adalah efek respons haptik yang dihasilkan oleh dua motor independen, dengan satu motor berada di setiap pemicu gamepad.
// 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,
});
};
Integrasi dengan Kebijakan Izin
Spesifikasi Gamepad API menentukan
fitur yang dikontrol kebijakan yang diidentifikasi oleh
string "gamepad"
. allowlist
default-nya adalah "self"
. Kebijakan izin dokumen menentukan
apakah konten dalam dokumen tersebut diizinkan untuk mengakses navigator.getGamepads()
. Jika dinonaktifkan dalam dokumen apa pun, tidak ada konten dalam dokumen yang akan diizinkan untuk menggunakan navigator.getGamepads()
, begitu pula peristiwa gamepadconnected
dan gamepaddisconnected
tidak akan diaktifkan.
<iframe src="index.html" allow="gamepad"></iframe>
Demo
Demo penguji gamepad disematkan dalam contoh berikut. Kode sumber tersedia di Glitch. Coba demo dengan menghubungkan gamepad menggunakan USB atau Bluetooth dan menekan tombolnya atau menggerakkan sumbunya.
Bonus: mainkan Chrome Dino di web.dev
Anda dapat memainkan Chrome dino dengan gamepad di situs
ini. Kode sumber tersedia di GitHub.
Lihat implementasi polling gamepad di
trex-runner.js
dan perhatikan cara emulasi penekanan tombol.
Agar demo gamepad Chrome dino berfungsi, saya telah menghapus game Chrome dino dari project Chromium inti (memperbarui upaya sebelumnya oleh Arnelle Ballane), menempatkannya di situs mandiri, memperluas implementasi gamepad API yang ada dengan menambahkan efek getaran dan menunduk, membuat mode layar penuh, dan Mehul Satardekar berkontribusi pada implementasi mode gelap. Selamat bermain game!
Link penting
Ucapan terima kasih
Dokumen ini ditinjau oleh François Beaufort dan Joe Medley. Spesifikasi Gamepad API diedit oleh Steve Agoston, James Hollyer, dan Matt Reynolds. Editor spesifikasi sebelumnya adalah Brandon Jones, Scott Graham, dan Ted Mielczarek. Spesifikasi Gamepad Extensions diedit oleh Brandon Jones. Gambar hero oleh Laura Torrent Puig.