Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Games
Gamedevelopment

Input Permainan Sederhana

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Seurion (you can also view the original English article)

Bayangkan watak permainan bernama 'Bob the Butcher' berdiri sendiri di dalam bilik yang gelap manakala gerombolan zombi sosej mutan mula mencurahkan melalui pintu dan tingkap pecah. Pada ketika ini, akan menjadi idea yang baik untuk Bob untuk memulakan letupan zombie sosej ke dalam potongan kecil daging, tetapi bagaimana Bob akan melakukannya dalam permainan lintas platform? Adakah pemain permainan perlu menekan satu atau lebih kekunci pada papan kekunci, klik tetikus, ketuk skrin atau tekan butang pada gamepad?

Apabila pengaturcaraan permainan lintas platform, ini adalah jenis perkara yang anda mungkin menghabiskan banyak masa anda berjuang dengan jika anda tidak bersedia untuk itu. Jika anda tidak berhati-hati, anda boleh berakhir dengan besar-besaran, seperti spaghetti jika pernyataan atau beralih pernyataan untuk menangani semua peranti input yang berbeza.

Dalam tutorial ini, kami akan membuat perkara lebih mudah dengan membuat satu kelas yang akan menyatukan pelbagai peranti input. Setiap contoh kelas akan mewakili tindakan permainan atau tingkah laku tertentu (seperti "menembak", "lari", atau "melompat") dan boleh diberitahu untuk mendengar pelbagai kunci, butang, dan petunjuk pada pelbagai peranti input.

Nota: Bahasa pengaturcaraan yang digunakan dalam tutorial ini adalah JavaScript, tetapi teknik yang digunakan untuk menyatukan pelbagai peranti input dengan mudah boleh dipindahkan ke mana-mana bahasa pengaturcaraan rentas lain yang menyediakan API untuk peranti input.

Menembak Sosej

Sebelum kita mula menulis kod untuk kelas yang akan kami buat dalam tutorial ini, mari kita lihat dengan cepat bagaimana kelas sebenarnya boleh digunakan.

GameInput adalah kelas yang akan kami buat, dan anda dapat melihat betapa mudahnya ia akan membuat sesuatu. Nilai shoot.value adalah nombor dan akan menjadi nilai positif jika bar ruang pada papan kekunci ditekan atau pencetus kanan pada gamepad ditekan. Sekiranya tiada bar ruang atau pemicu yang betul ditekan, nilai akan menjadi sifar.

Bermula

Perkara pertama yang perlu kita lakukan ialah membuat penutupan fungsi untuk kelas GameInput. Kebanyakan kod yang akan kita tulis sebenarnya bukan sebahagian daripada kelas, tetapi ia perlu diakses dari dalam kelas sambil tersembunyi dari segala-galanya. Penutupan fungsi membolehkan kami melakukan itu dalam JavaScript.

