Tutorial Membuat Game Berbasis Web dengan Framework Phaser

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