Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Spritesheets
Gamedevelopment

Pengenalan Animasi Spritesheet Dalam Game

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Krishna Wahyu (you can also view the original English article)

Spritesheet telah digunakan dalam game selama bertahun-tahun. Game klasik seperti Legend of Zelda: A Link to the Past dan juga game di era modern seperti Cut the Rope menggunakan spritesheet. Dalam artikel ini, kita akan membahas tentang apa itu animasi spritesheet dan bagaimana menyusun kode untuk memainkan animasi spritesheet, dan kita juga akan mendemonstrasikan penggunaan spritesheet di dalam game. Dalam artikel ini saya akan menggunakan kode dalam bahasa pemrograman Javascript, tapi kamu bisa juga menggunakan logika kodenya dalam bahasa pemrograman selain Javascript.

Artikel Lain yang Terkait:

Artikel ini adalah bagian dari kolaborasi spesial di antara artis, animator, dan pengembang game!

Tekan tombol Spasi untuk loncat.

Sebelum kita mulai membahas tentang kode pemrograman animasi spritesheet, sebelumnya kita perlu mendefinisikan dulu beberapa istilah seperti: animasi, sprite, dan spritesheet.

Animasi

Dahulu kala di tahun 1872, Eadweard Muybridge diberi tugas untuk membuktikan apakah seekor kuda itu mengangkat keempat kakinya sekaligus saat sedang berlari. Untuk membuktikan hal itu Eadweard Muybridge mengatur beberapa kamera di sepanjang jalur yang akan dilewati kuda lalu mengambil gambarnya secara beruntun saat kuda tersebut berlari. Proses tersebut menghasilkan 16 gambar yang menampilkan langkah-langkah kuda saat berlari. Dan pada salah satu gambarnya, ternyata memang kuda mengangkat keempat kakinya sekaligus

Muybridge race horse image sheet
Foto yang dibuat oleh Muybridge's "The Horse in Motion".

Muybridge kemudian melakukan eksperimen dengan menempatkan foto-foto tersebut ke dalam alat bernama Zoopraxiscope yang bisa memproyeksikan foto tersebut dengan kecepatan tinggi. Eksperimen tersebut bisa menghasilkan ilusi gambar yang menampilkan kuda sedang berlari. Dan menjadi proyektor film yang pertama di dunia.

Muybridge race horse animated

Proses mengganti-ganti gambar dengan cepat untuk menghasilkan ilusi gerakan adalah definisi dari animasi.

Sprite

Suatu sprite adalah satu gambar tunggal yang digabungkan jadi satu bagian dalam adegan yang lebih besar.

An example of a sprite

Penggunaan Sprite ini adalah satu cara yang umum digunakan dalam game untuk membuat satu adegan yang besar dan kompleks. Kamu dapat memanipulasi masing-masing dari sprite tersebut secara terpisah. Hal ini memberikan kontrol yang lebih besar untuk mengatur bagaimana adegan tersebut digambar ke dalam game, dan bagaimana si pemain berinteraksi di dalam adegan game tersebut.

Adalah satu hal yang umum ketika suatu game menggunakan sprite dalam jumlah banyak. Biasanya akan muncul masalah ketika memuat sprite-sprite tersebut secara individual, karena hal tersebut membutuhkan memori dan pemrosesan dalam jumlah sangat besar. Solusi untuk memecahkan masalah tersebut adalah dengan menggunakan spritesheet.

Spritesheet

Spritesheet adalah kumpulan dari sprite yang digabungkan menjadi satu gambar.

An example of a shritesheet

Spritesheet ini digunakan untuk mempercepat proses menampilkan gambar-gambar ke layar; Metode untuk menampilkan satu gambar, kemudian menampilkan bagian-bagiannya tersebut lebih cepat dibandingkan dengan metode yang memuat banyak gambar lalu ditampilkan satu per satu.

Metode animasi spritesheet ini sebenarnya hanyalah memuat spritesheet lalu menampilkan sprite yang ingin ditampilkan secara berurutan dengan cepat, sehingga memunculkan ilusi gerakan. Hal ini serupa dengan cara yang digunakan oleh proyektor untuk menampilkan film.

Komponen-komponen dari Spritesheets

Spritesheet terdiri dari dua komponen, yaitu: frame dan putaran.

Satu frame adalah satu gambar (atau sprite) yang ada di dalam spritesheet. Mengambil contoh dari gambar kuda milik Muybridge tadi, tiap gambar kuda tadi bisa dianggap sebagai satu frame.

Ketika frame-frame gambar tadi ditampilkan secara berurutan, dan menciptakan ilusi gerakan, maka ini disebut sebagai satu putaran.

Jadi dari contoh gambar Muybridge tadi, ketika menampilkan urutan gambar-gambar kuda yang sedang berlari maka terciptalah satu putaran adegan kuda berlari dari spritesheet.

Kode Pemrograman Untuk Menciptakan Animasi Spritesheet

Ada tiga hal yang perlu dilakukan dalam membuat kode pemrograman animasi spritesheet:

  1. Menciptakan objek gambar
  2. Mengupdate tiap objek gambar di setiap frame animasi
  3. Menampilkan frame gambar tersebut ke layar

