Animasi dengan Sprite Sheet ~ Pemrograman dan Teknologi

Untuk membuat animasi, kita bisa menggunakan setInterval. Kita bisa menggunakan sprite sheet yang berisi beberapa posisi dari karakter yang ingin kita tampilkan. Misalkan kita punya gambar seperti di bawah ini dengan nama "animasi.png".

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas width="640" Height="640" id="kanvas" style="background-color:pink;border:1px black solid">
        Canvas tidak dapat ditampilkan
    </canvas>
  <script>
    var kanvas=document.getElementById("kanvas");
    var ct=kanvas.getContext("2d");
    var gambar=new Image();    
    var i=0, x=0, jposisi=3;
    gambar.src="animasi.png";
    gambar.onload=function(){
    panjang=gambar.width/jposisi, tinggi=gambar.height;
        setInterval(function(){
            if(i>(jposisi-1))i=0;
            if(x>kanvas.width)x=0;
            ct.clearRect(0, 0, kanvas.width, kanvas.height);
            ct.drawImage(gambar, i*panjang, 0, panjang, tinggi, x, 0, panjang, tinggi);
            x+=8;
            i++;
        }, 50);
    }
  </script>
</body>
</html>

Script di atas menampilkan gerakan dari karakter yang ada dalam spritesheet dengan nama "animasi png". Kita bisa juga mengubah gambarnya menjadi lima gerakan, kemudian kita ubah variabel jposisi sesuai jumlah "potongan gambarnya".

Kalau cuma mau "jalan ditempat", hapus "x+=8" yang ada di setInterval sehingga scriptnya jadi seperti di bawah ini.

var kanvas=document.getElementById("kanvas");
var ct=kanvas.getContext("2d");
var gambar=new Image();
var i=0, x=0, jposisi=3;
gambar.src="animasi.png";
gambar.onload=function(){
    panjang=gambar.width/jposisi, tinggi=gambar.height;
    setInterval(function(){
        if(i>(jposisi-1))i=0;
        if(x>kanvas.width)x=0;
        ct.clearRect(0, 0, kanvas.width, kanvas.height);
        ct.drawImage(gambar, i*panjang, 0, panjang, tinggi, x, 0, panjang, tinggi);
        i++;
    }, 50);
}