KURSUS PRIVAT - Belajar efektif dalam waktu yang singkat
  • Office  
  • AutoCAD 2D/3D  
  • 3D Studio MAX  
  • Desain Grafis  
  • Animasi Flash  
  • Multimedia  
  • Video Editing  
  • Web Design  
  • Accounting  
:: TUTORIAL ::

» Flash - Game Bola Pantul & Kecepatan - Bagian I


Memahami Flash untuk aplikasi game tidak akan lengkap apabila kita tidak memahami movie clip berikut cara mengontrol dan menggerakkan movie clip tersebut. Sudah banyak yang membahas aplikasi fisika dalam pembuatan game flash. Hal ini disebabkan oleh gerakan objek yang realistis membutuhkan perhitungan fisika yang matang. Untuk itu, saya akan menjelaskan mengenai bagaimana cara menggerakkan objek dengan perhitungan matematis sederhana dan kemudian akan kita tingkatkan dengan menggunakan perhitungan kecepatan ditambah dengan cara membunyikan file suara.

1. Gerakan Objek Matematis Sederhana

Pada contoh di atas, untuk menggerakkan movie clip "bola" dalam arah 2 Dimensi dapat dilakukan dengan script sederhana yang ditempatkan pada timeline utama, seperti ini :

bola._x += gerakX; //atau bola._x = bola._x + gerakX;
bola._y += gerakY; //atau bola._y = bola._y + gerakY;

Dalam contoh ini, "bola" adalah movie clip yang telah dibuat sebelumnya dengan menggunakan oval tool, kemudian dibuat sebagai movie clip dan diberi nama instance name "bola".

Sedangkan "gerakX" dan "gerakY" adalah variabel yang akan dipicu pada saat user menekan tombol "start".

Script yang diisikan pada tombol "start" adalah sebagai berikut:

on(release){
     gerakX = random(20)-10;
     gerakY = random(20)-10;
     bola._x = 150;
     bola._y = 120;
}

"gerakX" dan "gerakY" dibangkitkan oleh perintah "random", yang akan menghasilkan angka dari 0 sampai 20. Angka ini dikurangi dengan 10, sehingga nilai pada "gerakX" dan "gerakY" akan berkisar dari (-10) sampai (+10).

Posisi awal movie clip "bola" dideklarasikan oleh perintah selanjutnya, yaitu bola._x = 150; dan bola._y = 120; Dalam contoh ini, saya menggunakan ukuran movie 300 x 240 pixel, sehingga perintah tadi menempatkan movie clip "bola" di tengah-tengah stage.

Pergerakan pada bola dengan mengandalkan frame script tentu saja dapat dilakukan dengan cara menambahkan satu keyframe tambahan setelah frame script yang mengatur pergerakan bola di atas. Pada frame 2 kita dapat menuliskan perintah untuk kembali ke frame sebelumnya, yakni :

gotoAndPlay(1);

2. Gerakan Objek Menggunakan Kecepatan dan Arah

Apabila kita kaji lebih lanjut, gerakan yang dipicu oleh perintah tadi, akan menghasilkan kecepatan yang berbeda-beda, tergantung nilai yang dihasilkan oleh perintah random.

Sebagai contoh, jika nilai yang dihasilkan oleh kedua random mendekati bilangan 10, maka gerakannya akan sangat pelan. Sebaliknya, apabila kedua random menghasilkan nilai maksimal atau minimal, 0 atau 20, maka gerakan objek "bola" akan menjadi cepat.

Untuk itu, kita bisa mengganti gerakan objek tersebut dengan menambahkan variabel kecepatan dan arah. Sehingga animasinya akan menjadi seperti di bawah ini:

Dalam contoh kedua ini, script pada tombol "start" adalah sebagai berikut:

on(release){
     arah = random(360);
     gerakX = kec * Math.sin(arah * Math.PI/180);
     gerakY = -1 * kec * Math.cos(arah * Math.PI/180);
     bola._x = 150;
     bola._y = 120;
}

Perlu diketahui, bahwa dalam perhitungan sudut secara matematis, Flash bekerja dengan radian, bukan dengan derajat (degree). Sehingga, penghitungan sudut harus dikonversi ke dalam radian dengan rumus : radian = sudut * pi/180.

Selain itu, arah sumbu y pada monitor adalah kebalikan (baca: ke bawah) dari arah sumbu y cartesius (ke atas), sehingga gerakY harus dikalikan dengan -1.

Pada contoh di atas, arah adalah variabel yang dihitung sebagai bilangan acak dari 0 sampai 360. Sedangkan kec adalah variabel yang dimasukkan oleh user melalui Input Text yang disediakan di stage dengan properti var : kec.

