Dasar pembuatan game dengan flash. bagian 1

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


Bookmark and Share Tell a Friend

26 Comments »

  • andre   |   July 11th, 2009 at 11:24 am

    saya tertarik dengan permaslahan di atas,, sedangkan saya berminat mengambil judul Tugas Akhir ” membuat game pesawat menggunakan macromedia flash mx “…

    ada gak source code game yang sudah jadinya ? kirim ke email saya : anorganik_alpokat@yahoo.com..

    mohon bantuananya…

  • BayuBayu   |   July 14th, 2009 at 8:52 am

    Artikel ini adalah langkah ke arah membuat game yang benar2 jadi. Tunggu saja bagian2 selanjutnya, kemudian anda bisa mengembangkannya hingga menjadi game yang benar2 lengkap, misalnya dengan membuat grafis yg mantap, sound fx, music, gameplay yg unik dan alur cerita.
    Terimakasih.

  • metta   |   July 15th, 2009 at 9:44 am

    bisa bikin game di visual basic 2005?

  • venus   |   July 31st, 2009 at 1:02 pm

    haaaaiii………….
    buat saya menikmati game itu memang menyenangkan kan.
    saat ini saya sedang di beri tugas membuat game pembelajaran mengenai matematika.di banding dengan game yang menyenangkan,bagi kami semua game yang mendidik itu lebih mbulet & ruet pengerjaan nya .apa anda punya saran????? bantu kami yaaaaa……… tengkiyuuuuu…

  • Fachriza   |   February 13th, 2010 at 3:07 pm

    Wah makasih banyak ilmunya….

  • Dani   |   February 14th, 2010 at 3:01 pm

    waaaaaaaaaaah, bagus banget ilmunya mas kasih tahu bagian selanjutnya dong

  • rina   |   March 5th, 2010 at 7:52 pm

    bisa bkin game flash ya? gue lg butuh org yg bisa bkin game flash ni.
    kira” bsa bantu ga? bbsa minta emailnya?

  • adde   |   April 19th, 2010 at 8:58 am

    masss….
    tolong saya donk ..
    saya mau buat skripsi tentang game …
    saya boleh minta source nya gak mas …

    tolong bantuin saya ya mas …

    klo ada mas kirim ke E-mail saya ya …
    tanks …

  • andi   |   June 19th, 2010 at 12:01 am

    mo nanya kalo script untuk menyimpan suatu game gimana? save nya malsud saya

  • Mukhlis   |   June 23rd, 2010 at 4:21 pm

    Mr.Bayu, bisa nggak ksih tahu gimana caranya memahami script game atau animasi pada flash? thank,s before!

  • games   |   July 6th, 2010 at 11:37 pm

    oke dech,,,, inspiratif bangget…
    saya jd pengen belajar ne sekarang,,, sapa tau aja bisa mempraktekkan ilmu ini… thanks yak :D

  • hendra   |   October 30th, 2010 at 12:18 pm

    mas bayu mohon bantuannya donk. .
    aq mw bwt skripsi ttng game neh. .
    kira2 aq bleh mnta source nya jg ngk. .
    plisss. . y mas krim k email q. .

  • Marsidi   |   January 9th, 2011 at 8:11 pm

    Mas bisa tolong saya ngak,,gimana cara membuat scor? klau bisa tolong kirim ke email saya ya

  • nia   |   March 2nd, 2011 at 2:03 pm

    tolong cepat ya part II nya di tunggu, cz buat skripsi niyh butuh bgt,,,
    niat’a mw buat games kartu gitu,,

    Makasiiiihhhh

  • maseadi   |   May 8th, 2011 at 11:39 am

    Sangat bermanfaat. Kami bookmark di http://www.beritabaris.com artikel anda.terimakasih

  • Fikri   |   June 10th, 2011 at 10:00 pm

    Script di atas itu juga bisa :
    onClipEvent(enterFrame){
    if(Key.isDown(Key.RIGHT)){
    this._x += 4;
    }
    if(Key.isDown(Key.LEFT)){
    this._x -= 4;
    }
    if(Key.isDown(Key.UP)){
    this._y -= 4;
    }
    if(Key.isDown(Key.DOWN)){
    this._y += 4;
    }
    }

    Untuk pesawatnya..

    jika sudah di jadikan aplikasi mungkin biar kayak game beneran
    langsung full screen
    jadi script nya di ketik di frame pertama :

    fscommand(“fullscreen”,true);

    kalau untuk score :

    on (release) {
    (nama variable) += 20;
    }

    maksudnya kalau di klik dan di lepas maka variable score (misal)
    akan bertambah 20 , tapi harus dynamic text dan var nya di ketik score

    :

    on(release){
    score += 20;
    }

    sebelum di masukkan ke si terget ketikan di frame :
    var score = Number = 0;

    maaf terlalu panjang komentnya….
    semoga bermanfaat
    ..

  • afifudin   |   August 8th, 2011 at 12:23 pm

    kakak tahu nggak serial numbernya Macromedia Flash MX

  • sugih   |   October 8th, 2011 at 7:26 pm

    Bagaimana cara membaca nama var tampil secara auto ketika flash dijalankan?contoh nama var sgh.diteks input tampil sgh.

  • harry   |   March 22nd, 2012 at 1:02 am

    bagaimana cara membuat coding pada macromedi flash 8 untuk membuat animasi/gambar dapat bergerak/digeser menggunakan mouse
    contohnya; membuat aplikasi sempoa pada macromedia flash 8
    terima kasih

  • rio   |   March 23rd, 2012 at 10:16 pm

    om,,,tolong bantuannya nh,saya lagi bikin tugas akhir dan mengajukan judul bikin game,setelah saya cari cari di google cara membuat game untuk pemula,blog anda yg tampil dan setelah saya baca artikel anda saya berminat utuk membuat game tersebut,,
    tolong codingnya kirim ke email saya om,,
    itu pun kalo boleh
    terima kasih

  • anonim   |   September 3rd, 2012 at 6:43 pm

    keren

  • anonim   |   September 3rd, 2012 at 6:43 pm

    keren beet

  • wisnu gundul   |   October 30th, 2012 at 3:13 pm

    ok infonya.source kode itu buat apa ya mas?
    newbie..

  • Najla   |   December 30th, 2012 at 11:29 am

    makasih buat tutornya.. di tunggu yang selanjutnya.. :)

  • dhani   |   June 13th, 2013 at 9:57 pm

    wahhh keren juga nichh
    sukses jah dachh

  • BayuBayu’s Blog » Dasar pembuatan game dengan Flash. bagian 2:Akselerasi Gerakan   |   October 14th, 2013 at 8:44 am

    […] berseri ini adalah lanjutan dari bagian 1 sebelumnya yang membahas tentang kontrol dan gerakan dasar […]

RSS feed for comments on this post. TrackBack URL

Leave a comment