Bermain dengan Sprite dan Animations pada phaser3

Diposting2023-04-01Diperbarui2023-04-01
html5 | phaser | tutorial

Halo,

Udah lama yah ga lanjutin tulisan soal phaser. Kali ini saya mencoba memperkenalkan gameobject sprite berserta animations. Sprites berfungsi menampilkan object seperti images, tetapi perbedaan sprites and images adalah object sprites bisa di buat menjalakan animasi sedangakan hal itu tidak berlaku pada images. Untuk penjelasan lebih lengkap kalian bisa cek ke dokumentasi phaser tentang sprite

Catatan

ini adalah tutorial dengan text dari video youtube saya “Bermain dengan Sprite dan Animations pada phaser3”. 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.

Siapin assetsnya

Seperti biasa assets yang saya gunakan adalah kenny assets. Karena saya saya hanya ingin mengambil sebagian assetsnya maka saya akan gunakan single image lalu, saya merge assetsnya menjadi seperti ini. (saya mengambil assets yang saya perlu)

sprite sheets

Koding

Setelah sudah dilakukan pengambilan assetsnya pastikan object sudah di load terlebih dahulu. Oh iya karena kita loadnya spritesheets maka akan ada perbedaan sedikit untuk meloadnya. Kita harus memberikan ukuran lebar dan tinggi untuk spritesheetsnya.

1
2
3
4
5
6
7
preload(){
    this.load.spritesheet("kenny-player", "assets/spritesheet.png", {
      frameHeight: 256,
      frameWidth: 128,
    });
}

jika sudah di load, selanjutkan panggil gameobject sprites, biasanya saya meletakanya pada function create()

1
2
3
create(){
    this.add.sprite(400, 300, "kenny-player");
}

nah dari kode diatas maka akan di tampilkan seperti gambar di bawah ini. Untuk saat ini gambar masih belum bergerak, karena belum disiapkan animations.

object static kenny

untuk membuat gambar bergerak, kita harus membuat animation set terlebih dahulu, setelah itu baru kita panggil lewat sprite yang sudah kita buat diatas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
create(){
    this.objectsrprites = this.game.add.sprite(400, 300, "kenny-player");

    //tambahkan kode ini
    this.anims.create({
      key: "moveAnimation",
      frames: this.anims.generateFrameNumbers("kenny-player", { frames: [2, 3] }),
      frameRate: 6,
      repeat: -1,
    });

    //memanggil animasi idle
    this.objectsrprites.play("moveAnimation");
}

oh iya peletakan kode animations tersebut boleh juga di buat sebelum object script di buat, tetapi pastikan animation sudah di buat saat kita ingin memainkan animasi yang sudah di buat.

Supaya berasa pergerakan objectnya saya akan membuat sedikit event berjalan menggunakan keyboard, dan membuat idle saat object tidak di pencet apapun.

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
31
32
33
create() {
   this.anims.create({
     key: "moveAnimation",
     frames: this.anims.generateFrameNumbers("kenny-player", { frames: [2, 3] }),
     frameRate: 6,
     repeat: -1,
   });

   this.anims.create({
     key: "idleAnimation",
     frames: this.anims.generateFrameNumbers("kenny-player", { frames: [0] }),
     frameRate: 1,
     repeat: 0,
   });

   this.objectsrprites = this.add.sprite(400, 300, "kenny-player");
   this.objectsrprites.play("idleAnimation");

   this.moveRight = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT);
   this.moveLeft = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT);
 }

 update() {
   if (this.moveRight.isDown || this.moveLeft.isDown) {
     if (this.objectsrprites.anims.currentAnim.key != "moveAnimation") {
       this.objectsrprites.play("moveAnimation");
     }
     if (this.moveLeft.isDown) this.objectsrprites.scaleX = -1;
     if (this.moveRight.isDown) this.objectsrprites.scaleX = 1;
   } else if (this.moveLeft.isUp && this.moveRight.isUp) {
     this.objectsrprites.play("idleAnimation");
   }
 }

Nah hasilnya kurang lebih seperti gambar dibawah.

object animation kenny

Penutup

Contoh diatas adalah tampilan simple penggunaan sprite dan animations pada game yang biasa saya buat, tetapi itu bukan satu-satunya untuk pengunaan animations. Kalian bisa coba menggali lebih dalam di situs phaser example animations. Semoga contoh diatas dapat membantu atau memberikan informasi soal pembuatan game menggunakan phaser.

Full source code untuk tutorial hari ini silahkan cek di github. Full source codenya di gabung dengan yang sudah di buat sebelumnya (penebang pohon, particle, dan sprite-animation)