Membuat Game Balapan

siapa yang suka bermain game? hayoo.... pada nunjuk tangan semua , nah sekarang gimana kalau kita mencoba belajar membuat game sederhana. Lagi-lagi kita menggunakan software adobe9/macromedia8 yaitu flash dengan sedikit sentuhan action scripts, nah lo mukanya kok jadi kecut semua .



Langkah 1 : Document Baru & Gambar Latar Belakang
Coba anda buat sebuah document baru dengan ukuran default yaitu 550x450. Gunakan beberapa perangkat gambar seperti Rectangle tool atau oval tool dll untuk membuat latar belakar awan atau sekedar arsiran-arsiran hembusan angin. Kuncilayer yang digunakan sebagai layer tempat meletakkan background ini, biar lebih mudah beri nama saja layernya 'backgroud' dengan click2 kali pada nama layer yang bersangkutan lalu kunci layer tersebut.



Langkah 2 : Menyiapkan Simbol 'Pesawat'
Nah.., Simbol movie clip adalah obyek utama dalam game ini. Apapun karakternya jagoan, penjahat, peluru, point, atau objek apapun umumnya dibuat dalam format movie clip. Dalam tutorial singkat ini hanya menggunakan satu simbol, yaitu 'pesawat'. Pilih insert -> New Symbol , untuk membuat simbol baru, dan pilih tipe movie clip. Gambar sembarang pesawat menggunakan brush tool/pencil tool atau bisa juga tool gambar lain bila anda sudah merasa mampu membuat gambar yang baik. Yakinkan bahwa ukurannya kurang lebih 100x70 pixel.



Langkah 2 : Atur Posisi Instance movie clip 'Pesawat'
Sekarang buatlah layer baru. Tarik atau drag simbol 'pesawat' dari panel library(ctrl+L) sebanyak 3 kali dan semua itu diletakkan pada layer baru. Dengan melakukan hal tersebut, game ini sudah mempunyai 3 instance movie clip. Pilih instance movie clip tersebut dan buka panel properties. Beri nama masing-masing movie clip itu dengan nama 'pesawat1', 'pesawat2', dan 'pesawat3' pada kolom instance name, jangan memakai huruf besar atau spasi anda dapat menggantinya dengan underscore( _ ) :D. ubah nama warna tampilan masing-masing instance dengan memilih color, lalu tint/advance. Klik kotak warna yang muncul sesuaikan dengan kebutuhan anda.



Langkah 4 : Menambah Text Field
Tambahkan lagi sebuah layer baru. menggunakan teks tool, buatlah text field pada layer ini. Ubah tipenya menjadi dynamic text. Isi kolom var di panel properties dengan display. Pada teks field inilah kita dapat menuliskan informasi dinamis kepada pemain.

Langkah 5 : Memulai ActionScript
Sudah saat dari tutorial ini menggunakan action script, mudah-mudahan sampean-sampean masih bisa mengikuti tutorial ini dengan baik dan jelas :) . Buatlah sebuah layer baru dan beri nama layer 'action'. Tekan F9 untuk menampilkan window action panel. Pada game ini scriptnya hanya dibuat pada 1 frame biar tidak bingung dan berserakan di mana-mana. Penulisan pada frame adalah cara yang dianjurkan oleh pengembang flash demi mempermudah programing, dan menghindari kesalahan yang tidak perlu. Oke pada awal ketik :

stop()



Langkah 6 : Deklarasi inisial properti tambahan.
Selain memiliki properti bawaan, anda juga bisa menambahkan properti lain untuk movie clip. Caranya yaitu dengan langsung menambahkan properti dengan format "NamaMovieClip.NamaProperti". Tambahkan kode berikut setelah fungsi stop();

pesawat1.startx=pesawat1._x;
pesawat2.startx=pesawat2._x;
pesawat3.startx=pesawat3._x;

pesawat1.finishx=pesawat1._x+380;
pesawat2.finishx=pesawat2._x+380;
pesawat3.finishx=pesawat3._x+380;

pesawat1.cutename="merah";
pesawat2.cutename="coklat";
pesawat3.cutename="hijau";

Langkah 7 : Membuat variabel dengan tipe data.
Sejak rilis versi MX 2004, Action script mengenal penulisan script yang detail, artinya menggunakan tipe data dalam inisialisasinya. Bagan penulisannya sbb :

var NamaVariabel:TipeVariabel=NilaiAwal.

Tambahkan lagi pada akhir script kode berikut :

var the_state:Number=0;

variabel ini nantinya akan menampung kondisi game, apakah sedang siap-siap, atau tengah berjalan.

Langkah 8 : Event Halder untuk Keydown
Obyek_root, adalah movie_clip paling utama dari setiap unsur kreativitas dalam pemanfaatan flash yang tidak secara instan dapat mengenal setiap aksi dari dari keyboard. Untuk itu, kita menggunakan obyek key. Kode di bawah untuk membuat obyek_root siap menanggulangi setiap aksi dari keyboard :

key.addListener(_root);

Setiap itu, tambahkan kode yang bekerja saat tombol SPACE pada keyboard ditekan :

_root.onKeyDown=function(){
if(key.isDown(Key.SPACE)){
if (the_state==0){
trace("Laksanakan fungsi doStartRace");//baris ini bisa dibuang
doStartRace();
the_state=1;
return;
}
if (the_state==1){
trace("Laksanakan fungsi doStart Pos");//baris ini bisa dibuang
doStartPos();
the_state=0;
}
}
};

Cobalah tes movie. Output Panel seharusnya muncul. Hal ini akibat fungsi trace() yang kita tambahkan. Jika semuanya sudah bekerja, baris berisi fungsi tersebut tersebut dapat dibuang.

Langkah 9 : Menuliskan fungsi buatan untuk doStartRace()
Pada penanganan event keyboard terdapat fungsi doStartRace() yang bukan bawaan flash, melainkan fungsi buatan yang bertugas untuk menjalankan game. Lengkapnya fungsi tersebut adalah ;

var doStartRace=function():Void{
pesawat1.onEnterFrame=
pesawat2.onEnterFrame=
pesawat3.onEnterFrame=function(){
this._x+=Math.random()*10;
if (this._x>=this.finishx){
doStopRace(this.cutename+"Adalah Pemenangnya");
}
};
display="";
};

Pada fungsi inilah kita menggunakan method Math.random() untuk mendapatkan fungsi nilai acak. Method inilah yang sering menjadi sahabat para game maker untuk membuat keputusan yang tidak dapat dikira oleh pemain.

Langkah 10 : Fungsi doStopRace() dan doStartPos()
Dua fungsi buatan lainnya adalah doStopRace() dan doStartPos() yang memberi perintah menghentikan game saat salah satu dari pesawat mencapai finish, dan mengembalikan game ke posisi semula. Fungsi tersebut adalah ;

var doStopRace=function(txt):Void {
display=txt;
delete pesawat1.onEnterFrame;
delete pesawat2.onEnterFrame;
delete pesawat3.onEnterFrame;
};

var doStartPos=function():Void {
doStopRace("Tekan SPACE untuk memulai Balapan");
pesawat1._x=pesawat1.startx;
pesawat2._x=pesawat1.startx;
pesawat3._x=pesawat1.startx;
};

Nah... Sekarang coba deh compile program game yang udah kamu buat (ctrl+Enter). Cara kerja game Balapan Pesawat ini sangat sederhana. Coba tekan tombol SPACE, maka pesawat-pesawat akan terbang berlomba mencapai finih, atau posisi_x pesawat melewati properti finishx. Oiya ... jangan lupa kasih judulnya ya pada bagian atas stage :).


Note :
Script ini ditulis dengan bahasa ActionScript 2.0. Bisa saja anda menemukan banyak perbedaan cara penulisan pada buku-buku maupun artikel atau tutorial lainnya. Jangan Pusing :), script dalam versi 1.0 dan 2.0 masih dapat digunakan pada flash 8 (dengan sedikit sekali pengecualian).