Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. HTML5 Gamepad API
Gamedevelopment

Input Pengontrol Xbox Sederhana dalam HTML5 Dengan PxGamepad

by
Difficulty:IntermediateLength:MediumLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Indonesian (Bahasa Indonesia) translation by Ade Khairul Umam (you can also view the original English article)

Permainan di web telah berjalan jauh dengan teknologi HTML5 seperti Canvas, WebGL, dan WebAudio. Sekarang dimungkinkan untuk menghasilkan grafik dan suara dengan ketelitian tinggi dalam browser. Namun, untuk memberikan pengalaman bermain game sejati, Anda membutuhkan perangkat input yang dirancang untuk bermain game. Gamepad API adalah standar yang diusulkan untuk W3C, dan dirancang untuk menyediakan API yang konsisten di seluruh browser.

Gamepad API memungkinkan pengguna untuk menghubungkan perangkat seperti Pengontrol Xbox ke komputer dan menggunakannya untuk pengalaman berbasis browser! Kelas pembantu kami, PxGamepad, lalu memetakan tombol dan indeks poros ke nama yang lebih dikenal seperti yang berlabel pada kontroler Xbox.

Jika Anda memiliki gamepad, coba mencolokkannya ke komputer Anda, klik gambar controller Xbox di bawah ini, dan tekan tombol. Anda akan melihat pengontrol menyala untuk mencerminkan setiap gerakan yang Anda lakukan!

Tutorial ini adalah yang ketiga dari seri tentang Flight Arcade — dibuat untuk menunjukkan apa yang mungkin pada platform web dan di browser Microsoft Edge baru dan mesin rendering EdgeHTML. Anda dapat menemukan dua artikel pertama di WebGL dan Web API, ditambah kode dan contoh interaktif untuk artikel ini, di flightarcade.com dan di sini di Tuts.

API fleksibel

Gamepad API dirancang secara cerdas dengan fleksibilitas dalam pikiran. Pada tingkat dasar, ini menyediakan akses ke tombol dan sumbu. Nilai tombol berkisar dari 0 hingga 1 inklusif, sedangkan sumbu berkisar dari -1 hingga 1 inklusif. Semua nilai dinormalisasi untuk rentang ini sehingga pengembang dapat mengharapkan perilaku yang konsisten antara perangkat.

Objek Gamepad menyediakan informasi rinci tentang produsen dan model Gamepad terhubung. Lebih berguna adalah properti "pemetaan" yang menggambarkan jenis umum gamepad. Saat ini hanya didukung pemetaan "standar", yang berhubungan dengan tata letak controller yang digunakan oleh banyak populer game konsol seperti Xbox.

Controller standar pemetaan memiliki dua tongkat, masing-masing yang diwakili oleh dua sumbu (x dan y). Ini juga mencakup D-pad, empat permainan tombol, tombol atas, dan memicu: Semua diwakili sebagai tombol di Gamepad API.

Status tombol laporan pengontrol Xbox saat ini 0 (keadaan normal) atau 1 (ditekan). Namun, Anda dapat membayangkan bahwa pengontrol masa depan dapat melaporkan jumlah gaya yang diterapkan pada setiap tombol tekan.

Xbox D-pad juga melaporkan nilai diskrit (0 atau 1), tetapi stik memberikan nilai terus menerus di seluruh rentang sumbu (-1 hingga 1). Presisi tambahan ini membuatnya lebih mudah untuk menerbangkan pesawat di misi Flight Arcade kami.

PxGamepad

Array tombol dan sumbu yang disediakan oleh Gamepad API adalah pemikiran maju dan sempurna sebagai API tingkat rendah. Namun, saat menulis gim, senang memiliki representasi gamepad tingkat tinggi seperti pengontrol Xbox One. Kami membuat kelas pembantu bernama PxGamepad yang memetakan indeks tombol dan sumbu ke nama yang lebih dikenal seperti yang berlabel pada pengontrol Xbox.

Saya akan berjalan melalui beberapa bagian perpustakaan yang menarik, tetapi kode sumber lengkap (Lisensi MIT) tersedia di GitHub.

API Gamepad standar memberikan status tombol sebagai larik tombol. Sekali lagi, API ini dirancang untuk fleksibilitas, memungkinkan pengontrol dengan berbagai jumlah tombol. Namun, ketika menulis sebuah permainan, jauh lebih mudah untuk menulis dan membaca kode yang menggunakan nama tombol dipetakan standar.

Misalnya, dengan API Gamepad HTML5, berikut adalah kode untuk memeriksa apakah pemicu kiri saat ini ditekan:

Kelas PxGamepad berisi metode pembaruan yang akan mengumpulkan status untuk semua tombol dan sumbu yang dipetakan standar. Jadi menentukan apakah leftTrigger ditekan semudah mengakses properti Boolean:

Sumbu di API Gamepad standar juga tersedia sebagai sebuah array nilai numerik. Sebagai contoh, berikut adalah kode untuk mendapatkan menormalkan x dan y nilai untuk tongkat kiri:

