Animasi pada Sprite Sheet

Setelah mempelajari cara mengambil satu gambar (sprite) dari sprite sheet, sekarang kita akan membuat animasi dari sprite sheet tersebut, ingatlah bahwa sprite sheet dino memiliki koordinat seperti di bawah ini:

Untuk membuat animasi dari kumpulan sprite, Flame menyediakan fungsi: 

SpriteAnimation.spriteList()

Fungsi ini menerima tiga parameter, antara lain:

• Daftar sprite → berupa List<Sprite> yang berisi frame-frame animasi.

• Kecepatan animasi → seberapa cepat frame berpindah.

• Apakah animasi berulang (loop) atau hanya sekali jalan.

Supaya lebih mudah, biasanya kita membuat fungsi pembantu atau tambahan untuk mengambil rentang sprite dari sprite sheet dan otomatis membuat daftar animasinya.

Contoh sprite sheet dino bisa berisi beberapa state (berjalan, melompat, mati, dll). Dengan fungsi tambahan tadi, kita bisa memilih bagian mana yang ingin dijadikan animasi.

Misalnya, jika kita akan membuat animasi dari file dino.png (gambar diatas) :

• Dari (0,0) ke (3,0) menghasilkan 10 langkah animasi: (0,0) · (0,1) · (0,2) · (1,0) · (1,1) · (1,2) · (2,0) · (2,1) · (2,2) · (3,0)

• Dari (1,1) ke (2,1) menghasilkan 4 langkah animasi: (1,1) · (1,2) · (2,0) · (2,1)

• Dari (1,1) ke (3,0) menghasilkan 6 langkah animasi: (1,1) · (1,2) · (2,0) · (2,1) · (2,2) · (3,0)

Intinya: dengan sprite sheet, kita bisa membuat animasi parsial (hanya sebagian gerakan) atau lengkap (semua frame), sesuai dengan urutan langkah yang kita tentukan.

Langkah-langkah pengerjaan:

• Buatlah sebuah project baru dengan nama sprite_07

• Tambahkan aset dino.png pada project sprite_07

• Jangan lupa untuk instal flame pada project sprite_07

Fungsi untuk membuat animasi

Untuk membuat animasi dari sprite sheet, kita membutuhkan beberapa parameter:

1. Langkah awal di X → posisi awal kolom (contoh: 3).

2. Langkah awal di Y → posisi awal baris (contoh: 0).

3. Jumlah langkah → berapa banyak sprite yang akan digunakan (contoh: 6 berarti ada 6 frame).

4. Lebar matriks → jumlah kolom dalam sprite sheet (misalnya pada dino.png ada matriks 3 × 3, maka lebarnya = 3).

5. Kecepatan animasi → seberapa cepat frame berganti.

6. Loop → apakah animasi berjalan terus-menerus (true) atau berhenti setelah sekali jalan (false).

• Dengan parameter tersebut, kita bisa membuat fungsi turunan dari class SpriteSheet seperti dibawah ini (buat di dalam folder lib/utils):

Penjelasan singkat:

1. Perulangan (for) digunakan untuk mengambil sprite satu per satu sesuai jumlah langkah.

2. Setiap sprite diambil dengan getSprite(x, y) lalu dimasukkan ke spriteList.

3. Setelah daftar sprite terkumpul, kita membuat animasi dengan SpriteAnimation.spriteList().

Dengan cara ini, kita bisa membuat animasi dengan mudah hanya dengan menentukan titik awal, jumlah langkah, kecepatan, dan apakah animasinya akan diulang atau tidak.

SpriteAnimationComponent

Sebelumnya kita sudah menggunakan SpriteComponent untuk menampilkan 1 gambar sprite saja. Sekarang, karena kita ingin menampilkan sprite yang bergerak (animasi), maka kita harus mengganti dari SpriteComponent ke SpriteAnimationComponent.

• Buat komponen baru di folder lib/components, dengan kode seperti di bawah ini:

Penjelasan Sederhana: 

1. Pada latihan sebelumnya, kita menampilkan gambar statis dengan sintaks sprite = spriteSheet.getSprite(1, 1);

2. Sekarang kita menampilkan animasi sprite dengan sintaks animation = dinoAnimation;

3. Animasi ini dibuat menggunakan fungsi createAnimationByLimit(), yang mengambil beberapa frame dari sprite sheet lalu memainkannya secara berurutan

Jadi perbedaan utama:

1. class SpriteComponent → untuk gambar diam.

2. class SpriteAnimationComponent → untuk gambar bergerak (animasi).

• Pastikan file main.dart sudah berisi seperti di bawah ini, kemudian jalankan aplikasi.

• Pastikan bahwa hasil dari project sprite_07 sudah seperti di bawah ini: