Tutorial game flash : dot and maze

Game ini sering kita mainkan, dasar dari game ini adalah menggerakkan sebuah titik yang akan mengikuti mouse, titik / dot ini haruslah melewati jalur – jalur yang telah disediakan, di jalur tersebut bias saja terdapat beberapa rintangan. Tujuan dari game ini adalah menggerakkan mouse untuk mencapai ujung dari jalur tersebut, jika mencapainya, maka kita memenangkan game itu, namun jika kita menyentuh dinding pembatas dari jalur tersebut “game over”-lah anda. :D

Mulai langsung saja ke pembuatan game :

1. Buka flash, saya menggunakan adobe flash cs3 professional, namun anda dapat menggunakan flash versi berapa saja, asalkan support dengan actionscript 2.0.

clip_image002

2. Ketika workspace telah terbuka, sekarang kita buat dua buah “scene”, untuk menampilkan panel scene, klik window -> Other Panels -> scene ( atau dengan shift + F2), buat dua buah scene, scene pertama kita gunakan untuk meletakkan tombol play, sedangkan scene kedua, kita gunakan untuk tempat utama permainan.

clip_image004

3. Klik pada scene 1, selanjutnya buat sebuah tombol mulai sesuai keinginan kita, untuk tutorial pembuatan tombol dapat dilihat di postingan saya ini. Letakkan tombol di tempat yang kita inginkan sebagai awal dari permainan. Namai tombol tersebut dengan nama mulai_btn.

clip_image006

4. Masih di scene 1, buka panel action, ketikkan coding di bawah ini :

stop(); //merupakan perntah untuk berhenti di scene dan frme letak script stop() diletakkan.

Mouse.show(); //merupakan perintah untuk menampilkan cusor kembali.

mulai_btn.onRelease = function() { // ketika mulai_btn di klik, maka akan menjalankan fungsi ini

gotoAndPlay("Scene 2", 1); //script untuk pergi dan memainkan Scene 2 di frame 1.

}

5. Sekarang kita beralih ke scene 2, tempat dimana game dimainkan. Langkah selanjutnya kita akan membuat jalur dan dinding pembatas dari maze. Ubah menjadi button dengan nama dinding_btn.

clip_image008

Gambar diatas merupakan gambar maze, yang digambar hanyalah warna biru saja, sedangkan yang putih kosong ( tidak ada gambar ).

6. Masih di scane dan frame yang sama, sekarang kita akamn membuat cursor sendiri pengganti cursor mouse. Gambar sebuah titik biru kecil, kemudian ubah tipenya menjadi movie clip, dan beri nama cursor_mc.

clip_image010

7. Tambahkan lagi sebuah button di ujung maze sebagai tujuan dari cursor, jika curso sampai pada tombol ini, maka dinyatakan telah memenangkan game. Beri nama sesuai keinginan, disini saya menggunaka nama mahkota_btn.

clip_image012

8. Klik frame 1 di scene 2, kemudian masukkan actionscript berikut.

stop(); // untuk berhenti di fraame tempat script stop diletakkan

Mouse.hide(); menyembunyikan cursor mouse

_root.onEnterFrame = function() {// ketika memasuki frame ini, akan menjalankan fungsi dibawah ini

_root.cursor_mc._x = _root._xmouse; // koordinat x / posisi mendatar cursor_mc akan mengikuti koordinat x dari cursor mouse

_root.cursor_mc._y = _root._ymouse; // koordinat y / posisi vertikal cursor_mc akan mengikuti koordinat y dari cursor mouse

};

dinding_btn.onRollOver = function() { //ketika mouse menyentuh dinding,( mouse berda di atas dinding_btn

gotoAndPlay("Scene 1", 1); // pergi dan memainkan scene1 di frame 1.

};

mahkota_btn.onRollOver = function() { // ketika mouse menyentuh mahkota_btn

gotoAndPlay(2); // pergi ke frame 2 di scene yang sama.

};

9. Selanjutnya di frame ke 2 kita akan membuat state kemenangan. Dan game siap dimainkan.

kalau bingung download langsung aja filenya disini.


nah ini untuk hasil gamenya.

1 komentar:

Please share your opinion. :)