3. Pantulan Objek Pada Dinding

Bagaimana kalau kita ingin membatasi gerak bola tersebut hanya di sekitar arena permainan?

Nah, berhubung arena permainan berukuran 300 x 240 pixel, dan ukuran bola adalah 10 x 10 pixel, maka kita bisa membatasi posisi bola (posisi X dan posisi Y) sesuai dengan ukuran arena permainan dikurangi ukuran bola. Script pada frame bisa kita tambahkan menjadi seperti ini:

bola._x += gerakX;
bola._y += gerakY;

if(bola._x>=290 || bola._x<=10){
     gerakX = -1 * gerakX;
}

if(bola._y>=230 || bola._y<=10){
     gerakY = -1 * gerakY;
}

Artinya, jika posisi X bola tersebut lebih dari 290 (lebar arena dikurangi lebar bola) atau posisi X bola kurang dari 10 (lebar bola=10), maka gerakX adalah kebalikannya.

Demikian halnya untuk gerak dan posisi Y. Jika posisi Y bola lebih dari 230 atau posisi Y bola kurang dari 10, maka gerak Y adalah kebalikannya.

Dalam contoh ini, tentu saja akan lebih menarik apabila kita tambahkan suara yang akan berbunyi pada saat bola "menyentuh" dinding. Namun, ada hal yang perlu dicatat, bahwa dalam permainan ini usahakan agar angka kecepatan tidak terlalu besar, yang akan mengakibatkan bola sudah berjalan terlalu jauh sebelum script pemantul membalikkan arah bola.

Menarik bukan? Langkah selanjutnya adalah dengan menambahkan suara.

4. Menambahkan Suara Pantulan Pada Dinding

Agar animasinya lebih menarik, kita dapat menambahkan file suara ke dalam movie. Suara pantulan yang terdengar pada movie di atas dapat kita siapkan dengan terlebih dahulu meng-import file suara ke dalam library (file > import > import to library). Kemudian, tambahkan linkage pada objek suara tersebut dengan klik kanan pada objek suara di window library. Dengan mengaktifkan export for ActionScript dan mengetikkan nama pada identifier pada linkage tersebut, maka kita sudah memberi nama pada objek suara yang dapat kita panggil melalui script (pada contoh ini identifiernya saya beri nama: "ding"). Selanjutnya kita dapat memanggil objek suara tersebut melalui script.

Script pada tombol "start" akan menjadi seperti ini:

on(release){
     arah = random(360);
     gerakX = kec * Math.sin(arah * Math.PI/180);
     gerakY = -1 * kec * Math.cos(arah * Math.PI/180);
     bola._x = 150;
     bola._y = 120;
     bunyi = new Sound();
     bunyi.attachSound("ding");
}

Variabel "bunyi" dalam hal ini dideklarasikan berupa objek dari class Sound. Kemudian, objek bunyi tersebut diisi dengan suara "ding" yang diambil dari identifier (pada contoh ini: "ding" adalah nama identifier pada suara yang diberi linkage). Dengan mengatur "linkage" dan memberi nama pada identifier, maka file suara yang sudah di-import ke dalam library dapat kita panggil melalui dua baris perintah tadi. Dengan demikian, kita sudah memiliki variabel "bunyi" yang merupakan objek jenis suara.

Adapun yang menjadi pemicu untuk membunyikan objek suara tersebut dapat kita masukkan pada frame-script, sehingga hasil akhirnya akan terlihat seperti berikut ini:

bola._x += gerakX;
bola._y += gerakY;

if(bola._x>=290 || bola._x<=10){
     gerakX = -1 * gerakX;
     bunyi.start(0, 1);
}

if(bola._y>=230 || bola._y<=10){
     gerakY = -1 * gerakY;
     bunyi.start(0, 1);
}

Angka "0" pada method bunyi.start(0, 1); adalah jarak (offset) permulaan detik ke berapa file suara tersebut dibunyikan. Sedangkan angka "1" merujuk pada berapa kali suara tersebut akan diulang (repeat).

Nah, mudah bukan?

Sekarang, kita dapat mengembangkan aplikasi ini dengan menambahkan beberapa hal menarik lainnya, seperti penggunaan perintah hitTest, atau dengan menambahkan percepatan gravitasi dan kelembaman. Namun, sebelumnya kita dapat melanjutkan pengontrolan movie clip dengan memindahkan script yang ada di timeline ke dalam movie clip. ■ <Tomy>

 

KURSUS PRIVAT - Belajar efektif dalam waktu yang singkat