Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Game Design

Membuat Game Memecah Balon di Flash

by
Read Time:11 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Onani (you can also view the original English article)

Salah satu permainan Flash paling populer yang pernah ada adalah Bloons, di mana Anda memainkan monyet yang melempar anak panah ke balon pop. Ini melahirkan banyak sekuel, bahkan bercabang ke genre lain seperti pertahanan menara. Tutorial ini akan menunjukkan cara membuat permainan balon balon Anda sendiri, menggunakan mesin QuickBox2D.


Tinjauan Hasil akhir 

Mari kita lihat hasil akhir yang akan kita kerjakan:

Klik dan tahan untuk menentukan sudut bidikan. Cobalah untuk pop semua balon!


Langkah 1: Ikhtisar singkat

Dalam tutorial ini kita akan menggunakan serangkaian kelas ActionScript untuk membuat game Bloons Terinspirasi. Tujuan dari gim ini adalah menembak balon untuk meletuskan semuanya.


Langkah 2: Pengaturan Dokumen Flash 

Buka Flash dan buat lebar 480 piksel, dokumen tinggi 320 piksel. Setel laju Bingkai ke 24fps.


Langkah 3: Antarmuka

Antarmuka yang penuh warna dan sederhana akan digunakan, menampilkan beberapa bentuk, tombol dan MovieClips. Selama beberapa langkah selanjutnya kita akan membangun GUI ini. Tupai dan grafis acorn berasal dari openclipart.org.


Langkah 4: latar belakang

Latar belakang ini dibuat dalam Flash menggunakan bentuk persegi panjang dan oval sederhana. Bilah coklat di bagian bawah akan berfungsi sebagai bilah informasi.


Langkah 5: Judul dan balon

Untuk membuat Judul, pilih Alat Teks (T) dan ubah warna ke #EEEEEE; tulis teks judul Anda (saya telah menggunakan font GoodDog) dan tambahkan bayangan jatuh sederhana. Untuk balon, pilih Oval Tool (O) dan buat 20x30 px # FFCE47 oval. Gunakan Poly Star Tool untuk segitiga kecil di bawahnya.


Langkah 6: Tombol

Gunakan lagi Text Tool untuk membuat dua tombol seperti yang ditunjukkan pada gambar di atas. Konversikan ke tombol dan beri mereka nama contoh deskriptif sehingga kami dapat dengan mudah menggunakannya nanti di kode. Konversikan grafik di atas panggung ke satu MovieClip dan beri nama TitleView - jangan lupa centang kotak Export for ActionScript.


Langkah 7: Layar permainan

Ini adalah Layar Game, yang berisi semua elemen dinamis dan interaktif dari permainan. Lebih banyak dari mereka akan dihasilkan saat runtime menggunakan ActionScript. Anda dapat membaca nama instan pada gambar di atas.


Langkah 8: Kredit layar

Layar Credits akan muncul di depan layar Judul; gunakan grafik dan font dari sebelumnya untuk membuatnya. Beri nama CreditsView dan ingat untuk memeriksa Export for ActionScript box.


Langkah 9: Alarm

Peringatan akan ditampilkan ketika semua balon telah muncul; itu akan menampilkan permainan di atas pesan dan skor. Gunakan Rectangle Tool untuk membuatnya dan atur nama instancenya menjadi AlertView. Sekali lagi, tandai kotak Export for ActionScript.


Langkah 10: Suara

Kami akan menggunakan efek suara untuk meningkatkan perasaan permainan; Anda dapat menemukan suara yang digunakan dalam contoh ini di Soungle.com menggunakan kata kunci pop.


Langkah 11: TweenNano

Kami akan menggunakan mesin tween yang berbeda dari default yang disertakan dalam Flash, ini akan meningkatkan performa serta lebih mudah digunakan.

Anda dapat mengunduh TweenNano dari situs resminya.


Langkah 12: QuickBox 2D

