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

Penyederhanaan Input Game

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Kholisa Nurrahmah (you can also view the original English article)

Bayangkan sebuah karakter game bernama "Bob the Butcher" berdiri di ruang gelap sendiri selagi gerombolan zombie sosis mutant mulai menerjang lewat pintu dan jendela yang dirusak. Pada titik ini, akan menjadi ide yang bagus bagi Bob untuk mulai menghancurkan zombie sosis menjadi potongan daging yang kecil, tetapi bagaimana Bob melakukannya di game cross-platform?  Akankah pemain game harus menekan satu atau lebih tombol keyboard, klik mouse, mengetuk layar, atau menekan tombol pada gamepad?

Saat memprogram game cross-platform, hal ini merupakan sesuatu yang pasti menghabiskan banyak waktu anda jika anda tidak mempersiapkannya. Jika anda tidak berhati-hati, anda bisa berakhir dengan pernyataan berserakan besar-besaran atau mengganti pernyataan untuk berurusan dengan semua perangkat input yang berbeda.

Pada tutorial ini, kita akan membuat segalanya menjadi lebih sederhana dengan membuat kelas tunggal yang akan menyatukan perangkat input yang banyak. Tiap contoh kelas akan menampilkan aksi atau kelakuan game yang spesifik (seperti "shoot", "run", atau "jump") dan bisa disuruh untuk mendengar ke berbagai kunci, tombol, dan penunjuk di berbagai perangkat input.

CatatanBahasa programming yang digunakan di tutorial ini adalah JavaScript, tetapi teknik yang digunakan untuk menyatukan berbagai perangkat input yang bisa dengan mudah ditransfer ke bahasa programming cross-platform manapun yang menyediakan APIs untuk perangkat input.

Menembak Sosis

Sebelum kita mulai menulis kode untuk kelas yang kita akan buat di tutorial ini, mari kita lihat bagaimana kelas sebenarnya digunakan.

GameInput adalah kelas yang kita akan buat, dan anda bisa lihat bagaimana ia akan membuat segalanya lebih sederhana.  Properti shoot.value adalah angka dan akan menjadi nilai positif jika tombol spasi pada keyboard ditekan atau right trigger pada gamepad ditekan. Jika kedua tombol spasi ataupun right trigger ditekan, nilainya akan menjadi nol. 

Memulai

Hal pertama yang perlu kita kerjakan adalah membuat  penutupan fungsi untuk kelas GameInput.  Sebagian besar kode yang akan kita tulis sebenarnya bukan bagian kelas, tetapi ia perlu diakses dari dalam kelas sementara menyisakan yang tersembunyi dari segala hal. Fungsi closure membolehkan kita melakukannya di JavaScript.

