Membuat Game Sederhana Dengan Flash untuk Pemula

PENDAHULUAN

Catatan Penulis : Artikel ini aselinya ditulis pada 2006 tapi belum sempat dipublikasikan. Topiknya adalah dasar membuat game dengan Flash dan ActionScript 1. Flash yang dipakai adalah Flash MX (Flash 6) dengan ActionScript versi 1.0. Karena ketika itu ActionScript 2 (apalagi AS3), belum muncul. Walaupun menggunakan flash versi lama, artikel ini tetap bisa diterapkan di versi flash terbaru: CS3, CS4. Sehingga masih relevan untuk dipelajari, terutama bagi pemula 

Artikel ini membahas tentang pembuatan game di Flash. Dengan pendekatan langsung praktek dan step-by step. membuat game sederhana bertipe space shooter atau 2D vertical shooter atau Shoot ‘em up. Sebuah jenis permainan yang sudah dikenal semua orang sejak zaman dulu.. masih inget khan ama game 1942 di mesin Arcade atau Raptor zaman DOS dulu?
Tiap2 step dari arikel ini disertai source code fla tersendiri, sehingga anda bisa mengikutinya dengan runtut. Karena setiap step akan membuat file sorce bertambah kompleks dengan modifikasi dari file source sebelumnya.

Mengapa dipilih game bertipe space shooter? Alasannya karena konon dari sisi teknis game tipe ini adalah game action seru yang relatif termudah untuk diimplementasikan.
Bagi pemula, semoga artikel ini dapat membuka wawasan tentang flash gaming.

Flash yang digunakan dalam artikel ini adalah Macromedia Flash MX. Dengan bahasa pemrograman ActionScript 1.0
Sebelum membaca artikel ini, setidaknya anda telah mengenal dan memiliki pengetahuan flash dasar, serta lebih baik lagi adalah pengetahuan dasar ActionScript. Karena inti pembuatan flash game adalah pemrograman ActionScript.

Artikel dibuat berseri sesuai dengan tingkatan. Untuk seri pertama (bagian 1).Akan dijabarkan dasar pembuatan game pesawat dengan gerakan dasar.

Dan untuk pertanyaan, ada yang kurang jelas, kritik, saran, masukan silakan tulis lewat kotak komentar di bawah. Marilah kita belajar bersama..

Ok langsung saja kita mulai.

Menyiapkan Stage & Pembuatan Obyek Utama

Pertama2 kita tentukan ukuran bidang permainan.
kemudian set frame rate-nya (fps). frame rate adalah dalam satuan frame per second (fps). Semakin besar nilainya, maka semakin halus animasinya. Nilai defaultnya 12, Saya ganti dengan 30. Kenapa perlu diganti, karena 12 dirasa terlalu kecil, sehingga gerakan menjadi kurang mulus.

Obyek yang kita kendalikan adalah sebuah pesawat tempur. Jadi sebelumnya kita harus menggambar sebuah pesawat di stage. Emm saya rasa cukup susah menggambar pesawat yang keren kalo cuman dibayangkan aja.. untuk itu Biar bagus, kita butuh model sebagai contoh.
Saya suka model2 pesawat klasik jaman PD II, saya mengambil model salah satu gambar pesawat nazi jerman dari wikipedia, lalu menggambarnya ulang dengan sedikit modifikasi.

oia tidak perlu dibuat detil2 dulu, sederhana aja.. karena nanti pada tahap finishing baru obyek pesawat ini disempurnakan penampilannya. Kita tentu tidak mau membuang2 waktu dengan men-switch otak kita menjadi “designer mode”.. padahal lagi anget2nya dalam “programmer mode”.. hehe
bahkan pesawatnya cukup kotak2 aja, asal udah berbentuk pesawat.. urusan desain bisa dikerjakan belakangan ato kalo anda tidak suka menggambar, bisa diserahkan ke orang lain sebagai desainer.

Menggerakkan Obyek Utama

Ok sekarang mulai tahap menggerakkan obyek
Ubah ukuran pesawat sesuai keinginan (transform) dan konversi ke movieclip, beri nama “pesawat”.

Pada field instance name, beri nama, aku isi dengan nama pesawat_player.
Obyek perlu diberi nama agar bisa dikenali pada saat scripting. pesawat_player adalah instance name dari movie clip.

klik pesawat_player dan buka panel actions, atau tekan F9 (ingat2lah F9 karena nantinya tombol ini sering digunakan), lalu tulis kode berikut:

onClipEvent (enterFrame) {
  if (Key.isDown(Key.RIGHT)) {
 // gerak ke kanan
 this._x = this._x + 4;
  }
  if (Key.isDown(Key.LEFT)) {
 // gerak ke kiri
 this._x = this._x - 4;
  }
  if (Key.isDown(Key.UP)) {
 // gerak ke atas
 this._y = this._y - 4;
  }
  if (Key.isDown(Key.DOWN)) {
 // gerak ke bawah
 this._y = this._y + 4;
  }

}

Perhatikan bahwa actionscript adalah case sensitive, artinya kita harus memperhatikan penulisan huruf besar dan kecil pada nama variabel dan kata kunci.

kalo udah, coba jalankan dengan Ctrl+Enter
nah obyek akan dapat digerakkan dengan keyboard. Ini adalah dasar, mudah bukan

Penjelasan Skrip

Penjelasannya begini, tiap2 obyek movieclip punya properti _x, dan _y yang menunjukkan posisi koordinat di layar.

Pada tiap2 kondisi penekanan tombol keyboard, Obyek Key dengan event isDown, maka koordinat obyek ditambahkan/dikurangi 4.
Misalnya jika ke kanan maka this._x = this._x+4;

this menunjukkan obyek itu sendiri, yaitu pesawat_player..
Karena skrip merupakan actions pada pesawat_player, maka current timeline saat itu adalah pesawat_player. this untuk menyebutkan dirinya sendiri, yaitu pesawat_player (current timeline).
jadi this._x maksudnya adalah koordinat _x dari this (pesawat_player)..Ini adalah penyebutan dengan menggunakan relative path.
dalam terminologi pemrograman berorientasi/berbasis obyek, this adalah instansi obyek movieclip dan _x adalah properti atau atribut..

obyek2 membentuk hirarki dengan _root sebagai paling atas
+root
+–pesawat_player

coba ganti baris
this._x = this._x + 4;

dengan

_root.pesawat_player._x = _root.pesawat_player._x + 4;

jalankan dan perhatikan..

_root.pesawat_player adalah absolute path dari Movieclip pesawat_player.

Jika kode kita berada pada pesawat_player (jika current timeline adalah pesawat_player) maka secara relative path, MovieClip pesawat_player cukup disebut dengan this.

Absolute path bersifat relatif terhadap _root, sehingga selalu dimulai dari _root.

apakah penjelasan ini membingungkan anda? bagi anda yang pernah mempelajari pemrograman atau pemrograman OOP sepertinya tidak masalah, tetapi bila tidak lanjutkan saja walaupun masih abu2. Lama-kelamaan kalo terbiasa pasti paham juga..

Demikian bagian 1 dari artikel ini. Bagian selanjutnya akan membahas tentang akselerasi untuk membuat gerakan lebih natural. Tunggu saja di blog ini 
Kalo ada pertanyaan ato masukan silakan lewat kolom komentar dibawah.

source:pesawat01_1.fla

Download source code

http://bayu.bayubayu.com/blog/membuat-game-action-shooter-di-flash-bagian-1/

Posted in: