Pengantar HTML5 Gamepad API

Indonesian (Bahasa Indonesia) translation by Taufan Prasetyo Basri (you can also view the original English article)

Seperti permainan HTML mulai secara bertahap meningkatkan popularitas, vendor mulai memperkenalkan beberapa api baru yang menarik untuk membuat game sedikit manis untuk kita pengembang dan pemain akhir kami. Salah satunya adalah GamepadAPI, yang memungkinkan Anda untuk menghubungkan gamepad konsol lama yang baik ke komputer Anda dan menggunakannya untuk game berbasis browser, plug and play style. Mari selami!

Pendahuluan: Apa itu Gamepad API?

Singkatnya, API Gamepad memungkinkan Anda untuk berinteraksi dengan browser Anda menggunakan pengontrol konsol video game, AKA a gamepad. Ini tidak memerlukan driver atau plugin khusus untuk bekerja, itu semudah plug and play!

Menjadi konsol gamer daripada desktop gamer sendiri, saya lebih memilih untuk berinteraksi dengan permainan yang menggunakan gamepad dan dengan munculnya mendatang HTML dan JavaScript berbasis game, ini akan menjadi alat yang sangat berguna dalam membuat permainan lebih mudah diakses bagi pengguna Anda .

Gamepad API tidak tersedia untuk rilis publik, tetapi kita dapat mulai menggunakannya untuk diri kita sendiri dengan versi preview dari Firefox. Jadi sebelum kita terjebak dalam, kita perlu beberapa hal.

Apa yang Anda perlukan

Seperti yang saya sebutkan, Gamepad API belum tersedia untuk rilis publik sehingga Anda harus terlebih dahulu membuat Firefox Nightly dan pastikan Anda telah menginstal Firebug add-on (hanya untuk tujuan debugging).

Juga, Anda tidak bisa lupa gamepad! Aku akan menggunakan kontroler PlayStation 3 untuk tutorial ini tapi Xbox controller akan melakukan saja.

Nightly - Unduhan untuk Windows, Mac dan Linux
Firebug - Download
A gamepad - PlayStation atau Xbox controller akan melakukan
Kabel USB untuk menghubungkan controller Anda ke komputer Anda

Setelah Anda menginstal setiap malam dan ditambahkan pada Firebug Anda siap untuk pergi!

(NB. Hari membangun Kromium memiliki API Gamepad mendukung, tetapi tutorial ini belum diuji terhadap mereka.)

Langkah 1: Menghubungkan Gamepad ke Browser Anda

Mari kita mulai dengan dasar HTML file (index.html), sumber "gamepad.js" (sebuah file JavaScript kosong).

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Introduction to the Gamepad API</title>
  </head>
  <body>
    <h1>Gamepad API</h1>

    <script src="gamepad.js"></script>
  </body>
</html>

Sambungan gamepad terdeteksi pendengar acara JavaScript sederhana, acara yang dipecat disebut "MozGamepadConnected". Jadi hal pertama yang perlu kita lakukan adalah menambahkan pendengar acara ke jendela untuk mendeteksi peristiwa itu.

Saya juga menambahkan fungsi callback yang akan log rincian acara untuk konsol di Firebug. Ini adalah informasi yang kami paling tertarik dan apa yang akan benar-benar Mari kita tahu bahwa kita terhubung gamepad berhasil.

function gamepadConnected(evt)
{
  console.log(evt); 
}
window.addEventListener('MozGamepadConnected', gamepadConnected);

Menjalankan index.html Anda dalam setiap malam dan membuka konsol di Firebug, di sini kami akan dapat melihat log acara dari fungsi callback kita.

Pastikan controller dimatikan dan tidak terhubung secara nirkabel ke konsol permainan. Tancapkan ke komputer Anda melalui USB dan kekuasaan controller, menonton event log di konsol.

The logged event of connecting a gamepad

Besar, kita memiliki gamepad menghubungkan ke browser, tidak ada plugin tambahan atau driver yang diperlukan!

Langkah 2: Melepaskan Gamepad

Hal ini penting untuk mengetahui apakah gamepad telah terputus juga, jadi mari kita lihat di acara "MozGamepadDisconnected".

Demikian pula untuk langkah pertama, menambahkan pendengar acara untuk acara putuskan dan fungsi panggilan balik untuk log keterangan peristiwa.

function gamepadDisconnected(evt)
{
  console.log(evt); 
}
window.addEventListener('MozGamepadDisconnected', gamepadDisconnected);