D-pad adalah kasus khusus, karena hal ini dianggap sebagai satu set empat tombol oleh API Gamepad HTML5 (indeks 12, 13, 14, dan 15). Namun, hal ini umum bagi pengembang untuk memungkinkan D-pad untuk digunakan dalam cara yang sama seperti salah satu tongkat. PxGamepad menyediakan tombol informasi untuk D-pad, tetapi juga mensintesis informasi axis seolah-olah D-pad adalah tongkat:

Batasan lain dari HTML5 Gamepad API adalah itu tidak memberikan tingkat tombol peristiwa. Hal ini umum untuk permainan pengembang ingin mengaktifkan satu peristiwa untuk memencet tombol. Di Flight Arcade, tombol pengapian dan rem adalah contoh yang bagus. PxGamepad melihat status tombol dan memungkinkan penelepon untuk mendaftarkan notifikasi pada rilis tombol.

Berikut adalah daftar lengkap dari nama tombol yang didukung oleh PxGamepad:

  • a
  • b
  • x
  • y
  • kiriAtas
  • kananAtas
  • pemicu Kiri
  • pemicu Kanan
  • select
  • start
  • tongkat Kiri
  • tongkat Kanan
  • dpadUp
  • dpadDown
  • dpadLeft
  • dpadRight

Mendapatkan Gamepad Saat Ini

Ada dua metode untuk mengambil objek gamepad. Gamepad API menambahkan metode ke objek navigator bernama getGamepads(), yang mengembalikan array dari semua gamepad yang terhubung. Ada juga gamepadconnected baru dan gamepaddisconnected peristiwa yang dipecat setiap kali gamepad baru terhubung atau terputus. Misalnya, berikut adalah cara pembantu PxGamepad menyimpan gamepad yang terhubung terakhir:

Dan di sini adalah penolong untuk mengambil gamepad standar pertama menggunakan navigator.getGamepads() API:

Kelas pembantu PxGamepad dirancang untuk skenario sederhana di mana seorang pengguna bermain game dengan gamepad yang dipetakan standar. Browser terbaru, seperti Microsoft Edge, sepenuhnya mendukung W3C Gamepad API. Namun, versi yang lebih lama dari beberapa browser lain hanya mendukung bagian dari spesifikasi yang muncul. PxGamepad mendengarkan acara yang terhubung dengan gamepad dan kembali ke meminta daftar semua gamepad jika diperlukan.

Masa depan Gamepad

Sementara PxGamepad berfokus pada skenario sederhana dan paling umum, Gamepad API sepenuhnya mampu mendukung banyak pemain, masing-masing dengan gamepad mereka sendiri. Salah satu peningkatan yang mungkin untuk PxGamepad mungkin adalah menyediakan kelas gaya manajer yang melacak koneksi beberapa gamepad dan memetakannya ke beberapa pemain dalam game. Cara lain yang memungkinkan pengguna untuk memetakan ulang atau menyesuaikan fungsi tombol pada gamepad mereka.

Kami juga senang tentang potensi Gamepad API untuk skenario non-game. Dengan maraknya WebGL, kami melihat berbagai kegunaan inovatif untuk 3D di web. Itu mungkin berarti menjelajahi Mt. Wilayah Everest dalam 3D dengan GlacierWorks, atau melihat Koleksi Assyrian dari British Museum berkat upaya CyArk untuk secara digital melestarikan situs dan artefak dunia yang penting.

Selama pengembangan Flight Arcade, kami sering menggunakan Blender dan alat 3D lainnya untuk memproses model untuk Babylon.js. Beberapa pengembang dan artis menggunakan perangkat yang disebut mouse 3D untuk membantu memanipulasi dan menavigasi model 3D. Perangkat ini melacak pergerakan satu tombol melalui enam sumbu! Mereka membuatnya sangat mudah dan cepat untuk memanipulasi model. Selain game, mereka digunakan dalam berbagai aplikasi menarik mulai dari teknik hingga pencitraan medis. Sambil menambahkan dukungan gamepad ke Flight Arcade, kami terkejut mengetahui bahwa Gamepad API mendeteksi SpaceMouse 3D kami dan menyediakan data gerakan untuk semua enam sumbu!

Sangat menyenangkan untuk membayangkan semua kemungkinan yang ditawarkan oleh Gamepad API baru. Sekarang adalah waktu yang tepat untuk bereksperimen dengan Gamepad API baru dan menambahkan kontrol presisi dan sangat menyenangkan untuk gim atau aplikasi Anda berikutnya!

Lebih Banyak Praktek Dengan JavaScript

Microsoft memiliki banyak pembelajaran gratis tentang banyak topik JavaScript sumber terbuka, dan kami memiliki misi untuk membuat lebih banyak dengan Microsoft Edge. Berikut ini beberapa yang perlu diperhatikan:

Dan beberapa alat gratis untuk memulai: Visual Studio Code, Azure Trial, dan alat pengujian lintas-browser — semua tersedia untuk Mac, Linux, atau Windows.

Artikel ini adalah bagian dari seri teknologi pengembang web dari Microsoft. Kami senang berbagi Microsoft Edge dan mesin rendering EdgeHTML baru dengan Anda. Dapatkan mesin virtual gratis atau uji jarak jauh di Mac, iOS, Android, atau perangkat Windows @ http://dev.modern.ie/.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.