Membuat Animasi Sprite Dengan Canvas HTML5

Saat mengerjakan tugas akhir kuliah dulu membuat game Gatotkaca – Otot Kawat Tulang Besi dengan menggunakan Java. Saat itu masih belum ada HTML5, baru beberapa tahun ini perkembangan teknologi web begitu pesat.

Kali ini saya ingin sharing bagaimana cara membuat animasi menggunakan HTML 5 dengan Canvas. Memang ada cara untuk membuat animasi dengan CSS, tetapi kalau kita sudah berbicara membuat game, CSS sudah tidak mampu untuk melakukan hal-hal unik pada game.

Untuk source code nya kamu bisa langsung download di Github.

Disana saya membuat 2 model animasi:

1. Animasi Menggunakan Timer Konstan
2. Animasi Menggunakan Timer Dinamis

Masing-masing mempunyai kelebihan dan kekurangannya masing-masing.

#1 Animasi Menggunakan Timer Konstan

Animasi dengan model seperti ini relatif lebih simpel dalam pembuatannya, tetapi untuk membuat game yang kompleks akan sangat sulit dan terbatas. Berikut pseudocodenya

// Load asset ke variable
loadAsset();

animate();

function animate() {
  /*
   * Some animation task
   */

   setTimeout(function() {
      animate();
   }, 300); // Memanggil animasi 300ms kemudian
}

Problem dari algoritma diatas adalah setiap perulangan diset 300ms.

1. Bagaimana kalau menjalankan animate() membutuhkan waktu lebih banyak karena kendala browser dll?
2. Bagaimana kalau setiap animasi karakter memiliki timeframe sendiri?

Sebagai contoh karakter A memiliki frame A1, A2, A3 dengan detail seperti ini:

Frame A1 berdurasi 100ms
Frame A2 berdurasi 200ms
Frame A3 berdurasi 300ms

Jika menggunakan cara timer diatas maka akan menjadi seperti ini:

Frame A1 berdurasi 300ms
Frame A2 berdurasi 300ms
Frame A3 berdurasi 300ms

Ini masih 1 karakter saja.

1. Bagaimana kalau lebih dari 1 karakter?
2. Bagaimana kalau ingin memberikan efek slow motion pada salah satu karakter saja?

Oleh sebab itu pendekatan algoritma diatas sangat terbatas. Bukan salah, hanya perlu disesuaikan dengan game yang ingin dibuat.

Kamu bisa download pada tag gatotkaca-v1 di Github untuk melihat contoh scriptnya. Saya menggunakan pendekatan OOP dalam mengerjakannya. Jadi, akan sedikit berbeda dengan pseudocode diatas, tetapi secara konsep tetap sama.

#2 Animasi Menggunakan Timer Dinamis

Animasi dengan metode ini akan lebih kompleks dibanding yang pertama. Lihat pseudocode dibawah ini:

// Menyimpan waktu start perhitungan dimulai
var startTime = new Date();
// Menyimpan waktu start perhitungan selesai
var endTime = new Date();
// Perbedaan waktu antara startime dan endtime
var diffTime = 0;
// Menyimpan animasi karakter
var sprite = new Sprite();
sprite.add('image1', 100);
sprite.add('image2', 200);
sprite.add('image3', 300);

// Load asset ke variable
loadAsset();

animate();

function animate() {
  // Perhitungan kompleks

  // Update animasi sprite
  sprite.update(diffTime);

  // Mendapatkan time dimana perhitungan selesai
  this.endTime = new Date();
  // Hitung perbedaan waktu startTime dan endTime
  this.diffTime = this.endTime - this.startTime;

  // Pindah endTime sebagai startTime
  this.startTime = this.endTime;

  setTimeout(function() {
    animate();
  }, 0); // Memanggil animasi() langsung tanpa delay. Lalu kenapa pakai setTimeout()? Karena supaya membuat async, jika tidak browser akan hang.
}

Perhatikan pada bagian sprite.update(integer). Bagian ini untuk mengupdate gerakan dari sprite tersebut. Masih ingat dengan contoh frame diatas?

Frame A1 berdurasi 100ms
Frame A2 berdurasi 200ms
Frame A3 berdurasi 300ms

Kita asumsikan seperti ini

var a = new Sprite('karater-a');
a.add('a1.png', 100);
a.add('a2.png', 200);
a.add('a3.png', 300);

Jika saya memanggil a.update(100) maka posisi gambar masih di a1.png. Berikut untuk detailnya

var a = new Sprite('karater-a');
a.add('a1.png', 100);
a.add('a2.png', 200);
a.add('a3.png', 300);

a.update(100); // Gambar akan diposisi a1.png
a.update(200); // Gambar akan diposisi a2.png
a.update(300); // Gambar akan diposisi a3.png

// Bagaimana kalau +50 lagi?
a.update(50); // Gambar akan diposisi a1.png. Yup, kembali keposisi semula, dan akan terus berulang seperti itu.

Bagaimana kalau ingin membuat efek slowmotion? Mudah saja tinggal integer yang dipassing dibagi 2. Contoh:

var diffTime = 200;
a.update(diffTime / 2);

Maka dia akan lebih lambat 2x dari gerakan normal.

Nah sekarang kamu tahu kan perbedaan dari dua metode diatas. Pilihlah sesuai dengan kebutuhan kamu. Sebagai penutup saya sertakan video youtube saat saya membuat animasi ini dari nol.