Jika Anda gamepad masih terhubung, me-refresh halaman Anda (yang Anda akan melihat acara terhubung login) dan kemudian lepaskan gamepad Anda dengan melepaskannya dari USB port. Anda harus mendapatkan log peristiwa seperti ini.

The logged event of disconnecting a gamepad

Sekarang kita tahu Kapan gamepad telah terhubung dan terputus, hal ini mungkin ide yang baik untuk merekam negara dalam variabel dan bersiap-siap untuk mendeteksi tombol acara!

var gamepadActive = false;

function gamepadConnected(evt)
{
  console.log(evt);
  gamepadActive = true;
}
function gamepadDisconnected(evt)
{
  console.log(evt);
  gamepadActive = false;
}

window.addEventListener('MozGamepadConnected', gamepadConnected);
window.addEventListener('MozGamepadDisconnected', gamepadDisconnected);

Langkah 3: Mendeteksi menekan tombol

Menekan tombol, sekali lagi, menggunakan pendengar acara dan fungsi callback dengan dua peristiwa, "MozGamepadButtonDown" dan "MozGamepadButtonUp".

Saya akan menyarankan untuk mencatat seluruh acara dari tombol tekan sendiri untuk melihat apa yang terjadi, tetapi informasi kunci yang perlu kita dapatkan dari acara ini adalah evt.button. Ini adalah nomor numerik dari tombol yang ditekan.

Fungsi panggilan balik kali ini mengambil parameter kedua, sebuah nilai boolean untuk menguji jika tombol ditekan atau dirilis. Kami menetapkan ini diri kita sendiri dalam fungsi panggilan balik dari acara pendengar.

function buttonPressed(evt, pressed)
{
  console.log(evt.button, pressed); 
}
window.addEventListener("MozGamepadButtonDown", function(evt) { buttonPressed(evt, true); } );
window.addEventListener("MozGamepadButtonUp", function(evt) { buttonPressed(evt, false); } );

Ini sekarang harus output id tombol yang ditekan dan apakah mereka didesak atau dirilis (benar untuk tombol ke bawah, palsu untuk tombol atas).

The logged button id's

Selanjutnya kami akan membuat sebuah array dengan semua tombol PlayStation 3 di. Indeks array akan memetakan ke id yang digunakan pada gamepad ini, dengan nilai-nilai yang menjadi nama tombol.

var gamepadActive = false,
    ps3Buttons = new Array();

ps3Buttons[12]  = 'triangle',
ps3Buttons[15]  = 'square',
ps3Buttons[14]  = 'cross',
ps3Buttons[13]  = 'circle',
ps3Buttons[4]   = 'up',
ps3Buttons[7]   = 'left',
ps3Buttons[6]   = 'down',
ps3Buttons[5]   = 'right',
ps3Buttons[10]  = 'L1',
ps3Buttons[8]   = 'L2',
ps3Buttons[11]  = 'R1',
ps3Buttons[9]   = 'R2',
ps3Buttons[1]   = 'L3',
ps3Buttons[2]   = 'R3',
ps3Buttons[16]  = 'PS',
ps3Buttons[0]   = 'select',
ps3Buttons[3]   = 'start';

Jika Anda menggunakan pengontrol yang berbeda, luangkan waktu untuk mencari tahu indeks mana yang sesuai dengan tombol mana, dan simpan info itu dalam array yang sama.

Jika kita sekarang memodifikasi fungsi buttonPressed() pernah jadi sedikit, kita dapat dengan mudah mengatakan mana tombol pada kontroler ditekan.

1	function buttonPressed(evt, pressed)
2	{
3	console.log(ps3Buttons[evt.button] + ' was pressed');
4	}

Give it a pergi! Menekan tombol pada controller sekarang harus login nama tombol yang ditekan. Ini akan jauh lebih mudah dimengerti daripada "tombol 5" (yang, dalam kasus saya, adalah pada D-pad).

Langkah 4: Mendeteksi Axis peristiwa

Mendeteksi sumbu peristiwa adalah pada dasarnya menjaga melacak yang mana kiri dan kanan analog tongkat pada gamepad diposisikan menggunakan acara "MozGamepadAxisMove".

Tambahkan event handler dan callback fungsi baru.

1	function moveAnalogSticks(evt) {
2	console.log(evt.axis, evt.value);
3	}
4	window.addEventListener("MozGamepadAxisMove", moveAnalogSticks);

Ini adalah apa yang kita dapatkan - membingungkan, kan?

The logged button id's

