Belajar Animasi di EnchantJS

ok, setelah kemarin kita perkenalan dengan EnchantJS skrng kita akan belajar membuat animasi sederhana. mari kita mulai dengan menggambar object menggunakan Surface, Surface merupakan wrapper dari Canvas yang bisa digunakan untuk menggambar sebuah object.

kode dibawah menggambar sebuah lingkaran menggunakan object Surface dan di tempatkan di dalam object Sprite

var Circle = enchant.Class.create(enchant.Sprite, {
 initialize : function() {
  enchant.Sprite.call(this, 100, 100);

  // draw circle
  var surface = new Surface(100, 100);
  surface.context.beginPath();
  surface.context.arc(50, 50, 50, 0, Math.PI * 2, true);
  surface.context.fillStyle = 'red';
  surface.context.fill();
  this.image = surface;

  // add circle to scene
  game.rootScene.addChild(this);

 }
});

Setelah sesi menggambar lingkaran selesai mari kita coba tampilkan dan animasikan gambar tersebut. Tambahkan kode di bawah ini.

var circle = new Circle();
circle.addEventListener(Event.ENTER_FRAME, function(){
   this.y ++;
});

Kode diatas akan membuat lingkaran bergerak ke bawah. Namun sebenarnya ada cara untuk membuat animasi di EnchantJS, cara ini lebih mudah yaitu sebagai berikut

circle.tl.moveTo(100, 100, 100);

Kode diatas akan membuat lingkaran bergerak dari koordinat skrng, ke koordinat (100, 100) selama 100 frame. Jika game.fps di set 25 maka lingkaran akan berada ke koordinat (100, 100) dalam 4 second. semoga dapat dipahami 🙂

Selain itu terdapat pula berbagai jenis gerakan yg dapat digunakan seperti rotasi, scale, opacity dll yang dapat digunakan untuk membuat animasi. Seperti contoh kode di bawah

circle.tl.moveTo(100, 100, 100).scaleTo(2, 2, 100).moveTo(50, 50, 100).scaleTo(1, 1, 100).loop();

Kode diatas akan membuat lingkaran bergerak ke koordinat (100, 100) dalam 100 frame kemudian di scale ukurannya 2x lipat dalam 100 frame, kemudian bergerak ke koordinat (50, 50) dalam 100 frame dan ukurannya dikembalikan ke normal dalam 100 frame. Setelah itu animasi akan melakukan looping kembali ke awal lagi.

Nah diatas adalah contoh sederhana menggunakan animasi di EnchantJS.

Source Code :  source code

Demo : demo

Semoga bermanfaat 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *