Bismillahirahmanirahim
Assalamualaikum wr.wb
Setelah sebelumnya saya sudah membuat tutorial yang Part 1. Sekarang kita beralih ke part 2. Ke part 2 ini, kita akan membuat animasi berdasarkan frame! Jadi gambarnya bisa berubah ubah seperti gif, padahal hanya image biasa. Apa yang harus diperhatikan dalam tahap ini?
1. Seperti biasa, buatlah variabel yang dapat diubah secara global sebagai nilai frame aktif animasi
2. Lakukan penggambaran sesuai dengan posisi frame animasi.
3. Lakukan perubahan frame secara increment dan kembalikan nilainya jika sudah melampaui batas maksimal jumlah frame.
Di bab ini akan lebih menarik, kenapa? Animasi menggunakan frame ini, kita bisa dapat gunakan untuk membuat sebuah film animasi atau game berbasis web. Ya, kalau di dunia game disebut dengan sprites, atau semua tingkah laku suatu objek yang terkumpul dalam 1 file gambar. Biasanya berformat png. Yaudah yuk, sekarang mari kita mulai ngoding! Penjelasan ada di akhir dari kode ini ya.
Untuk file gambar, diatas tuh download aja, berinama crocodile.jpg diletakan di 1 folder yang sama ya
<!DOCTYPE HTML>
<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 = "crocodile.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:
var frame = 0; var totalFrame = 5;
- Baris 14 dan 15, kita membuat variabel global. Yaitu frame dan totalFrame di mana frame adalah posisi frame Image saat ini dan total frame adalah jumlah semua frame dalam Image.
ctx.drawImage(img, (img.width/totalFrame)*frame, 0,
- Baris 30, agar daerah yang digambar pada Image sesuai dengan posisi frame yang ditentukan.
frame++;
if (frame >= totalFrame) {
frame = 0;
}
- Baris 33-37, melakukan increment (pengubahan nilai) frame, yang tadi saya sebutkan. Kemudian mengeceknya jika sudah mencapai totalFrame maka tereset kembali menuju 0.
ctx.font = "20pt Calibri";
ctx.fillStyle = "#000";
ctx.fillText("Frame: " + frame, 10, 180);
- Baris 39-41 kita tuliskan informasi frame aktif atau yang sedang berada di dalam gambar
Cukup sekian tutorial animasi framenya, akan berlanjut ke part 3. Di part 3 kita bakal belajar apa ya? Apa hayoo :D Masih tentang animasi, dan pastinya lebih seru yang emang dapat terarahkan untuk menuju pemrograman Web-Based HTML5 Game. Kalau ada yang ditanyakan, lewat fb aja bro kalo mau fast respon di fb.com/dhistira.bayu soalnya kalo disini saya jarang on.
