Maze game menggunakan
actionscript – Part I
Hai, salam serabutan!
Pada tutorial ini, kita akan
mendalami actionscript 3.0 untuk membuat sebuah game Flash sederhana. Kami
harap Anda telah mengerti dulu dasar-dasar pemrograman seperti penggunaan
sintaks selection (if-else), iteration (while, for), dan penggunaan function. Apabila Anda belum paham
mengenai dasar-dasar pemrograman, ada baiknya Anda mempelajarinya karena dapat
mempermudah hidup Anda, misalnya dapat memasukkan data secara otomatis dan
masih banyak lagi… :D. Anda tidak perlu tahu cara membuat animasi tweening menggunakan Flash.
Siap? Jalankanlah aplikasi Adobe
Flash. Apabila Anda belum memilikinya, Anda dapat mengunduhnya dari http://www.adobe.com/support/flash/downloads.html. Maka akan muncul tampilan seperti ini. Note:
Tampilan ini belum tentu sama karena mungkin saja versi Adobe Flash Anda
berbeda.
Pilih new ActionScript 3.0.
Kemudian, gambarlah sebuah
persegi menggunakan toolbar yang ada di kanan.
Apabila toolbar tidak tersedia,
maka keluarkan melalui menu Windows -> tools. Mungkin Anda juga harus
mengubah layout workspace Anda menggunakan menu yang terletak di menu bar.
Kemudian buatlah sebuah kotak di
stage. Stage merupakan tempat meletakkan objek dalam Flash. Objek yang diletakkan dalam stage akan muncul ketika ditampilkan.
Lalu, menggunakan selection tool
(lihat toolbar di kanan)
Pilih seluruh kotak.
Kemudian tekan tab properties.
Ubahlah tinggi dan lebarnya
menjadi 32 pixel.
Kemudian tekan F8, sehingga akan
keluar jendela baru seperti berikut.
Isi persis dengan apa yang ada
di gambar, terutama centang kotak Export for ActionScript dan nama Class:
Dinding. Kemudian tekan OK. Apabila ada warning, tekan OK lagi.
Ini merupakan proses untuk
mengubah suatu shape menjadi symbol. Dalam Flash, sebuah symbol dapat
dimanipulasi menggunakan ActionScript, misalnya digerakkan, diperbesar, atau
di-drag menggunakan mouse. Apabila Anda memiliki sesuatu yang ingin digerakkan
(tanpa menggunakan tweening), maka Anda harus mengubahnya menjadi symbol
terlebih dulu. Apabila benar, maka di tab Library akan muncul sebuah symbol
yang baru Anda buat.
Test dengan menekan Ctrl + Enter. Apabila benar, akan muncul sebuah kotak kecil.
Kemudian, delete kotak Anda dari
stage. Mengapa? Karena nanti Anda bisa menaruhnya lagi menggunakan
ActionScript! Ingat, delete kotak dari stage, bukan dari library!
Sekarang saatnya scripting!
ActionScript 3.0 memperbolehkan
Anda untuk ngoding di dua tempat: di
timeline dan di dalam class. Menulis kode di timeline bukanlah hal yang
dianjurkan karena mirip dengan membuat global variable. Konsep OOP disediakan
oleh ActionScript, maka mengapa tidak kita gunakan?
Klik stage menggunakan selection
tool, kemudian masuk ke jendela properties. Isi "Maze" pada Document Class. Lalu
tekan gambar pensil di sebelahnya.
Akan muncul sebuah jendela baru.
Save dan namakan Maze.as. Ini merupakan class utama untuk game kita, sehingga
hampir seluruh mekanisme game akan kita atur menggunakan class ini. Untuk
memulai, mari kita keluarkan kotak yang telah kita buat dari Library. Caranya
adalah dengan mengetikkan
addChild(new
Dinding());
Di dalam constructor (function
Maze). Fungsi addChild berguna untuk menampilkan objek di layar. Sebagai
parameternya, kita harus mengisikan sebuah objek yang ingin ditampilkan, tak
lain merupakan objek dari class Dinding.
Untuk mengetes, save dan kembali
ke file Maze.as. tekan Ctrl + Enter untuk melihat hasilnya. Apabila
benar, maka akan tampak kotak seperti berikut.
Apabila kotak tidak keluar,
yakinkan Anda untuk save dulu semua file, dan periksa lagi penamaan file dan
class yang digunakan! Nama file dan nama class harus sama!
Secara default kotak tersebut
akan menyangkut di pojok kanan atas (koordinat 0, 0). Kita dapat menggesernya
dengan mengubah kode constructor, menjadi seperti ini.
public
function Maze() {
var dinding:Dinding = new Dinding();
addChild(dinding);
dinding.x = 100;
dinding.y = 100;
}
Dalam ActionScript, tipe data
diletakkan dibelakang nama variable dan dipisahkan menggunakan titik dua. Untuk
mendeklarasikan variable baru, ActionScript menggunakan keyword var. Untuk
mendeklarasikan function baru, ActionScript menggunakan keyword function.
Tes menggunakan Ctrl +
Enter. Kotak akan berpindah ke tengah.
Untuk menjadikan sebuah maze
game, tentunya kita memerlukan Array 2D (atau bahkan 3D, jika kita ingin
membuat 3D maze!) untuk menampung lokasi dinding. Oleh karena itu, mari kita
buat variable array ini. Ketikkan kode berikut (dalam file Maze.as, bukan dalam timeline).
package {
import flash.display.MovieClip;
public class Maze extends MovieClip {
var maze:Array;
var panjang:int, lebar:int;
public function Maze() {
//mengisi array
maze = new Array(
new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1),
new Array(1, 0, 0, 1, 0, 0, 0, 1, 0, 0,
0, 1, 0, 1),
new Array(1, 0, 1, 1, 0, 1, 0, 0, 0, 1,
1, 1, 0, 1),
new Array(1, 0, 1, 0, 0, 1, 1, 1, 0, 1,
0, 0, 0, 1),
new Array(1, 0, 1, 0, 1, 1, 0, 0, 0, 1,
1, 1, 0, 1),
new Array(1, 0, 1, 0, 0, 0, 0, 1, 0, 0,
0, 0, 0, 1),
new Array(1, 0, 0, 0, 1, 0, 0, 1, 0, 0,
1, 1, 1, 1),
new Array(1, 1, 1, 0, 1, 1, 0, 1, 1, 0,
0, 0, 0, 1),
new Array(1, 0, 0, 0, 1, 0, 0, 0, 1, 1,
1, 1, 0, 1),
new Array(1, 0, 1, 0, 1, 0, 1, 0, 1, 0,
0, 0, 0, 1),
new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1)
);
lebar = maze.length;
panjang = maze[0].length;
//menampilkan ke layar
for(var i:int=0; i<lebar; i++){
for(var j:int=0; j<panjang; j++){
if(maze[i][j] == 0) continue;
var dinding:Dinding = new Dinding();
dinding.y = i*dinding.height + 30;
dinding.x = j*dinding.width + 60;
addChild(dinding);
}
}
}
}
}
Kode ini menggunakan array untuk
menimpan lokasi dinding, kemudian ditampilkan menggunakan nested loop, ke arah
y dan x. Nilai 0 pada array berarti tidak ada dinding, sedangkan nilai 1
berarti ada. Perhatikan bahwa untuk membangkitkan maze yang kecil sekalipun,
kita perlu meng-hardcode banyak nilai. Oleh karena itu, kita nanti akan memperbaikinya.
Kapan? Nanti… Tunggu tutorial mendatang yah!
Tes dan lihat hasilnya.
Naah, sekian dulu untuk tutorial
kali ini. Tunggu edisi selanjutnya yaa.. :D
Pada edisi selanjutnya, kita
akan membahas bagaimana caranya:
- Bernavigasi di dalam maze
- Membangkitkan maze secara acak
- Membuat maze solver otomatis
- Bermain vs. CPU
Kode dan file untuk tutorial ini dapat
diunduh di sini (Ditulis menggunakan Adobe Flash 5.5, kompatibel dengan Flash 5.0 maupun Flash 6.0).
Salam Serabutan.
Perhatian: Serabutan Dotcom menerima jasa programming,
dan masih banyak lainnya lho! Murah, cepat, dan gampang, silakan kunjungi laman ini
untuk melihat semua jasa yang kami tawarkan. Terima kasih ..!
