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.

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

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

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.

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

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.

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.

Menurunkan pohon

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

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.

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

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.