Kami akan menggunakan pustaka fisika QuickBox2D yang berguna untuk membuat game ini. Jika Anda tidak terbiasa dengan itu, Anda dapat mengikuti Seri Pendahuluan dari Activetuts +.

Anda dapat mengunduh QuickBox2D dari situs web resminya.


Langkah 13: Setel Kelas Dokumen


Kami akan membuat aplikasi kami interaktif dengan menggunakan kelas eksternal. Tambahkan namanya ke bidang Kelas di bagian Publikasikan panel Properti untuk mengaitkan FLA dengan kelas dokumen Utama.


Langkah 14: Membuat sebuah  ActionScript Kelas baru


Buat kelas baru (Cmd + N) ActionScript 3.0 dan simpan sebagai Main.as di folder kelas Anda.


Langkah 15: Struktur kelas

Buat struktur kelas dasar Anda untuk mulai menulis kode Anda.


Langkah 16: Kelas diperlukan

Ini adalah kelas yang perlu kita impor agar kelas kita bekerja; direktif import membuat kelas dan paket yang ditentukan secara eksternal tersedia untuk kode Anda. 


Langkah 17: variabel

Ini adalah variabel yang akan kami gunakan. Baca komentar di kode untuk mengetahui lebih banyak tentang mereka; beberapa nama mereka cukup jelas sehingga tidak akan ada komentar di sana.


Langkah 18: Pembuat

Konstruktor adalah fungsi yang berjalan ketika suatu objek dibuat dari kelas, kode ini adalah yang pertama untuk mengeksekusi ketika Anda membuat sebuah instance dari suatu objek. Konstruktor kelas dokumen adalah kasus khusus: itu berjalan pada awal permainan.

Kami menggunakan ini untuk memanggil fungsi yang diperlukan untuk memulai permainan. Periksa fungsi-fungsi tersebut di langkah selanjutnya.


Langkah 19: Tambahkan Lihat judul

Kami mulai dengan menambahkan TitleView dari Perpustakaan ke panggung.


Langkah 20: Mulai tombol pendengar

Ini akan menambahkan pendengar mouse ke tombol di tampilan judul, yang akan membawa kita ke permainan atau layar kredit.


Langkah 21: Tampilkan kredit

Layar Kredit ditampilkan ketika pengguna mengklik tombol Credits. Pendengar mouse ditambahkan ke MovieClip penuh untuk menghapusnya.


Langkah 22: Sembunyikan kredit

Ketika layar Kredit diklik itu akan kembali tweened dan dihapus dari panggung.


Langkah 23: Menunjukkan tampilan permainan

Baris berikut menghapus layar Judul dan membiarkan Layar Game terlihat. Di sini kami juga memanggil fungsi-fungsi yang diperlukan untuk memulai permainan; fungsi-fungsi tersebut dijelaskan dalam langkah selanjutnya.

Mari kita berhenti di sini untuk melakukan tes cepat dan memastikan bahwa kode permainan kami berfungsi:

Perlu diingat bahwa beberapa baris telah dikomentari, karena beberapa fungsi belum dibuat.

Ingat bahwa Milestones disertakan dalam file sumber, jadi jika karena alasan tertentu file Anda tidak meniru yang satu ini, lihat sumbernya untuk melihat penyebabnya.


Langkah 24: Permainan pendengar

Fungsi ini menambahkan pendengar tikus yang diperlukan untuk melakukan pemotretan biji.


Langkah 25: Mulai permainan

Di sini kita memulai permainan dengan menciptakan dunia Box2D dan memanggil fungsi-fungsi yang akan membuat balon dan menangani peristiwa mouse.


Langkah 26: Membuat balon

