Membuat game lumberjack dengan phaser

Diposting2022-01-18Diperbarui2022-08-27
html5 | phaser | tutorial

Halo semua, ini adalah tutorial dengan text untuk tutorial pembuatan game lumberjack / penebang pohon dengan menggunakan phaser framework. Jika mau liat videonya kalian bisa ke link youtube ini

Oh iya sebagai informasi, antara versi tulisan dan video mungkin tidak serupa, tapi memiliki tujuan sama, dan hasil akhir yang sama.

Pastikan sudah ada web server

Untuk web server ini bersifat wajib, karena phaser sendiri ga bisa di jalankan tanpa webserver. Untuk web servernya saya sendiri menggunakan xampp.

Untuk code editor sendiri bukanlah hal wajib tetapi ini bisa membantu dalam penulisan codenya. Untuk saat ini saya menggunakan vscode sebagai code editor.

Download assets dan phaser framework

Assets gambar didalam game yang akan di buat menggunakan kenney.nl, dan bisa di download :

phaser framework bisa didownload di http://phaser.io/download/stable dan pilih “min.js”. phaser.min.js sendiri adalah versi minifly dari phaser framework, atau versi yang di padatkan. (saat tulisan ini di buat phaser yang digunakan adalah versi 3.55.2)

Waktunya coding

Jika semuanya sudah siap, masukan assets dan phaser framework kedalam folder kerja, untuk lebih jelasnya bisa di cek gambar dibawah

Tampilan kerka kerja

Setelah itu buat basic html5, dan sekalian masukan phaser.min.js serta game.js kedalam tag script html5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>penembang pohon</title>
    <script src="src/phaser.min.js"></script>
    <script src="src/game.js"></script>
</head>
<body>
    
</body>
</html>

selanjutnya buat file bernama game.js (jika belum di buat) dan masukan code ini

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var config = {
    type:Phaser.AUTO,
    width:640,
    height:480,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};
 
var game = new Phaser.Game(config);
 
function preload(){
}
function create(){
}
function update(){
}

penjelasan code phaser

type : PHASER.AUTO dimana phaser akan menditeksi apakah browser yang kita gunakan support menggunakan webgl render, jika tidak maka akan menggunakan canvas renderer (line 2)

width & height mengatur ukuran lebar dan tinggi dari canvas (line 3 & 4)

scene yang akan kita panggil didalamnya, disini saya menggunakan 1 scene dengan mewakili 3 fungsi yang dibawahnya yaitu preload, create dan update (line 6 s/d 8)

Setelah itu membuat variable game untuk membuat object game itu sendiri, dan fungsi yang dibawahnya adalah mewakili dari scene. (line 12 s/d 19)

testing di localhost

tampilan kosong phaser

Disini kita bisa melihat ada kotak warna hitam, dan jika di inspect pada console maka akan ada tampilan versi dari phaser yang kita gunakan.

tampilkan gambar

ubah function preload kita menjadi seperti ini

1
2
3
4
function preload(){
    this.load.image('char', 'assets/char-0.png');
    this.load.image('log', 'assets/basic-log.png');
}

Pada fungsi preload kita memangil fungsi this.load.image(key, url) dimana kita memerintahkan phaser.scene untuk meload image di lokasi 'assets/char-0.png' dan memberikan nama 'char' yang akan kita panggil kembali nanti di dalam fungsi create. Begitu juga dengan fungsi dibawahnya

selanjutnya ubah fungsi create menjadi seperti ini 

1
2
3
4
function create(){
    this.add.image(200, 200, 'char');
    this.add.image(240, 200, 'log');
}

Di fungsi create kita memanggil this.add.image(posx, posy, ‘key’). Disini kita memerintahkan scene untuk menampilkan gambar dengan name ‘key’ yang sebelumnya kita load di atas.

Sekarang saatnya test dari gambar tersebut

tampilan char pada game

menabahkan event listener

Sejauh ini kita sudah berhasil me-load image dan menampilkanya, dan saatnya untuk memberikan eventListener dimana saat kita melakukan tindakan pada game, dan akan direspon oleh game tersebut.

Sebelumnya kita beri nama variable ‘char’ pada this.add.image(200, 200, 'char'); menjadi seperti ini :

1
var char = this.add.image(200, 200, 'char');

Dan pada function create, dibawah add.image

1
2
3
4
5
6
7
8
9
this.input.keyboard.on('keydown-RIGHT', ()=>{
    char.x = 280;
    char.flipX = true;
});

this.input.keyboard.on('keydown-LEFT', ()=>{
    char.x = 200;
    char.flipX=false;
});

this.input.keyboard.on(listener, fungsi), pada listener kita memanggil ‘keydown-RIGHT’, dan membuat arrow function untuk memindahkan char.x ke 280 dan membalikan pengambaran image karakter. Begitu juga dengan ‘keydown-LEFT’

Sekarang kalian bisa coba kembali dan liat apa hasilnya.

Penutup

Pada tutorial diatas kita udah belajar

  1. set config pada phaser game
  2. load image ke dalam game
  3. menampilkan image kedalam game
  4. membuat event lister untuk berinteraksi dengan keyboard

Jika kalian ingin membandingkan code dengan code yang kalian buat, bisa di cek link github berikut.

Okeh segitu dulu aja tutorial kali ini, dan ini adalah rangkaian tutorial series membuat game “penebang pohon” dengan phaser. Masih ada part berikutnya jadi di tunggu aja.