Membuat game lumberjack dengan phaser part 2

Halo,

Saatnya melanjutkan tulisan kemarin, dan membuat looping pohon. Bagi yang ingin mendownload file kemarin kalian bisa ke link ini

catatan

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.

koding

Pertama yang kita lakukan adalah memindahkan posisi karakter kita ke posisi, selajutnya buat looping menggunakan for untuk membuat batang pohon.

1
2
3
4
5
6
7
8
//pindahkan karakter pada botom area
var char = this.add.image(200, 570, 'char');

//looping array batang pohon
for(var i =1; i< 10; i++){
var batangPohon = this.add.image(240, config.height-70*i, 'log');
arrayBatangPohon.push(batangPohon);
}

jangan lupa juga menambahkan variable untuk arrayBatangPohon dibawah variable game

1
2
var game = new Phaser.Game(config); //codingan sebelumnya
var arrayBatangPohon = []; //tambahkan array batang pohon

Kita bisa check kembali code kita, dan refresh browser untuk memastikan semuanya sesuai

tampilan tiang pohon

animasi pohon ditebang

Lanjut dengan membuat function tween untuk memindahkan pohon saat pohon di tebang. Jadi yang sebelumnya even listener yang hanya memindahkan posisi player, sekarang di tambahkan dengan mengambil array batang pohon paling awal dan membuat fungsi tween seperti code dibawah.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
this.input.keyboard.on('keydown-RIGHT', ()=>{
char.x = 280;
char.flipX = true;
//tumbangkan pohon ke kiri
var batangpohon = arrayBatangPohon[0]; //tambahkan code batang pohon
this.animasiBatangPohon(batangpohon, "kiri"); //memanggil fungsi batang pohon
});

this.input.keyboard.on('keydown-LEFT', ()=>{
char.x = 200;
char.flipX=false;
//tumbangkan pohon ke kiri
var batangpohon = arrayBatangPohon[0]; //tambahkan code batang pohon
this.animasiBatangPohon(batangpohon, "kanan"); ////memanggil fungsi batang pohon
});

//function animasi batang pohon
this.animasiBatangPohon=function(batangpohon, posisilempar){
var xLemparan = 360;
if(posisilempar == "kiri") {
xLemparan = 120;
}
//tween animasi
this.tweens.add({
targets:batangpohon,
ease:"Linear",
duration:600,
x:xLemparan
})
}

Testing kembali untuk memastikan kodenya berhasil

tebang pohon gif

animasi tween chain dan rotasi

Setelah itu kita membuat tween timeline (atau lebih familiar dengan istilah tween chain dibeberapa game engine). Kita ubah code diatas dengan menambahkan variable tweenline dan membuat rotasi saat pohon pindah posisi.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
this.animasiBatangPohon=function(batangpohon, posisilempar){
//buat timelinetween
var timeline = this.tweens.createTimeline();
var xLemparan = 360;
if(posisilempar == "kiri") {
xLemparan = 120;
}
//disini kita menabahakan terbang ke atas dan kebawah
timeline.add({
targets:batangpohon,
ease:"Linear",
duration:300,
y:500
})
timeline.add({
targets:batangpohon,
ease:"Linear",
duration:300,
y:700
})
timeline.play(); //menjalankan fungsi tween timeline phaser

this.tweens.add({
targets:batangpohon,
ease:"Linear",
duration:600,
x:xLemparan,
angle:720 // kita tambahkan angle untuk rotasi batang pohon
})
}

Kalian bisa mencobanya dan cek apakah kode diatas berjalan.

Jika kalian melakukan testing, sejauh ini hanya 1 batang pohon saja yang di animasi, seharusnya setiap katakter bergerak maka akan batang pohon akan di tebang dan batang yang berada di atasnya akan turun.

Kita akan mengubah array batang pohon dan membuang array pada posisi awal, dengan menambahkan shift() pada arrayBatangPohon di dalam arrow funtion input.keyboard.on dan juga panggil function this.turunkanBatangPohon() sehingga codenya menjadi seperti ini

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
this.input.keyboard.on('keydown-RIGHT', ()=>{
char.x = 280;
char.flipX = true;
//tumbangkan pohon ke kiri
var batangpohon = arrayBatangPohon[0];
this.animasiBatangPohon(batangpohon, "kiri");
arrayBatangPohon.shift(); //kita menambahkan code ini yaitu menghapus array pada index awal
this.turunkanBatangPohon(); //kita memanggil fungsi turunkan batangpohon
});

this.input.keyboard.on('keydown-LEFT', ()=>{
char.x = 200;
char.flipX=false;
//tumbangkan pohon ke kiri
var batangpohon = arrayBatangPohon[0];
this.animasiBatangPohon(batangpohon, "kanan");
arrayBatangPohon.shift(); //kita menambahkan code ini yaitu menghapus array pada index awal
this.turunkanBatangPohon(); //kita memanggil fungsi turunkan batangpohon
});

Jika sudah, jangan lupa untuk membuat function turunkanBatangPohon dan bisa letakan dibawah animasiBatangPohon.

1
2
3
4
5
6
7
8
//function animasibatangPohon

this.turunkanBatangPohon = function(){
for(var i =0; i< arrayBatangPohon.length; i++){
batangPohon = arrayBatangPohon[i];
batangPohon.y = config.height-70*(i+1);
}
}

Testing kembali dan seharusnya sekarang batang pohon akan turun.

tebang pohon rotasi gif

Penutup

Pada tutorial diatas kita udah belajar

  1. Menggunakan animasi tween dan tween timeline
  2. configurasi tween properties

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.