CARA MEMBUAT ANIMASI DENGAN HTML5 (CANVAS)

Di postingan cara membuat animasi motion guide dan animasi classic tween pada aplikasi adobe flash. Namun akhir-akhir ini kita mendengar kabar tentang perkembangan flash yang tergantikan oleh canvas HTML 5. Semua fitur yang terdapat pada flash dapat tergantikan oleh HTML 5.

Gambar. HTML 5

Kali ini kita akan mempalajari pembuatan animasi menggunakan HTML 5 yang dibantu dengan Framework Phaser.js. Pertama yang perlu dipersiapkan adalah Framework Phaser.js, file index.html. Susunan folder tampak pada gambar 1. Jangan lupa Framework Phaser.js yang telah kita perloleh dari internet di ekstrak dulu.

Gambar 1 : gambar susunan folder animasi dengan HTMl 5.

Kedua, Hal yang perlu dipersiapkan adalah Text Editor. Kita bisa menggunakan sembarang Text Editor (Notepad, Notepad++, Sublime dll) sesuai dengan keinginan kita, namu saya kali ini menggunakan Text Editor Sublime.

Saatnya kita beraksi,
1. Buka file index.html
2. Ketik tag html, head dan body pada File index.html seperti berikut:

<!DOCTYPE html> <html>  <head>  <title>Latihan animasi HTML 5</title> </head>  <body>  </body>  </html>

3. Ketik link lokasi javascript (Framework Phaser.js) di dalam tag head

<!DOCTYPE html> <html> <head> <title>Latihan animasi HTML 5</title> <script type="text/javascript" src="js/phaser.min.js"></script>  </head> <body> </body> </html>

4. Ketik tag script java script untuk menulis kode javascript

<!DOCTYPE html> <html> <head> <title>Latihan animasi HTML 5</title> <script type="text/javascript" src="js/phaser.min.js"></script> <script type="text/javascript"> //tag script // Isi kode Javascript disini </script>  </head> <body> </body> </html>

5. Ketik kode pada tag script, kode terdiri dari pendefinisian variabel game dan 3 fungsi preload, create dan update.

<!DOCTYPE html> <html> <head> <title>Latihan animasi HTML 5</title> <script type="text/javascript" src="js/phaser.min.js"></script> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); //pendefinisian variabel game function preload() { //fungsi preload } function create() { //fungsi create } function update() { //fungsi update } </script> </head> <body> </body> </html>

Note : Jika agan ingin merubah ukuran tampilan animasi silahkan rubah angka 800, 600 pada pendifinisian variabel game sesuai dengan keinginan anda.
6. Ketik kode game.load.image('star', 'img/star.png'); pada fungsi preload.

<!DOCTYPE html> <html> <head> <title>Latihan animasi HTML 5</title> <script type="text/javascript" src="js/phaser.min.js"></script> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { //fungsi preload game.load.image('star', 'img/star.png'); // kode load image } function create() { } function update() { } </script> </head> <body> </body> </html>

7. Ketik kode bintang = this.add.sprite(0, 0, 'star'); pada fungsi create. pada tahap ini kita bisa melihat hasil dari coding yang telah kita ketikkan.

<!DOCTYPE html> <html> <head> <title>Latihan animasi HTML 5</title> <script type="text/javascript" src="js/phaser.min.js"></script> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('star', 'img/star.png'); } function create() { // fungsi create bintang = this.add.sprite(0, 0, 'star'); //Kode pendefinsisian variabel bintang yang digunakan sebagai sprite } function update() { } </script> </head> <body> </body> </html>

Note: keterangan kode

gambar 2 - keterangan kode

gambar 2 - koordinat

8. Ketik kode this.add.tween(bintang).to({x: 200}, 500, Phaser.Easing.Exponential.Out, true); pada fungsi create.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title> coba nulis</title> <script type="text/javascript" src="js/phaser.min.js"></script> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {preload: preload, create: create, update: update}); function preload() { game.load.image('star', 'img/star.png'); } function create() { bintang = this.add.sprite(0, 0, 'star'); this.add.tween(bintang).to({x: 200}, 500, Phaser.Easing.Exponential.Out, true); //Kode animasi } function update() { } </script> </head> <body> </body> </html>

Note:

gambar 4 - keterangan pindah koordinat

kita bisa memindah arah animasi dengna merubah nilai koordinat x dan y, pada kode diatas hanya menggunakan koordinat x saja
9. Selesai

Jika masih bingung dan terjadi program eror jangan ragu untuk mengisi kolom komentar dibawah.
Ikuti terus postingan ane seputar pengembangan game berbasis HTML 5 dengan Framework Phaser.js dengan cara menambahkan akun Google + .

Agan mau source code nya. silahkan kirimkan alamat email agan di kolom komentar :D