Bersarang for loop digunakan untuk menempatkan balon di atas panggung. Fungsi ini akan menggunakan metode addBox QuickBox2D untuk membuat objek Box2D baru yang akan ditetapkan sebagai Sensor - ini berarti tidak akan ada reaksi fisika terhadap tabrakan (mis. Biji tidak akan memantul), tetapi tabrakan akan tetap dideteksi. Dengan menggunakan metode ini kita dapat menghancurkan balon tetapi membiarkan biji terus berjalan seolah tidak terjadi apa-apa.

Balon tersebut kemudian ditambahkan ke array; ini akan memberi kami akses ke semua balon di luar fungsi ini.

Tentu saja, Anda tidak harus menggunakan bersarang for loop untuk memposisikan balon; ini adalah cara termudah untuk memposisikannya dalam kotak, tetapi Anda dapat memposisikannya secara manual jika Anda mau.


Langkah 27: Deteksi Tabrakan

Fungsi ini menangani tumbukan yang disebutkan pada Langkah 26. Hal pertama yang harus dilakukan adalah melalui array balon, memeriksa masing-masing untuk melihat apakah itu bertabrakan dengan biji.


Langkah 28: Menghancurkan balon

Jika tabrakan itu benar, kami memanggil metode destroy() balon QuickObject dan menghapus elemen dari larik.


Langkah 29: Suara Permainan

Kemudian kami memainkan suara yang menunjukkan hit, meningkatkan perasaan permainan.


Langkah 30: Perbarui Skor dan Penghitung Target

Penghitung skor dan target diperbarui sesuai dengan balon yang muncul dan balon yang tersisa.


Langkah 31: Periksa Level Lengkap

Peringatan dipanggil saat semua balon muncul; kita akan melihat fungsi ini nanti di tutorial.


Langkah 32: Mulai biaya

Kode ini akan mengungkapkan indikator arah acorn, mereset variabel y-impuls acorn, dan menambahkan seorang pendengar enterframe yang akan menangani tujuan.


Langkah 33: Biaya

Indikator tujuan berputar untuk menunjukkan arah di mana biji pohon akan ditembakkan, dan menyesuaikan variabel y-impuls yang sesuai. Arah bidikan dipengaruhi oleh dua variabel, xImpulse dan yImpulse, yang digabungkan untuk membentuk vektor impulse nantinya. xImpulse tetap konstan, dan yImpulse berubah saat pengguna menekan tombol mouse.


Langkah 34: Tembak

Tindakan berikut terjadi ketika tombol mouse naik.

Mari kita berhenti di sini untuk melakukan tes cepat dan memastikan bahwa kode permainan kami berfungsi:

Perlu diingat bahwa beberapa baris telah dikomentari karena fungsi-fungsi tersebut belum dibuat.


Langkah 35: Perbarui Fungsi

Fungsi pembaruan akan melakukan serangkaian operasi EnterFrame. Mari kita lihat tindakan-tindakan tersebut dalam langkah-langkah berikut.


Langkah 36: Hapus Acorns Offstage

Garis berikutnya akan menghapus setiap biji yang keluar dari panggung.


Langkah 37: Memeriksa untuk Level yang Gagal

Permainan berakhir ketika pemain kehabisan biji (atau menghancurkan semua balon seperti yang disebutkan sebelumnya).


Langkah 38: Restart Level

Kode ini berjalan ketika tombol Restart diklik. Ini akan mengatur ulang variabel yang diperlukan dan pendengar untuk me-restart level.


Langkah 39: Alarm

Fungsi ini akan menghentikan permainan dan menampilkan pesan Game Over. Itu juga menambahkan pendengar mouse untuk mengatur ulang permainan saat diklik.


Langkah 40: Restart

Kode ini akan memuat ulang SWF, memulihkan nilai apa pun dan kembali ke layar awal.


Kesimpulan

Buat tweak Anda sendiri untuk permainan dan nikmati pembuatannya. Mungkin Anda bisa mengubah tata letak balon, atau menambah level baru, atau mengubah grafik.

Saya harap Anda menyukai tutorial ini, terima kasih telah membaca!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.