Membuat Game Fisika : Gerak Parabola dengan Macromedia Flash (Bagian 1)

Tulisan ini saya buat merupakan bahan pelengkap dari tulisan saya sebelumnya berjudul Membuat Simulasi Gerak Parabola. Perbedaannya yaitu tutorial kali ini, saya lebih menekankan unsur permainan dalam aplikasi gerak parabola. Biasanya dalam menyelesaikan persoalan Fisika yang berhubungan dengan gerak parabola, ada dua variabel yang berperan penting dalam gerakan tersebut yaitu kecepatan awal (Vo) dan sudut tembak (α). Lalu bagaimana jika ingin menembak suatu target yang telah diketahui posisinya dengan tepat. Mari kita sama-sama mempelajarinya dalam tutorial ini.

 

Langkah 1 : Membuat tampilan awal

Buka software Macromedia Flash, Anda juga dapat menggunakan Adobe Flash, tetapi ingat bahwa tutorial ini menggunakan bahasa Action Script 2.0 yang sudah ketinggalan jaman. Atur ukuran aplikasi Anda menjadi 800x 480 pixel.

Langkah 2 : Mengatur layer

Buat lima buah layer bernama background, tombol, ketapel1, bola, ketapel2, Target, Hadiah dan Action Script. Urutan layer sesuai dengan tulisan. Jika diperlukan, layer bisa terjadi penambahan.

Langkah 3 : Membuat background

Aktifkan pada layer background, sisipkan gambar pemandangan yang Anda punya dengan cara menekan Ctrl+R dan atur posisi gambar agar sesuai. Anda juga dapat menggunakan Background seperti yang saya punya di bawah. Gembok layer ini supaya tidak bergeser.

Gambar Property milik game Angry bird

 .

Langkah 4 : Membuat ketapel 1

Downlad 2 gambar ketapel berikut, letakkan dalam folder yang sama dengan Aplikasi ini. Aktifkan layer ketapel 1, tekan Ctrl+R dan sisipkan gambar ketapel1.png. 

Jika muncul pertanyaan “bla...bla..bla..sequence?” Pilih aja “No”. Geser gambar ketapel1 ini ke bagian bawah layar lalu tekan F8, ubah menjadi movie clip dengan nama Ketapel_01. 

Klik Movie clip ketapel_01, pada bagian properti, beri nama instance name dari movie clip ini menjadi “ketapel1”.

Langkah 5 : Membuat ketapel 2

Lakukan mirip seperti langkah 4, hanya saja sekarang aktifkan layer ketapel 2, sisipkan gambar ketapel2.png. Letakkan posisi ketapel 2 berdekatan dengan ketapel 1. Convert gambar ketapel 2 menjadi movie clip dengan nama ketapel_02, lalu beri nama instance namenya dengan nama “ketapel2”.

Langkah 6 : Membuat movie clip bola

Aktifkan layer bola, buat sebuah lingkaran merah (catatan: Anda dapat mengganti dengan bentuk lain berupa gambar) dengan ukuran kira-kira 25x25 pixel. Bola merah ini akan kita jadikan sebagai objek utama untuk dilontar. Konversi bola ini menjadi movie clip dengan nama Bola_merah. Klik movie clip bola_merah dan beri nama pada instance namenya “bola”.

Langkah 7 : Membuat objek target

Klik layer target, buat sebuah objek sembarang berukuran kurang lebih 30 x 30 pixel. Dalam tutorial ini saya buat gambar lingkaran berwarna hijau. konversi bola hijau ini menjadi movie clip dengan nama target_hijau. lalu jangan lupa memberi nama instance name nya menjadi “target”.

Klik 2 kali movie clip target_hijau untuk masuk kedalam area movie clip target.  Buat dua buah layer dengan nama penyangga dan objek. Layer objek berisikan gambar bola hijau yang barusan dibuat, sedangkan layer penyangga diisi dengan gambar balok-balokan yang bisa Anda download di bawah ini. Buatlah penyangga sesuai dengan selera Anda. Gunakan tehnik Ctrl +R untuk menyisipkan gambar.

Property milik game Angry Bird

Masih di dalam movie clip target. Klik gambar bola hijau tadi dan konversi menjadi movie clip dengan nama sensor_hijau,  beri nama instance name “sensor”. Kembali ke scene utama jika sudah selesai.