Menciptakan objek gambar

Kita akan mulai dengan membuat fungsi (atau kelas) yang akan menangani animasi spritesheet tersebut. Fungsi berikut akan membuat objek gambar dan mengatur path ke file gambar yang akan digunakan.

Karena spritesheet yang digunakan dalam game bisa memiliki ukuran frame yang berbeda-beda, maka kita perlu untuk memasukkan parameter ukuran lebar dan tinggi dari frame pada spritesheet tersebut. Ini perlu dilakukan agar kita bisa menghitung secara akurat ada berapa frame yang ada dalam gambar spritesheet tersebut. Kita akan menggunakan informasi ini nanti pada saat menampilkan animasi ke layar game.

Satu hal yang penting untuk diingat adalah bahwa ukuran setiap frame dalam spritesheet tersebut memiliki ukuran lebar dan tinggi yang sama; Jika tidak maka akan sulit untuk menampilkan animasi ke layar nantinya.

Mengupdate objek gambar

Untuk mengupdate gambar di dalam animasi, kita perlu mengganti-ganti tiap frame gambar yang akan ditampilkan . Berikut adalah contoh spritesheet yang terbagi menjadi beberapa frame yang telah diberi nomor urut.

spritesheet divided into frames and numbered

Dalam tiap frame yang dijalankan game nantinya, kita akan mengupdate gambar yang ditampilkan dari spritesheet. Namun kita tidak ingin tiap frame gambar dalam animasi itu langsung berganti di tiap frame game. Oleh sebab itu kita perlu mengatur berapa banyak frame yang ditampilkan dari spritesheet dan berapa lama waktu tunda yang diperlukan sebelum berganti ke frame gambar yang berikutnya.

Satu hal yang penting untuk diingat adalah jangan sampai kita menampilkan animasi yang berisi frame gambar kosong. Karena hal ini akan merusak ilusi animasi yang ingin ditampilkan karena muncul gambar kosong di tengah animasi.

Untuk mengatasi hal tersebut, kita perlu memasukkan paramater nomor urut terakhir dari frame gambar ke dalam fungsi spritesheet seperti berikut,

Dengan menggunakan operator modulo (%) untuk tiap currentFrame, kita bisa membuat putaran yang kontinyu — dan setiap mencapai endFrame dari spritesheet, maka currentFrame akan dikembalikan ke nilai 0, ini akan menciptakan satu putaran animasi yang kontinyu.

Operator modulo digunakan untuk menghindari munculnya bug integer overflow.

Menampilkan gambar ke layar

Menampilkan gambar dari spritesheet ke layar dapat dilakukan dengan cara yang serupa dengan menampilkan gambar dari sebuah tile map.

Kita hitung jumlah baris dari gambar yang ingin kita tampilkan dengan menghitung modulo dari frame saat ini (current frame) dan jumlah frame per baris (frames per row). Lalu kita hitung jumlah kolomnya dengan membagi frame saat ini dengan jumlah frame per baris.

Dengan perhitungan tadi, kita akan bisa menentukan koordinat dari frame yang akan ditampilkan dengan mengalikan hasil perhitungan tadi dengan frameWidth dan frameHeight, seperti berikut:

Setelah kita membuat fungsi spritesheet tadi, kita dapat menggunakannya untuk menampilkan animasi spritesheet seperti berikut:

Menampilkan Beberapa Animasi Dari Satu Spritesheet

Kode yang tadi kita buat hanya bisa menampilkan satu animasi saja. Akan tetapi, umumnya satu spritesheet bisa saja terdiri dari lebih dari satu animasi.

Untuk bisa menampilkan animasi lebih dari satu, kita perlu mengubah fungsi spritesheet tadi agar bisa menangani lebih dari satu animasi.

Membuat Objek Gambar

Karena gambar yang digunakan dalam animasi tetap sama, kita akan membagi spritesheet tersebut jadi dua fungsi: satu untuk menangani gambar dan satu lagi untuk menangani tiap animasi dari spritesheet.

Fungsi spritesheet tersebut akan menyimpan informasi tentang gambar dan ukuran frame yang digunakan.

Mengupdate dan Menampilkan Gambar

Untuk mengupdate dan menampilkan gambar dari spritesheet tersebut, kita gunakan fungsi animsi seperti berikut.

Karena spritesheet tersebut berisi lebih dari satu frame yang dibutuhkan dalam satu animasi, maka kita perlu mengetahui urutan awal dan akhir dari frame yang akan digunakan. Dari informasi tersebut, kita bisa membuat array yang berisi urutan angka frame animasi sehingga kita bisa memakai kode currentFrame ini untuk mengakses urutan frame animasi yang tepat.

Penggunaan Spritesheet Ke Dalam Game

Setelah menyiapkan fungsi-fungsi diatas tadi, kita bisa menggunakannya untuk menampilkan animasi sprite seperti game Canabalt berikut:

Hit Space to jump.

Kamu bisa membaca kode lengkapnya di repository Githubini. Berapa skor tertinggi kamu?

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.