Mapping dengan Sprite Sheet ~ Pemrograman dan Teknologi

Sebelumnya, kita sudah mempelajari cara "memotong gambar" dan menempatkan potongan-potongan gambar tersebut di posisi tertentu. Beberapa gambar bisa kita dijadikan satu untuk kemudian ditampilkan sebagai gambar terpisah. Satu gambar besar yang merupakan gabungan dari sekumpulan gambar-gambar yang lebih kecil bisa disebut dengan Texture Atlas atau Sprite Sheet. Gambar-gambar yang kita gabungkan dalam sprite sheet bisa kita tampilkan satu persatu dan kita tentukan posisinya. Dengan sprite sheet, kita bisa memuat beberapa gambar sekaligus dalam satu kali 'load'.

Dengan image sprite kita juga bisa menyimpan posisi dari potongan-potongan gambar dalam array dan membuat semacam pemetaan atau mapping. Kita bisa menampilkan potongan-potongan gambar di posisi tertentu sesuai nilai yang tersimpan dalam array. Misalnya kita punya gambar seperti di bawah ini, dan kita akan membaginya menjadi sembilan potongan yang sama besar untuk ditampilkan lagi sesuai dengan isi array.

<!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 peta=[1, 1, 1, 1, 2];
    gambar.src="gambar.jpg";

    gambar.onload=function(){
    var n=6;
    var i, panjang=gambar.width/9, tinggi=gambar.height;
    for (i=0;i<n;i++)
        ct.drawImage(gambar, peta[i]*panjang, 0, panjang, tinggi, i*panjang, 0, panjang, tinggi);
    }
  </script>
</body>
</html>

Kode HTML dengan script di atas menggunakan array yang kita beri nama peta dan menyimpan 5 nilai yang terkait dengan 'urutan' letak potongan dari gambar yang kita bagi menjadi 9 potong dan akan kita tampilkan. Jika kalian memperhatikan, nilai pertama hingga ke-4 adalah satu dan nilai terakhir adalah 2, dan itu ada hubungannya dengan apa yang terlihat pada canvas dalam halaman yang ditampilkan. Ada satu 'potongan' yang terlihat berbeda karena nilai terakhir pada array merupakan nilai satu-satunya yang berbeda. Sekarang coba kita ubah scriptnya menjadi seperti di bawah ini. Kode HTML-nya tetap menggunakan kode HTML di atas.

var kanvas=document.getElementById("kanvas");
var ct=kanvas.getContext("2d");
var gambar=new Image();
var peta=[2, 3, 2, 3, 2];
gambar.src="gambar.jpg";
gambar.onload=function(){
    var n=6;
    var i, panjang=gambar.width/9, tinggi=gambar.height;
    for (i=0;i<n;i++)
        ct.drawImage(gambar, peta[i]*panjang, 0, panjang, tinggi, i*panjang, 0, panjang, tinggi);
}

Hasilnya terlihat berbeda karena kita sudah mengubah isi dari arraynya. Sekarang, coba ubah sendiri nilai dalam array "peta" dan lihat bedanya. Satu yang perlu diingat adalah nilai yang tersimpan dalam array tidak boleh melebihi jumlah potongan dari gambar yang ada.