Dalam
web game Animasi merupakan komponen yang tidak terlepaskan baik Animasi Gerak,
Animasi Bola dan lain-lain, dan seolah-olah bentuk atau gambar yang kita
ciptakan bias hidup atau bergerak. Selain Animasi Gerak dan Animasi Bola,
Animasi Gambar juga sering digunakan dalam pembuatan web game programming.
Animasi
gambar merupakan animasi yang terbentuk dari sebuah image, dalam melakukan
penggambaran dilakukan pada image tertentu ( frame ) sehingga seolah-olah
tercipta sebuah gerakan.
Beberapa
hal perlu diperhatikan dalam membuat animasi gambar yaitu :
1. Membuat
gambar atau image terlebih dahulu dengan menampilkan 2 atau lebih gambar yang
berbeda dalam satu gambar.
2. Melakukan
penggambaran sesuai dengan posisi frame animasi
3. Melakukan
perubahan secara increment dan mengembalikan nilainya jika sudah melampui batas
maksimal jumlah frame.
Dibawah
ini adalah langkah-langkah untuk membuat animasi gambar yaitu sebagai berikut:
1. Buka
notepad atau notepad++
2. Tuliskan
script dibawah ini dalam notepad atau notepad++
<html>
<head>
<style>
canvas {
border-width: 1px;
border-style: solid;
}
</style>
<script>
var
canvas;
var
ctx;
var frame = 0;
var totalFrame = 5;
var
img = new Image();
window.onload = function(){
img.src
= "pohon animasi.png";
canvas =
document.getElementById("myCanvas");
ctx =
canvas.getContext("2d");
setInterval(draw,
200);
};
function
draw() {
ctx.fillStyle
= "#fff";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,
(img.width/totalFrame)*frame, 0,
img.width/totalFrame,
img.height,
0,
0, img.width/totalFrame, img.height);
frame++;
if
(frame >= totalFrame) {
frame
= 0;
}
ctx.font =
"20pt Calibri";
ctx.fillStyle
= "#000";
ctx.fillText("Frame:
" + frame, 10, 180);
}
</script>
</head>
<body>
<center>
<canvas id="myCanvas"
width="640" height="480">
</canvas>
</center>
</body>
</html>
Keterangan:
Tulisan berwarna merah
adalah variable global, yaitu frame dan total frame.
Tulisan berwarna biru,
posisi image sesuai dengan posisi frame
Tulisan berwarma Hijau,
perintah melakukan increment frame dan kemudian mengecek jika sudah mencapai
total frame maka frame akan kembali atau reset ke 0.
Tulisan berwarna orange
adalah tulisan informasi frame yang sedang aktif atau yang sedang digambar.
3. Simpan script diatas dengan menggunakan extend atau tipe file ".html"
4. Bukalah file tersebut dan hasilnya seperti gambar yang terletak paling atas.
0 komentar:
Post a Comment