Membuat game lumberjack dengan phaser part 3

Halo,

Balik lagi untuk menulis tebang pohon, dan mohon maaf karena baru upload setelah sekian lama. 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.

focus

Untuk hari ini kita akan focus untuk menambahkan ranting, untuk membuat rintangan selain itu kita juga akan membuat setiap animasi yang sudah selesai dimainkan akan di letakan diatas, sehingga batang pohonya tidak akan habis2.

koding

Pertama kita membutuhkan gambar ranting untuk di render, dan ditampilkan kedalam gamenya. Sekarang tambahakan di dalam function preload untuk me-load gambar ranting.

function preload() {
  /**
   * file yang di load sebelumnya
   */
  this.load.image("ranting", "assets/branch-1.png");//tambahkan gambar baru
}

Perkenalan Container

Selanjutkan kita membutuhkan gameObject berbeda untuk mewadahi gambar2 (ranting dan batang pohon). Di Phaser kita akan menggunakan container, yang secara harfiah juga adalah game-object yang bisa mewadahi dari gameobject lain. Saat game object dimasukan ke container, maka container akan bertangung jawab untuk melakukan rendernya.

Sekarang kita persiapkah fungsi baru untuk membuat container. Fungsi di buat di dalam function create, dan di panggil di awal.

function create() {
    this.tambahkanBatangPohon = function () { //fungsi untuk menambahkan container
        var container = this.add.container(0, 0);

        var batangPohon = this.add.image(0, 0, "log");
        var rantingKanan = this.add.image(45, 0, "ranting");
        var rantingKiri = this.add.image(-45, 0, "ranting");
        rantingKiri.setFlip(true);

        container.add(batangPohon);
        container.add(rantingKanan);
        container.add(rantingKiri);

        return container;
    };

    //fungsi yang sebelumnya
}

Jika sudah, kita akan mengubah code yang sebelumnya memanggil hanya batang pohon, kita akan ganti menjadi seperti ini

for (var i = 1; i < 10; i++) {
    //var batangPohon = this.add.image(240, config.height-70*i, 'log'); //fungsi sebelumnya
    var batangPohon = this.tambahkanBatangPohon();

    batangPohon.setPosition(240, config.height - 70 * i); //mengatur  posisi batang pohon
    arrayBatangPohon.push(batangPohon);
}

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

Array pooling object

Selanjutnya kita membuat array pool object untuk meletakan gameObject container yang tidak terpakai(setelah animasi selesai). Jadi dari pada membuat object baru dan menghancurkanya (destroy) lebih baik kita menggunakan object yang sama tetapi kondisinya sedang tidak terpakai.

Pertama yang harus dilakukan adalah membuat array baru untuk gameObject Container yang tidak terpakai.

var game = new Phaser.Game(config);
var arrayBatangPohon = [];
var poolArrayBatangPohonTidakTerpakai = []; //tambahankan array pool object

Jika sudah, cari fungsi animasiBatangPohon dan kita akan ubah menjadi seperti dibawah

/**
 * tambahkan onComplete dan pangil poolArrayBatangPohonTidakTerpakai
 **/
timeline.add({
    targets: batangpohon,
    ease: "Linear",
    duration: 300,
    y: 500,
});
timeline.add({
    targets: batangpohon,
    ease: "Linear",
    duration: 300,
    y: 700,
    onComplete: function () {
        poolArrayBatangPohonTidakTerpakai.push(batangpohon); // kita tambahkan fungsi ini
    },
});

Jadi inti code diatas adalah, setelah tween selesai, maka kita akan meletakan object tersebut kedalam array poolArrayBatangPohonTidakTerpakai.

Mengisi batang pohon

Setelah pooling object selesai, kita membuat fungsi baru yang akan memeriksa adakah container object yang tidak terpakai di dalam poolArrayBatangPohonTidakTerpakai.

this.mengisiBatangPohon = function () {
    var batangPohonBaru = null;
    if (poolArrayBatangPohonTidakTerpakai.length > 0) {
        batangPohonBaru = poolArrayBatangPohonTidakTerpakai[0];
        poolArrayBatangPohonTidakTerpakai.shift();
    } else {
        batangPohonBaru = this.tambahkanBatangPohon();
    }
    return batangPohonBaru;
};

Letakan fungsi tersebut dibawah fungsi tambahkanBatangPohon yang sebelumnya di buat. Jadi inti dari fungsi diatas adalah memeriksa adakah gameobject container yang tidak terpakai, jika ada kita ambil yang paling depan, tetapi jika tidak ada maka kita akan membuat baru.

Yang terakhir adalah kita tambahkan sedikit codingan baru di dalam fungsi turunkanBatangPohon

this.turunkanBatangPohon = function(){
    for(var i =0; i< arrayBatangPohon.length; i++){
        batangPohon = arrayBatangPohon[i];
        batangPohon.y = config.height-70*(i+1);
    }   
    //tambahkan code ini dibawah
    var batangPohonBaru = this.mengisiBatangPohon();
    var batangPohonTeratas = arrayBatangPohon[arrayBatangPohon.length - 1];

    batangPohonBaru.y = batangPohonTeratas.y - 70;
    batangPohonBaru.x = batangPohonTeratas.x;

    //batangPohonBaru.setPosition(batangPohonTeratas.x, batangPohonTeratas.y-70);

    batangPohonBaru.angle = 0;
    arrayBatangPohon.push(batangPohonBaru);
}

Hal yang kita lakukan diatas adalah dengan memanggil fungsi mengisiBatangPohon yang nntinya akan membuat batang pohon baru dan meletakan batang pohon baru di posisi teratas dan mereset angle menjadi 0, serta memasukanya kedalam arrayBatangPohon.

Jika semua sudah kita bisa lakukan testing didalamnya

Penutup

Pada tutorial diatas kita udah belajar

1. Mengenal Container pada Phaser3
2. Menggunakan pooling object

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.