(Dalam bahasa programming seperti ActionScript atau C#, anda cukup menggunakan anggota kelas pribadi, tetapi sayangnya itu bukan kelebihan yang kita miliki di JavaScript.)

Sisa kode di tutorial ini akan mengganti komentar "code goes here".

Variabel

Kode hanya perlu variabel yang berguna untuk menegaskan bagian luar fungsi dan variabel tersebut seperti berikut.

Satuan seperti nilai KEYBOARDPOINTERGAMEPADDEVICE and CODE digunakan untuk menetapkan saluran perangkat input, seperti GameInput.KEYBOARD_SPACE, dan kegunaannya akan menjadi jelas nantinya di tutorial.

Objek __pointer berisi properti yang berhubungan ke mouse dan perangkat input layar sentuh dan objek __keyboard digunakan untuk memantau bagian kunci keyboard.  Susunan __inputs dan __channels digunakan untuk menyimpan contoh GameInput dan saluran perangkat input manapun ditambahkan ke contoh tersebut. Terakhir,  __mouseDetected and __touchDetected mengindikasikan apakah mouse atau layar sentuh telah terdeteksi.

CatatanVariable tidak harus menjadi awalan dengan dua garis bawah; itu adalah hanya konvensi coding yang telah saya pilih untuk digunakan untuk kode di tutorial ini. Ini membantu memisahkannya dari penetapan variabel dalam fungsi.

Fungsi

Inilah bagian penting kode, jadi anda mungkin ingin mengambil segelas kopi atau sesuatu sebelum membaca bagian ini!

Fungsi ini ditetapkan setelah variabel dalam bagian tutorial sebelumnya, dan fungsi ini ditetapkan di urutan kemunculan.

Fungsi utama ()  dipanggil di akhir kode—yaitu, di akhir fungsi closure yang sudah kita buat. Ia melakukan apa yang dikatakan di kotak dan membuat segalanya berjalan jadi kelas GameInput bisa digunakan.

Satu hal yang harus saya bawa ke perhatian anda adalah kegunaaan fungsi requestAnimationFrame(), yang merupakan bagian spesifikasi Animation Timing W3C. Game dan aplikasi modern menggunakan fungsi ini untuk menjalankan pembaharuan atau merender loop mereka karena ia telah sangat dioptimalkan untuk tujuan tersebut di sebagian besar website browser.

Fungsi pembaharuan () menggulung daftar contoh GameInput aktif dan memperbaharui hal-hal yang aktif. Fungsi updateInput() berikut ini agak panjang, jadi saya tidak akan menambah kode disini: anda bisa melihat kode secara penuh dengan mengunduh  file sumber.

Fungsi updateInput melihat ke saluran perangkat input yang telah ditambahkan ke contoh GameInput dan mengerjakan apa properti nilai contoh GameInput harusnya diatur. Seperti yang dilihat di kode contoh Shooting the Sausages properti nilainya mengindikasi jika saluran perangkat input telah dipicu, dan itu membiarkan game bereaksi secara berurutan, mungkin dengan memberitahu Bob untuk menembak zombie sosis mutant.

Fungsi updateValue () menentukan jika properti nilai contoh GameInput harus diperbaharui. Pembatasan biasanya dipakai untuk menghindari saluran input perangkat analog, seperti tombol dan stik gamepad, yang tidak mereset sendiri dengan benar dari pemicuan secara konstan contoh GameInput.  Ini terjadi agak sering dengan gamepad yang salah atau kotor.

Seperti fungsi updateInput (), fungsi updatePointer() berikut ini agak panjang jadi saya tidak akan menambah kode disini. Anda bisa melihat kode secara penuh dengan mengunduh file sumber.

Fungsi updatePointer memperbaharui properti di objek  __pointer. Singkatnya, fungsi mengawasi posisi pointer untuk memastikan ia tidak meninggalkan viewport window browser website, dan ia mengkalkulasikan jarak pointer telah bergerak sejak pembaharuan terbaru.

Fungsi mouseDetected() dan touchDetected() memberitahu kode untuk mengabaikan satu perangkat input atau lainnya.  Jika mouse terdeteksi sebelum layar sentuh, layar sentuh tersebut akan diabaikan. Jika layar sentuh terdeteksi sebelum mouse, mousenya akan diabaikan.

Fungsi pointerPressed()pointerReleased() dan pointerMoved() menangani input dari mouse atau layar sentuh. Ketiga fungsi ini semuanya hanya memperbaharui properti di objek  __pointer

Setelah ketiga fungsi ini, kita memiliki segenggam fungsi yang menangani agenda JavaScript standar. Fungsi ini telah dijelaskan, jadi saya tidak akan menambah kode di sini; anda bisa melihat kodenya secara penuh dengan mengunduh file sumber.

Fungsi inputAdd(), inputRemove() dan inputReset() disebut dari contoh GameInput (lihat di bawah). Fungsi memodifikasi susunan  __inputs dan __channels tergantung pada yang perlu dilakukan. 

Contoh GameInput dianggap aktif, dan ditambahkan ke susunan __inputs, ketika saluran perangkat input telah ditambahkan ke contoh GameInput. Jika contoh GameInput yang aktif telah menghapus semua saluran perangkat input, contoh GameInput dianggap tidak aktif dan terhapus dari susunan __inputs

Sekarang kita tiba di kelas GameInput.

Ya, itulah adanya—itulah kelas berbobot super ringan yang intinya bertindak sebagai sebuah antarmuka di kode utama. Properti nilai adalah angka yang berjarak dari 0 (nol) sampai 1 (satu).  Jika nilainya 0, artinya contoh GameInput tidak menerima apapun dari saluran perangkat input yang telah ditambahkan ke contoh.

Kelas GameInput memang memiliki sedikit properti statis, jadi kita akan menambahnya sekarang.

Saluran perangkat keyboard:

Saluran perangkat pointer:

Saluran perangkat gamepad:

Untuk menyelesaikan kode, kita hanya perlu memanggil fungsi utama().

Dan itulah semua kodenya. Semua tersedia di file sumber.

Lari! 

Sebelum kita menutup tutorial dengan kesimpulan, mari lihat ke satu contoh lagi cara kelas GameInput bisa digunakan. Kali ini, kita akan memberi kemampuan bergerak dan melompat kepada Bob karena gerombolan zombie sosis mutant mungkin menjadi terlalu banyak baginya untuk ditangani sendiri.

Bagus dan mudah. Perlu diingat bahwa properti nilai contoh GameInput berjarak dari 0 sampai 1, jadi kita bisa melakukan sesuatu seperti mengubah kecepatan gerakan Bob menggunakan nilai tersebut jika salah satu saluran perangkat input yang aktif adalah analog.

Bersenang-senanglah! 

Kesimpulan 

Game cross-platform semuanya memiliki satu hal yang sama: semua harus berurusan dengan banyaknya perangkat input game (kontroler), dan berurusan dengan perangkat input tersebut bisa menjadi tugas yang menantang. Tutorial ini telah mendemonstrasikan satu cara menangani berbagai perangkat input dengan kegunaan API yang simpel dan terpadu.

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.