Tutorial Membuat Game Berbasis Web dengan Framework Phaser

Table of Contents

Sahabat blogger, kalian sudah mengenal Phaser belum? Minimal agak tahu lewat poastingan ini ya. Kali ini saya akan sedikit bagi-bagi pengalaman saya mengenai Framework phaser, dan bagaimana cara menggunakannya. 

Phaser itu apaan sih? Dunia web tidak bisa terlepas dengan yang namanya Framework, Phaser adalah salah satu framework javascript yang dirancang khusus sebagai sebuah engine untuk web game developer. So, phaser sejatinya dikhususkan untuk permainan berbasis web saja walaupun nantinya dapat dikembangkan ke ranah mobile. 

Mengapa saya memilih Phaser, bukan yang lain? Sebenarnya framework untuk engine game berbasis web banyak sekali, dan semuaya oke punya. Saya memilih phaser karena memang Phaser adalah engine pertama yang saya kenal. Dan telah membuat saya jatuh cinta pada pandangan pertama, karena fiturnya lengkap sekali untuk sekelas engine 2D, fitur yang saya kagumi adalah mendukung  implementasi fisika, misal : gravitasi, tumbukan, gerak parabola dll. Penerapan fisika itu sangat dibutuhkan dalam sebuah game. So, game yang akan dibuat dengan Phaser menjadi lebih mudah dan menarik. Oke cukup koar-koarnya, langsung kita praktik buat game. 

Bagaimana harus memulai?

Download masternya di web resmi phaser, ---> phaser.io, buka web resminya dan download master phaser via Github, (Pojok Kiri Bawah).

Setelah berhasil download, kalian akan mendapati folder phaser-master, 

Buka folder build, dan kalian akan menjumpai phaser.min bertipe javascript, file itu yang menjadi titik kunci untuk membuat game pertama kita. Copy file tersebut dan letakkan pada folder baru diluar folder phaser-master. 

misal : Saya letakkan dalam folder cobaPhaser yang didalamnya terdapat folder js yang berisikan phaser.min, tirukan ya ! tambahkan folder gambar untuk menampung sprite. Jadinya seperti ini : 

Sip, persiapan selesai, terus kita akan membuat apa? Kita akan membuat game sederhana, pokoknya sederhana, saya juga gak tahu nama gamenya apa, ikuti saya terus ya... 

Sprite apa yang kita butuhkan ?

silakan download disini, biar teman-teman punya bahan sprite ---> gambar.rar

Simpan, gambar-gambar yang telah didownload dalam folder gambar.

Mulai Ngoding !

Buka editor html teman-teman (saya pakai notepad++), sengaja saya buat image agar teman-teman berusaha mengetik sendiri kodenya, sehingga lebih paham bagaimana proses game terbentuk... Semangat ya?  ketikkan kode berikut :

simpan kode html diatas dengan nama index.html, saya simpan dalam folder cobaPhaser. Jadi, dalam folder cobaPhaser sudah ada 1 file dan 2 folder. Kemudian kita lanjutkan untuk menuliskan source code phasernya.

Coba, jalankan pada localhost, muncul screen hitam yang nantinya berfungsi sebagai layar game kita

Kita lanjutkan menuliskan source code untuk memanggil sprite :

fungsi preload adalah tempat dimana kita menuliskan url tempat directory sprite sedangkan fungsi create adalah memanggil sprite untuk ditampilkan pada layar, jika kita run di localhost, akan tampak sprite bintang saja karena sprite yang kita panggil pada fungsi create adalah bintang.

Selanjutnya, kita mengatur background tampilan, kita ambil gambar 'langit' kemudian memberikan alas 'pijakan' sebagai tempat sprite berjalan ataupun melompat. Tuliskan kode berikut pada fungsi create, tambahkan variable pijakan diatas fungsi create 

Hasil tanpilan ketika run : 

Selanjutnya, kita tambahkan pemain 'orang' yang nantinya difungsikan sebagai jagoan utama pada game, ketikkan source berikut tepat dibawah kode untuk pengaturan alas diatas. 

Berikut, hasil tampilan localhostnya, terdapat tambahan pemain orang, dipojok kiri bawah

Berikutnya, tambahkan variable pemain (var pemain ; )tepat diatas variable pijakan. Lantas, tulis kode berikut pada fungsi update, untuk meletakkan pemain tepat berada pada alas pijakan.

Hasil running : 

Langkah berikutnya, adalah mengaktifkan gerakan-gerakan pemain, tambahkan variable kursor (var tombol ;) dibawah variabel pemain dan variabel pijakan. 

pada function create, tambahkan kode berikut dibawah kode-kode yang telah ada sebelumnya : 

pada function update, tambahkan kode berikut, tulis dengan hati-hati, kesalahan sedikit saja mengakibatkan tampilan layar menjadi kosong.

hasilnya, run pada localhost, arahkan tombol keyboard pada ke kiri, kanan, dan atas. pemain akan mengikuti gerakan input tombol. 

proses selanjutnya adalah menambahkan bintang untuk diambil oleh sang pemain. pertama, tambahkan dahulu variabel baru bernama bintang (var bintang ; ) di bawah 3 variable yang sudah ada (variabel pemain, tombol, pijakan). 

pada fungsi create tambahkan kode berikut, untuk membuat bintang berjumlah 12 dengan pantulan acak : 

pada fungsi update, tambahkan kode berikut : 

Terdapat tambahan fungsi baru bernama ambilBintang, untuk mengatasi kondisi jika pemain menabrak bintang. buat fungsi baru seperti ini, tepat dibawah fungsi update : 

Hasilnya seperti berikut : 

Oke, kita memasuki proses finishing, tinggal menambahkan papan skornya, skor akan bertambah 10 apabila berhasil mengambil 1 bintang, dan terus bertambah sesuai dengan jumlah bintang yang diambil pemain.

tambahkan variabel skor dan TeskSkor, seperti ini :

Pada fungsi create tambahkan kode berikut :

Pada fungsi ambilBintang, tambahkan kode berikut :

Tara.... Game sederhananya udah jadi... seperti ini

Untuk sementara, sampai disini dulu tutorial tentang membuat game berbasis web menggunakan phaser. Jika ada teman-teman yang belum faham ataupun gagal dalam proses kodingnya jangan sungkan-sungkan bertanya. Saya harapkan agar teman-teman mengikuti tahap demi tahap mulai dari awal, agar paham bagaimana proses membuatnya, dan jika sudah paham dapat dikembangkan sendiri...

Semoga bermanfaat, teman-teman.....