Bismillahirahmanirahim
Assalamualaikum wr.wb
Pada bab 1 ini, saya akan memberikan tutorial untuk membuat animasi gerak dalam HTML5. Dalam html5 ini, untuk membuat sebuah animasi, kita hanya memerlukan adanya perulangan yang terjadi secara terus menerus. Berikut beberapa hal yang perlu diperhatikan:
1. Lakukan clear canvas, supaya gabar yang sebelumnya bisa hilang. Gunakan kode fillRect(0,0cavas.width,canvas.height).
2. Buatlah variabel yang dapat diubah ubah secara global. Jadi kita tidak perlu repot repot lagi untuk mencari setiap line untuk mengubah variabel :D cukup merubahnya secara global
3. Gambar image dengan variabel. Tujuannya juga sama dengan point diatas, agar saat kita ingin mengubah tidak perlu repot repot lagi.
4. Setiap variabel berganti nilai, maka Image juga akan digambar pada posisi yang berbeda.
Itulah konsep dasarnya. Sekarang mari kita mulai ngoding! Penjelasan akan ada dibawah dari semua codenya ya.
<!DOCTYPE HTML>
<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 = "sheriff.jpg";
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>
Keterangan:
var imgX = 0;
- Pada baris 14, kita disitu membuat variabel global. Yang sesuai dengan konsep nomor 2 tadi. Jadi dengan variabel global ii, dapat diakses dari manapun. Variabel ini kita gunakan untuk diubah ubah nilainya sehingga tercipta sebuah animasi gerak
setInterval(draw, 1.6);
- Pada baris 23, kita menggunakan setInterval(draw, 1.6) yang artinya, program akan memanggil fungsi draw setiap 1.6 ms. Jika kita memasukan nilai bukan 1.6 tapi 1000 maka fungsi draw akan dipanggil setiap 1000 ms atau sekitar 1 detik. Ini yang disebut saya tadi dengan membuat perulangan terus menerus sebagai syarat terbentuknya animasi.
ctx.fillStyle = "#fff";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img, imgX, 0);
imgX++;
if (imgX > canvas.width) {
imgX = 0;
}
- Pada baris 27, kita menggunakan fillStyle untuk menentukan warna aktif. Yaitu putih dengan webtag colornya #fff
- Pada varis 28, kita gambar kotak putih yang ukurannya sama dengan ukuran canvas. Ini yang tadi saya maksud dengan clear canvas, sehingga, penggambaran yang sebelumnya terhapus semua karena tertimpa dengan kota putih ini.
- Pada baris 29, kita melakukan penggambaran objek pada posisi x, dengan imgX dimana variabel imgX selalu berubah ubah sesuai dengan kode di program baris 30. Setiap imgX berganti nilai, maka posisi gambar akan berubah juga
- Baris 30, kita melakukan perubahan nilai imgX dengan melakukan increment (++).
- Baris 32-34, kita cek jika posisi imgX sudah lebih dari width canvas, maka kita kembalikan ke nilai 0.
Nah untuk gambarnya dari mana bro? Nih saya kasih gambar contohnya, save aja dari sini :3
Okelah, cukup sekian. Akan berlanjut ke part part selanjutnya, yang masih membahas tentang animasi dalam HTML5 juga. Untuk pertanyaan lewat komentar maaf jarang saya respon, silahkan tanya di facebook saya aja. fb.com/dhistira.bayu karena kalo disini saya jarang on.
