Sprite Sheet

Sprite adalah gambar yang digunakan untuk mewakili objek, karakter, atau elemen dalam game (misalnya gambar harimau (tiger.png) pada contoh sebelumnya).

Sprite sheet adalah kumpulan banyak sprite yang digabung menjadi satu gambar. Sprite sheet biasanya digunakan di berbagai game engine, seperti Unity. Dalam pengembangan game 2D, sprite sheet berisi semua gerakan (state) dari sebuah karakter atau objek, sehingga untuk membuat animasi dibutuhkan beberapa gambar dalam satu sheet.

Singkatnya, sprite sheet biasanya berupa satu file gambar (misalnya PNG) yang bisa kita tampilkan di layar sebagai animasi atau elemen game.

Di Flutter dengan Flame, kita bisa membuat sprite menggunakan kelas SpriteComponent. Dengan komponen ini, kita dapat menambahkan logika untuk berbagai elemen game seperti pemain, musuh, atau karakter non-playable (NPC).

Kelas SpriteComponent sendiri merupakan turunan dari PositionComponent. Di dalamnya, ada tiga properti utama yang harus kita pahami:

• position → posisi sprite dalam bentuk Vector2, relatif terhadap induknya. Jika induknya FlameGame, posisinya relatif terhadap layar (viewport).

• size → ukuran sprite saat zoom kamera bernilai 1.0.

• sprite → gambar (sprite) yang akan ditampilkan pada komponen.

Referensi lengkap bisa dilihat di: https://docs.flame-engine.org/latest/flame/components.html#positioncomponent 

Sekarang, kita tidak hanya bekerja dengan satu gambar saja, tetapi dengan banyak gambar sekaligus. Untuk itu, kita menggunakan gambar yang berisi kumpulan beberapa gambar, yang disebut sprite sheet.

Contohnya, sprite sheet bisa digunakan untuk membuat animasi gerakan berjalan pada karakter pemain. Daripada memuat setiap gambar satu per satu (yang membuat proyek lebih berat karena tiap gambar harus dikelola terpisah), lebih efisien jika semua gambar digabung menjadi satu sprite sheet.

Untuk membuat sprite sheet, kita bisa menggunakan berbagai aplikasi pengolah gambar. Namun, cara yang lebih mudah adalah dengan program bernama TexturePacker (tersedia untuk Linux, Windows, dan MacOS). Dengan aplikasi ini, kita cukup drag and drop (seret dan lepas) gambar-gambar ke dalamnya, lalu program akan otomatis membuatkan sprite sheet.

Di TexturePacker, kita bisa:

• Melihat semua sprite dalam satu sheet.

• Menggunakan fitur Zoom untuk melihat lebih jelas.

• Melihat preview animasi dari sprite sheet.

• Mengatur kecepatan animasi (FPS).

• Mengekspor hasil sprite sheet menjadi satu file gambar.

Sebagai contoh, hasil sprite sheet bisa disimpan dengan nama dino.png. Setelah selesai, sprite sheet ini bisa dimasukkan ke dalam proyek Flutter, lalu direferensikan agar bisa dipakai di dalam game.

Langkah-langkah Praktek:

• Buatlah sebuah project baru dengan nama sprite_06

• Tambahkan aset dino.png pada project sprite_06

• Buat komponen baru, dan masukkan dino.png dengan kode seperti dibawah ini:

• Pada kode diatas, kita mendefinisikan ukuran untuk masing-masing sprite pada sprite sheet dino.png, untuk salah satu gambar yang dipilih, dimana ukuran aslinya sebelum digabungkan menjadi satu spreat sheet adalah 680 piksel x 471 piksel (kode baris 12 dan 13).

• Selanjutnya sprite sheet dino.png disimpan ke dalam variabel spriteImages (kode baris 17)

• Setelah dimasukkan ke variabel spriteImages, sprite sheet bisa dimanipulasi propertinya, dengan syntax:

final spriteSheet = SpriteSheet(image: spriteImages, srcSize: Vector2(spriteSheetWidth, spriteSheetHeight));

• Selanjutnya kode baris 20 diatas, mengambil salah satu sprite, dengan posisi koordinat sprite adalah 2,1

• Dibawah ini adalah gambaran koordinat sprite sheet dino.png

• Setelah komponen dibuat, maka buat komponen game, dan muat di main.dart, seperti kode di bawah ini:

• Jalankan project Anda, amati gambar yang muncul. Apakah sudah sesuai dengan isi variabel sprite apa belum.