Ada hanya satu peristiwa dipecat oleh kedua stik analog; setiap peristiwa memberi kita salah satu dari empat mungkin axis dan nilai antara + 1.0 dan -1.0. AXIS 0 dan 1 milik kiri analog tongkat dan sumbu 2 dan 3 milik hak.

The logged button id's

Dalam diagram di atas, Anda akan melihat sumbu 0 dan 2 sesuai dengan sumbu x, dan 1 dan 3 sesuai dengan sumbu y. Dengan menggunakan sumbu x dan y untuk masing-masing individu analog tongkat, Anda dapat mengetahui arah mana analog tongkat menghadapi!

Pada gamepad yang berbeda, Anda mungkin memiliki sumbu lain. Misalnya, pemicu bahu pada pengontrol Xbox juga analog.

Langkah 5: Menempatkannya Dalam Praktek

Yang mencakup semua peristiwa-peristiwa yang kita saat ini dapat mengambil dari gamepad, jadi mari kita mempraktekkan apa yang kita pelajari.

Sekarang, saya tidak ingin pergi terlalu berat ke sisi pengembangan game hal, seperti kita berfokus pada apa yang kita gunakan untuk mengendalikan permainan itu sendiri. Salah satu hal penting untuk melihat, meskipun, adalah beralih skema kontrol. Karena tidak semua orang akan memiliki gamepad siap untuk tangan, kita perlu memastikan bahwa kami menyediakan kontrol untuk keyboard dan gamepad.

Langkah 6: Menyiapkan kanvas

Untuk mendapatkan sebuah demo kecil dan berjalan, membuat kanvas elemen dalam file html dengan id dari "permainan" dan mengatur lebar 600 dan tinggi untuk 540. Seperti yang Anda tahu, elemen kanvas biasanya digunakan untuk membuat HTML permainan pada.

Anda juga akan ingin untuk menyalin gambar "ship.png" dan "space.jpg" dari sumber download ke folder kerja Anda karena ini adalah apa yang akan kita render ke kanvas. Selain itu, menemukan beberapa grafis Anda sendiri untuk memiliki bermain dengan!

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Introduction to the Gamepad API</title>
  </head>
  <body>
    <h1>Gamepad API</h1>
    <canvas id="game" width="600" height="540"></canvas>
    <script src="gamepad.js"></script>
  </body>
</html>

Langkah 7: Membuat Loop Game

Sekarang bahwa kanvas elemen dalam DOM kami, kami ingin menciptakan sebuah permainan loop untuk membuat permainan kami.