(Dalam bahasa pengaturcaraan seperti ActionScript atau C#, anda hanya boleh menggunakan ahli kelas peribadi, tetapi itu bukan kemewahan yang kita miliki dalam JavaScript, malangnya.)

Selebihnya kod dalam tutorial ini akan menggantikan komen "pergi ke sini".

Pembolehubah

Kod ini hanya memerlukan segelintir pembolehubah untuk ditakrifkan di luar fungsi, dan pembolehubah tersebut adalah seperti berikut.

Nilai papan kekunci KEYBOARD, POINTER, GAMEPAD, DEVICE dan CODE seperti biasa digunakan untuk menentukan saluran peranti input, seperti GameInput.KEYBOARD_SPACE, dan penggunaannya akan menjadi jelas kemudian dalam tutorial.

Objek __pointer mengandungi sifat yang berkaitan dengan tetikus dan peranti input skrin sentuh, dan objek __keyboard digunakan untuk menjejaki keadaan kunci papan kekunci. Arahan __input dan __channels digunakan untuk menyimpan contoh GameInput dan mana-mana saluran peranti masukan yang ditambahkan kepada contoh tersebut. Akhirnya, __mouseDetected and __touchDetected menunjukkan jika tetikus atau skrin sentuh telah dikesan.

Nota: Pembolehubah tidak perlu diawali dengan dua garis bawah; itu hanyalah persidangan pengekodan yang telah saya pilih untuk menggunakan kod dalam tutorial ini. Ia membantu untuk memisahkannya daripada pembolehubah yang ditakrifkan dalam fungsi.

Fungsi-fungsi

Di sini terdapat sebahagian besar kod, jadi anda mungkin mahu mengambil kopi atau sesuatu sebelum anda mula membaca bahagian ini!

Fungsi-fungsi ini ditakrifkan selepas pembolehubah-pembolehubah di bahagian sebelumnya dalam tutorial ini, dan ia ditakrifkan mengikut susunan rupa.

Fungsi utama() dipanggil pada akhir kod-iaitu pada akhir penutupan fungsi yang kami buat sebelumnya. Ia melakukan apa yang ia katakan pada timah dan mendapat semuanya berjalan supaya kelas GameInput boleh digunakan.

Satu perkara yang perlu saya ambil perhatian ialah penggunaan fungsi requestAnimationFrame(), yang merupakan sebahagian daripada spesifikasi W3C Animation Timing. Permainan dan aplikasi moden menggunakan fungsi ini untuk menjalankan kemas kini atau gelung rendering kerana ia telah sangat dioptimumkan untuk tujuan itu di kebanyakan pelayar web.

Fungsi kemas kini() berfungsi melalui senarai kejadian GameInput yang aktif dan mengemas kini yang diaktifkan. Fungsi updateInput() berikut agak panjang, jadi saya tidak akan menambah kod di sini; anda dapat melihat kod penuh dengan memuat turun fail sumber.

Fungsi updateInput() memandang saluran peranti masukan yang telah ditambahkan ke dalam contoh GameInput dan berfungsi apa nilai harta contoh GameInput yang perlu ditetapkan. Seperti yang dilihat dalam contoh Kod Menembak Sosej, nilai harta menunjukkan jika saluran input peranti dicetuskan, dan yang membolehkan permainan bertindak balas dengan sewajarnya, mungkin dengan memberitahu Bob untuk menembak zombi sosus mutan.

Fungsi updateValue() menentukan jika nilai sesuatu contoh GameInput harus dikemas kini. Ambangnya digunakan terutamanya untuk menghalang saluran masukan peranti analog, seperti butang gamepad dan tongkat, yang tidak menetapkan semula mereka dengan betul dari terus mencetuskan suatu contoh GameInput. Ini berlaku dengan gamepad yang rosak atau kotor.

Seperti fungsi updateInput(), fungsi updatePointer() berikut agak panjang supaya saya tidak akan menambah kod di sini. Anda dapat melihat kod penuh dengan memuat turun fail sumber.

Fungsi updatePointer() mengemas kini sifat dalam objek __pointer. Singkatnya, fungsi ini mengapit kedudukan penunjuk untuk memastikan ia tidak meninggalkan panel paparan tingkap pelayar web, dan ia mengira jarak penunjuk telah bergerak sejak kemas kini terakhir.

Fungsi mouseDetected() dan touchDetected() memberitahu kod untuk mengabaikan satu peranti input atau yang lain. Jika tetikus dikesan sebelum skrin sentuh, skrin sentuh akan diabaikan. Sekiranya skrin sentuh dikesan sebelum tetikus, tetikus akan diabaikan.

Fungsi pointerPressed(), pointerReleased() dan pointerMoved() mengendalikan input dari tetikus atau skrin sentuh. Ketiga fungsi ini hanya mengemas kini sifat dalam objek __pointer.

Selepas ketiga-tiga fungsi tersebut, kami mempunyai beberapa fungsi pengendalian acara JavaScript standard. Fungsi-fungsi itu adalah jelas dan saya tidak akan menambah kod di sini; anda dapat melihat kod penuh dengan memuat turun fail sumber.

Fungsi inputAdd(), inputRemove() dan inputReset() dipanggil dari contoh GameInput (lihat di bawah). Fungsi-fungsi mengubah suai __input dan __channels arrays bergantung kepada apa yang perlu dilakukan.

Contoh sebuah GameInput dianggap aktif, dan ditambahkan pada array __input, apabila saluran peranti masukan telah ditambahkan pada contoh GameInput. Sekiranya contoh GameInput yang aktif mempunyai semua saluran peranti input yang dikeluarkan, contoh GameInput dianggap tidak aktif dan dikeluarkan dari array __inputs.

Kini kami tiba di kelas GameInput.

Ya, itu sahaja ada-itu kelas super ringan yang pada dasarnya bertindak sebagai antara muka kepada kod utama. Harta nilai adalah nombor yang berkisar dari 0 (sifar) hingga 1 (satu). Jika nilai itu adalah 0, ini bermakna bahawa contoh GameInput tidak menerima apa-apa dari mana-mana saluran peranti input yang telah ditambahkan kepadanya.

Kelas GameInput mempunyai beberapa sifat statik, jadi kami akan menambahkan mereka sekarang.

Saluran peranti papan kekunci:

Saluran peranti penunjuk:

Saluran peranti Gamepad:

Untuk memuktamadkan kod, kita hanya perlu memanggil fungsi utama().

Dan itu semua kod. Sekali lagi, semuanya tersedia dalam fail sumber.

Melarikan Diri!

Sebelum kita membungkus tutorial dengan kesimpulan, mari kita lihat satu lagi contoh bagaimana kelas GameInput boleh digunakan. Kali ini, kita akan memberi Bob keupayaan untuk bergerak dan melompat kerana gerombolan zombi sosej mutan mungkin terlalu banyak untuk mengendalikannya secara bersendirian.

Bagus dan mudah. Ingatlah bahawa nilai harta permainan GameInput berkisar antara 0 hingga 1, jadi kita boleh melakukan sesuatu seperti menukar kelajuan pergerakan Bob menggunakan nilai itu jika salah satu saluran peranti input aktif adalah analog.

Berseronok!

Kesimpulan

Permainan lintas-platform semua mempunyai satu perkara yang sama: mereka semua perlu menangani pelbagai peranti input permainan (pengawal), dan berurusan dengan peranti input tersebut boleh menjadi tugas yang menakutkan. Tutorial ini telah menunjukkan satu cara untuk mengendalikan peranti input berganda dengan penggunaan API bersatu yang mudah.

Advertisement
Advertisement
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.