Animasi
dalam sebuah web game merupakan komponen yang paling menonjol baik yang menggunakan
flash intregrasi web maupunyang menggunakan HTML5. Animasi sebenarnya terdiri
dari beberapa gambar yang di render bergantian pada waktu yang tertentu atau
dapat juga berupa animasi gerak.
Untuk
membuat animasi di dalam HTML 5, memerlukan adanya pengulangan yang terjadi
secara terus menerus pada objek yang menjadi tujuan.
Dibawah
ini beberpa hal yang perlu diperhatikan dalam membuat animasi yaitu:
Menerapkan clear canvas dalam
halaman web supaya gambar yang sebelumnya hilang.
Membuat variable yang dapat
diubah-ubah secara menyeluruh.
Dalam gambar Image menggunakan variabel yang dapat diubah-ubah.
Setiap
Image berganti nilai sehingga image akan digambarkan pada posisi yang berbeda.
Contoh Script HTML 5 yaitu:
<html>
<head>
<style>
canvas {
border-width: 1px;
border-style: solid;
}
</style>
<script>
var canvas;
var ctx;
var imgX = 0;
var img = new Image();
window.onload = function(){
img.src = "DI ISI GAMBAR";
canvas =
document.getElementById("myCanvas");
ctx =
canvas.getContext("2d");
setInterval(draw, 1.6);
};
function draw() {
ctx.fillStyle =
"#fff";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img, imgX,
0);
imgX++;
if (imgX >
canvas.width) {
imgX = 0;
}
}
</script>
</head>
<body>
<center>
<canvas id="myCanvas"
width="640" height="480">
</canvas>
</center>
</body>
</html>
Tuliskan script diatas diatas dalam notepad dan simpan
dengan file dengan extend .html, contoh; “gambar
animasi.html”. Dan selanjutnya file tersebut bisa dieksekusi sehingga
menampilkan halaman web seperti gambar diatas.
0 komentar:
Post a Comment