Game Programmer 22

Published on January 29th, 2013 | by gedebuk

Game dengan Starling-[animasi dengan Tweenlite]

Pada artikel kali ini kita akan memberikan animasi pada gambar kita yang kemarin menggunakanTweenLite.

Tweenlite adalah libreary untuk action script, yang berfungsi untuk memberi efek tween, atau animasi bergerak.  Pada game ini animasi yang akan kita gunakan adalah menggerakan gambar hero masuk ke stage, dan menggerakan gambar hero, dan tombol agar bergerak naik turun.

Agar tidak bingung membanyangkannya, mari mulai tutorialnya.

  • Meng-install tweenlite

Pertama-tama, kita buka dulu website tweenlite, lalu di sebelah kanan kita klik download as3. setelah di download ekstrak filenya.

Setelah itu,kita buka kembali  flash develop, tambahkan classpath dari direktori com dari tweenlite.

  • Memberi animasi pada gambar Hero

Kita pindahkan posisi x dan y gambar Hero pada function drawScreen ke function initialize.

Di sini kita akan memberi animasi gambar Hero bergerak dari luar layar ke dalam layar, jadi kita harus merubah posisi gambarnya.

Rubah  menjadi

hero.x = -hero.width;
hero.y =  100;

sekarang kita tinggal memberikan efek animasi pada gambar Hero, caranya tinggal menambhakan baris berikut ke function initialize

TweenLite.to(hero, 2, { x:80 } );

jangan lupa menambah

import com.greensock.TweenLite;

karena class Tweenlite, berada di folder berbeda(ada di classpath).

  • Membuat animasi naik turun pada gambar Hero, dan tombol naik turun

Kita buat eventListener untuk memanggil function heroAnimation, dengan menambahkan

this.addEventListener(Event.ENTER_FRAME, heroAnimation);

pada function initialize.

Lalu kita buat function heroAnimation beserta isinya

private function heroAnimation(event:Event):void
{
	var currentDate:Date = new Date();
	hero.y = 100 + ( Math.cos(currentDate.getTime() * 0.002)* 25);
	playBtn.y = 260 + ( Math.cos(currentDate.getTime() * 0.002)* 10);
	aboutBtn.y = 380 + ( Math.cos(currentDate.getTime() * 0.002)* 10);
}

Di dalam function tersebut kita menggerakan posisi y dari hero, playBtn, aboutBtn.  Sebelum menjelaskan algoritmanya, saya ingin bertanya apa ada yang masih ingat bentuk grafik/ diagram dari cos

ya, grafik cos akan bergerak naik turun seiring berjalannya waktu. Oleh sebab itu, kita akan gunakan fungsi cos di dalam game kita untuk memberi efek animasi.
untuk mendapatkan waktu kita buat dulu variabel  currentDate dari class Date, lalu untuk mendapatkan waktu yang sedang berjalan kita pakai method getTime, dan agar hasilnya pas, kita kalikan 0.002. sehingga fungsinya menjadi

 Math.cos(currentDate.getTime() * 0.002)

Kalau perkalian di belakang berfungsi untuk menentukan berapa pixel gambarnya akan bergerak, lalu angka di depannya merupakan posisi awal gambar.

Sekeian dulu artikel kali ini ^_^
untuk source codenya bisa di download di sini.


Ikuti channel Gedebuk di Youtube untuk mendapatkan berbagai video tutorial pembuatan game! Klik saja tombol Subsribe di bawah ini.


Lebih suka tutorial tertulis seperti artikel ini?





About the Author



Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back to Top ↑