Tutorial Membuat Game Berbasis Web dengan Framework Phaser

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

Subscribe to receive free email updates:

15 Responses to "Tutorial Membuat Game Berbasis Web dengan Framework Phaser"

  1. kak fauzan, mau tanya dong.. itu tampilan aku kok cuma background warna item sama gambar kotak warna ijo aja ya? aku cek codingnya udah pas kok.. itu kenapa ya kak? :(

    ReplyDelete
    Replies
    1. Jika koding udah pas, pastikan komponen pendukung seperti gambar dan sprite udah berada dalam satu direktori

      Delete
    2. udah di satu direktori juga kok kak tp gak bisa.. kira-kira saya bisa nanya-nanya via email gak kak? hehe..

      Delete
    3. Bisa... Bisa... Langsung ke fauzancharis@gmail.com

      Delete
  2. kak fauzan, pengaturan size untuk orangnya di line brp ya? soalnya dr photoshop sudah aku buat kecil tapi tampilannya tetap besar, dan kalau aku gunakan script
    game.load.spritesheet('orang', 'gambar/orang.png', 32, 48);

    orangnya ndak keluar, akhirnya aku bikin 0,0
    lebih dari itu ndak bisa.
    mohon bantuannya

    ReplyDelete
    Replies
    1. Coba mas download gambar.rar yang sudah saya sediakan diatas dan bisa dibandingkan dengan gambarnya mas

      Delete
  3. Ada tutorial untuk game Mobile gak. Dan cara memnjalankan player saat di sentuh.

    ReplyDelete
  4. kak mau tnya ni, pas buat sprite bintang,trus dijalankan cma keluar kotak hijau...mohon pencerahannya....kodingan udh pass dan file2 nya udh sama...

    ReplyDelete
    Replies
    1. pastikan ketika load spritesheet bintang, direktorinya udah bener gan

      Delete
  5. This comment has been removed by the author.

    ReplyDelete
  6. sebelumnya terima kasih gan, karna udah share Artikel ini.
    aku mau nanya ni gan, di dalam folder gambar, kan ada beberapa gambar, cuman hanya ada satu gambar orang.png, tapi di 1 gambar orang.png tersebut, ada beberapa gambar pergerakan. untuk membagi gambar tersebut supaya menjadi sebuah pergerakan, scripnya itu yang mana yaa ???
    oh ya...aku sudah mencobanya gan, dan berhasil :)

    ReplyDelete
  7. ka fauzan, terimakash banyak ilmunya. waah saya baru tau ada framework seprti ini. naah, kalau sudah jadi, cara memasukkan gamenya ke website itu, bagaimana prosesnya ka?

    ReplyDelete
    Replies
    1. Tinggal jalankan di loclhost, kalau punya hosting ya masukin hosting saja

      Delete
  8. gan mau tanya, nama database diphp nya apa ya gan.
    saya mendapat inspirasi dari program anda untuk membuat TA :D
    hehe

    ReplyDelete

Terima Kasih Telah Berkunjung, Silakan Berkomentar...
Kritik dan Saran Teman-Teman Sangat Memotivasi Saya (^_^)