Langkah 8 : Membuat Movie Clip Hadiah “Kena”

Jika bola merah berhasil menumbuk target hjau, maka kita akan tampilkan sebuah movie clip yang menandakan Anda berhasil dan berfungsi untuk mengulangi kejadian. Buatlah sebuah gambar menarik yang menandakan “berhasil” atau sejenisnya pada layer hadiah. Atau Anda dapat mendownload gambar di bawah. 

Gambar bintang property mili game Angry Bird

Klik gambar tersebut dan konversi menjadi movie clip dengan naqma Hadiah_kena. Jangan lupa unutk memberi nama instance namenya dengan nama “mcberhasil”.

Klik 2 kali movie clip ini dan masuk ke dalam movie clip “Hadiah_kena”. Buat dua buah layer dalam movie clip ini, layer pertama berisi gambar yang sudah Anda buat, layer kedua berisi tombol ulang. Buat sebuah tombol “Ulang” menggunakan Rectangle Tool. Konversi Objek kotak menjadi tombol dengan nama Tombol_ulang.

Klik Tombol ulang dan beri nama pada instance namenya menjadi “tbulang”. Kembali ke scene utama jika sudah selesai.

Langkah 9 : Membuat Movie Clip Hadiah “Lepas”

Langkah ini mirip dengan Langkah 8, perbedaan utamanya adalah gambar background serta nama movie clipnya harus dibedakan. Buat lagi gambar “kegagalan” sesuai dengan versi Anda masing-masing. 

Konversi menjadi movie clip dengan nama Hadiah_lepas dan ubah nama instance namenya menjadi “mcgagal”. 

Masuk ke dalam  mc Hadiah lepas dan buat juga 2 buah layer, pada layer kedua buat lagi sebuah tombol ulang dengan nama yang sama seperti pada langkah 8 yaitu Tombol_ulang dan beri nama instance namenya juga “tbulang’. Keluar menuju scene utama.

Langkah 10 : Membuat movie clip kosong karet ketapel

Karet ketapel merupakan movie clip yang bisa meregang saat bola merah ditarik maupun dilepas. Movie clip ini hanya akan muncul nanti saat kita beri script. Ada dua jenis karet ketapel, karet ketapel 1 berada di belakang bola, sedangkan karet ketapel 2 berada di depan bola. Masing-masing berada pada layer ketapel 1 dan ketapel 2. 

Klik layer ketapel 1, buat sebuah bola atau kotak, konversi objek ini menjadi movie clip, dan beri nama karet serta nama instance namenya karet1. Masuk ke dalam movie clip karet dan hapus benda yang telah anda buat sehingga hanya tersisa movie clip kosong dan jangan lupa keluar menuju scene utama. Jika berhasil, akan tampak sebuah titik kecil putih. Copas movie clip karet ini, lalu letakkan pada layer ketapel2, ganti instance name movie clip hasil copas tadi menjadi karet2, sehingga sekarang Anda mempunyai 2  movie clip kosong yang masing-masing bernama karet1 dan karet2. Letakkan kedua movie clip ini di luar area aplikasi.

 

Langkah 11 : Membuat dynamic Text

Tambahkan satu layer lagi di atas layer Hadiah. Buat lima buah dynamic text, beri nama kelima dynamic text tersebut dengan nama txt_Vo, txt_sudut, txt_Dx, txt_Dy  dan txt_Waktu. 

txt_Vo berfungsi menampilkan kecepatan awal benda, txt_sudut akan menampilkan sudut awal te,bakan, txt_Dx berfungsi menampilkan nilai selisih jarak mendatar, txt_Dy berfungsi menampilkan nilai seslisih jarak vertikal, dan txt_Waktu berfungsi menampilkan waktu dalam satuan detik.

 

Langkah 12 : Membuat Movie clip Text bergerak

Agar txt_Vo dan txt_sudut dapat bergerak mengikuti arah perputaran ketapel, susun kedua text tersebut secara vertikal, seleksi keduanya dan konversi menjadi movie clip dengan nama mc_var.

Tutorial ini bersambung.......
Silahkan download source flashnya Game_Gerak_Parabola.fla