Saya menggunakan shim untuk "requestAnimationFrame" oleh Paul Irlandia yang akan menjadi dasar untuk loop kami. Selanjutnya, kita bisa konteks 2D kanvas yang kita akan gunakan untuk menggambar di dan membuat dua objek gambar yang baru, satu untuk latar belakang dan satu untuk kami pesawat ruang angkasa.

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function(/* function */ callback, /* DOMElement */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();

var canvas  = document.getElementById('game'),
    ctx     = canvas.getContext('2d'),
    ship    = new Image(),
    space   = new Image();

space.src = "space.jpg";
ship.src  = "ship.png";

Berikutnya, pemain objek. Memiliki x dan y koordinat yang melacak di mana itu harus muncul di atas kanvas; empat arah negara (atas, bawah, kiri dan kanan) agar kita bisa tahu yang cara kapal bergerak; fungsi render(), yang pertama panggilan updatePosition() dan kemudian menarik gambar kapal ke kanvas berdasarkan x dan y koordinat, dan akhirnya fungsi updatePosition() itu sendiri, yang tes untuk melihat arah mana kapal diatur untuk bergerak dan update posisi sebagaimana mestinya.

var player = {
  x: 200,
  y: 250,
  up: false,
  down: false,
  left: false,
  right: false,
  render: function() {
    this.updatePosition();
    ctx.drawImage(ship,this.x,this.y);
  },
  updatePosition: function() {
    this.up     ? this.y-- : false;
    this.down   ? this.y++ : false;
    this.left   ? this.x-- : false;
    this.right  ? this.x++ : false;
  }
}

Setelah itu kita memiliki fungsi "renderGame" kami yang menarik gambar latar belakang ruang ke kanvas pertama, kemudian menarik kami pesawat ruang angkasa di atas itu.

Dan akhirnya, kita loop. Fungsi ini menyebut dirinya sendiri lagi dan lagi, setiap kali yang memanggil fungsi "renderGame" kami.

function renderGame()
{
  ctx.drawImage(space,0,0);
  player.render();
}

;(function animloop(){
  requestAnimFrame(animloop);
  renderGame();
})();

Kanvas Anda seharusnya sudah memiliki ruang yang baik mencari latar belakang dengan sebuah pesawat ruang angkasa duduk di tengah-tengah itu - tidak terlalu menarik, aku tahu. Jadi mari kita tambahkan beberapa kontrol!

Langkah 8: Menghubungkan Kontrol Kapal

Pemain kami kode kami bernama empat tombol yang kami ingin kontrol kami kapal dengan. Ini cocok untuk nama-nama tombol dalam ps3Buttons [] array. Jadi, Semua harus kita lakukan adalah mengubah fungsi buttonPressed() kita pernah jadi sedikit dan kita akan bergerak.

var player = {
  ...
  up: false,
  down: false,
  left: false,
  right: false,
  ...
}

Sekarang bila gamepad tombol ditekan atau dirilis itu akan membuat keadaan dalam objek pemain, jadi ketika "naik" tombol ditekan, player.up = true/false akan ditetapkan.

function buttonPressed(evt, pressed)
{
  console.log(evt.button, pressed);
  player[ps3Buttons[evt.button]] = pressed ? true : false;
}

Kembali atas ke demo dan Anda harus mampu bergerak kapal Anda!

Langkah 9: Menambahkan mundur Keyboard

Karena tidak semua orang yang bermain game memiliki gamepad, Anda mungkin masih ingin mereka bermain game dengan keyboard.

Mari kita pertama membuat tombol [] array yang baru, dan peta tombol panah keyboard keyCode properti untuk tombol setara pada gamepad. Ini akan memungkinkan kita untuk menggunakan kembali fungsi buttonPressed() yang memanfaatkan gamepad.

var gamepadActive = false,
    ps3Buttons    = new Array(),
    keys          = new Array();

ps3Buttons[12]  = 'triangle',
ps3Buttons[15]  = 'square',
ps3Buttons[14]  = 'cross',
ps3Buttons[13]  = 'circle',
ps3Buttons[4]   = 'up',
ps3Buttons[7]   = 'left',
ps3Buttons[6]   = 'down',
ps3Buttons[5]   = 'right',
ps3Buttons[10]  = 'L1',
ps3Buttons[8]   = 'L2',
ps3Buttons[11]  = 'R1',
ps3Buttons[9]   = 'R2',
ps3Buttons[1]   = 'L3',
ps3Buttons[2]   = 'R3',
ps3Buttons[16]  = 'PS',
ps3Buttons[0]   = 'select',
ps3Buttons[3]   = 'start';

keys[38] = 4;
keys[37] = 7;
keys[40] = 6;
keys[39] = 5;

Sekarang kita perlu "onkeyup" dan "onkeydown" pendengar acara untuk tombol panah. Bila tombol ditekan atau dirilis, kami memastikan bahwa gamepad ini tidak digunakan. Kemudian kita mencegah tombol panah untuk melakukan tugas biasa (bergulir jendela browser naik atau turun dalam kasus ini) dan kemudian memanggil fungsi buttonPressed() yang sama yang memanggil gamepad.

Untuk melakukan ini, objek acara palsu diteruskan dengan kunci 'kode kunci' yang dipetakan ke item dalam array keys[], yang pada gilirannya, melewati ID tombol gamepad yang sesuai.

window.onkeydown = function(evt)
  {
    if (gamepadActive == false)
    {
      evt.preventDefault();
      buttonPressed({ button: keys[evt.keyCode] }, true);
    }
  }
window.onkeyup = function(evt)
  {
    if (gamepadActive == false)
    {
      evt.preventDefault();
      buttonPressed({ button: keys[evt.keyCode] }, false);
    }
  }

Ini sekarang harus membiarkan Anda menggunakan tombol panah untuk mengendalikan kapal ketika gamepad tidak terpasang, sementara masih membiarkan gamepad mengambil alih kalau sudah hadir.

Kesimpulan

Jadi kita telah membahas dasar-dasar menghubungkan gamepad ke komputer Anda, belajar bagaimana untuk menghubungkan ke peristiwa-peristiwa yang gamepad kebakaran, dan kemudian menggunakannya dalam praktek. Tidak lupa, jatuh kembali dukungan penting untuk keyboard!

Tantangan cepat bagi Anda dengan pengontrol selain PS3 Dual Shock: sesuaikan pemetaan tombol berdasarkan pengontrol mana saja yang terhubung.

Terima kasih telah meluangkan waktu untuk mempelajari tentang Gamepad API. Jika Anda memiliki pertanyaan, silakan tinggalkan mereka di komentar.