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

Membangun Permainan Breakout yang Luar Biasa di Flash

by
Difficulty:IntermediateLength:LongLanguages:

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

Di Tutorial Premium ini, kita akan membuat permainan Breakout; "Brick Breaker" dari awal menggunakan Flash dan AS3.


Langkah 1: Ringkasan Singkat

Menggunakan alat gambar Flash kita akan membuat antarmuka grafis yang terlihat bagus yang akan didukung oleh beberapa kelas ActionScript 3.

Pengguna akan dapat bermain melalui serangkaian level, Anda dapat dengan mudah menambahkan sebanyak mungkin level yang Anda inginkan!


Langkah 2: Pengaturan Dokumen Flash

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



Langkah 3: Antarmuka


Antarmuka yang berwarna-warni dan tampak bagus akan ditampilkan. Ini akan berisi beberapa bentuk, tombol, bitmap, dan banyak lagi.

Mari langsung masuk ke pembuatan GUI ini.


Langkah 4: Layar Utama


Ini adalah Layar Utama atau tampilan, ini akan menjadi gambar pertama yang muncul di permainan kita.


Langkah 5: Latar Belakang

Buat persegi panjang 320x480 dan isi dengan gradien radial ini: #3A9826, #102A07.


Kita akan memberikan sedikit lebih detail dengan menambahkan filter Photoshop, jika Anda tidak memiliki Photoshop Anda dapat mencoba untuk menambahkan efek yang bagus menggunakan Flash Tools.

Buka gambar di Photoshop dan pergi ke Filters > Texture > Patchwork, gunakan pengaturan berikut:


Anda akan berakhir dengan sesuatu seperti ini:


Latar belakang ini akan berada di panggung serta indikator tongkat, bola dan teks. Konversikan latar belakang ke MovieClip dan beri nama bg.


Langkah 6: Judul

Pilih Text Tool (T), pilih font yang cocok dan tulis judul permainan Anda. Saya menggunakan format ini: Akashi, 55pt, #FFCC33.


Pilih TextField dan gunakan panel Filter untuk menambahkan Drop Shadow:


Duplicate teks (Cmd + D) dan gerakkan 3px ke atas untuk memberikan beberapa emboss.


Konversikan grafis ke MovieClip dan beri nama MenuScreen, ingat untuk menandai kotak Export for ActionScript. Anda dapat menghapus ini dari panggung ketika selesai, karena akan dipanggil menggunakan AS3.


Langkah 7: Tongkat

Gunakan Rectangle Primitive Tool (R) untuk membuat persegi panjang bulat 57x11.5px, ubah radius sudut menjadi 10 dan gunakan gradien ini: #4E4E4E, #BABABA, #B0B3BA.


Tambahkan beberapa garis detail dengan Rectangle Tool, gunakan gaya Anda sendiri!


Anda juga dapat menambahkan beberapa warna ke tongkat Anda, inilah hasil akhir saya, warna yang digunakan adalah: #CC0000.


Konversikan grafis ke MovieClip dan beri nama paddle.


Langkah 8: Bola

Untuk membuat bola, pilih Oval Tool (O) dan gunakan untuk membuat lingkaran 12x12px, #CCCCCC.


Duplicate lingkaran (Cmd + D) ubah ukurannya menjadi 10x10px dan isi dengan gradien radial ini: #95D4FF, #0099FF.


Terakhir, potong lingkaran kedua menjadi dua dan gunakan Selection Tool (V) untuk membuat kurva di bagian bawah. Ubah warnanya menjadi gradien linier putih dengan alfa 60, 10.


Konversikan grafis ke MovieClip dan beri nama ball.


Langkah 9: Bata

Bata kita akan sangat sederhana.

Gunakan alat Rectangle untuk membuat persegi panjang 38x18px dan menerapkan gradien berikutnya: #CC0000, #8E0000, #FF5656.


Konversi persegi panjang ke MovieClip dan menerapkan filter shadow yang digunakan dalam teks judul untuk memberikan tampilan yang lebih bagus.

Konversikan kembali grafis ke MovieClip dan beri nama Brick, ingat untuk menandai kotak Export for ActionScript.


Langkah 10: Layar About

Layar About akan menunjukkan kredit, tahun dan hak cipta dari permainan.

Ini akan sangat mudah karena Anda sudah memiliki semua elemen yang di di dalamnya.


Konversikan grafis ke MovieClip dan beri nama AboutScreen, ingat untuk menandai kotak Export for ActionScript.


Langkah 11: Layar Permainan

Ini adalah layar permainan, itu akan berada di panggung dari awal dan itu akan berisi indikator tongkat, bola, latar belakang dan teks. (Kita akan menambahkan batu bata menggunakan kode.)


Nama instance cukup mudah dan cukup jelas: paddle, ball, bg, scoreTF, livesTF, dan levelTF.


Langkah 12: Menyematkan Font

Untuk menggunakan font kustom secara dinamis, kita perlu menyematkannya dalam aplikasi.

Pilih dynamic textfield dan klik tombol Embed... di Properties Panel.


Pilih/tambahkan semua karakter yang diperlukan dan klik OK.


Langkah 13: Layar Alert

Layar ini akan muncul ketika permainan telah diputuskan; apakah Anda menang, kalah atau Anda mencapai game over (memenangkan semua level atau kehilangan semua nyawa).

Dua Dynamic TextFields digunakan dalam tampilan ini, mereka akan menampilkan status permainan saat ini ditambah pesan singkat. TextFields bernama titleTF dan msgTF.


Konversikan grafis ke MovieClip dan tandai kotak Export for ActionScript, setel nama kelas ke AlertScreen.

Ini mengakhiri bagian grafis, biarkan ActionScript dimulai!


Langkah 14: Tween Nano


Kita akan menggunakan mesin tween yang berbeda dari default yang disertakan dalam flash, ini akan meningkatkan kinerja dan lebih mudah digunakan.

Anda dapat mengunduh Tween Nano dari situs resminya.


Langkah 15: Kelas ActionScript Baru

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



Langkah 16: Struktur Kelas

Buat struktur kelas dasar Anda untuk memulai menulis kode Anda.


Langkah 17: Kelas yang Diperlukan

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


Langkah 18: Variabel dan Konstanta

Ini adalah variabel dan konstanta yang akan kita gunakan, baca komentar di kode untuk menemukan lebih banyak tentang mereka.


Langkah 19: Tingkatan

Semua level kita akan disimpan dalam array multidimensional.

Ini adalah array yang mengandung array; Anda dapat menuliskannya dalam satu baris, tetapi jika Anda menyelaraskannya, Anda benar-benar dapat melihat bentuk yang akan diambil oleh tingkatan tersebut.

Dalam tingkatan ini, 1s mewakili ruang di panggung di mana batu bata akan ditempatkan, dan 0s hanya ruang kosong. Tingkatan ini nantinya akan dibaca oleh fungsi yang akan menempatkan batu bata di atas panggung. Anda dapat menambahkan sebanyak mungkin level yang Anda inginkan menggunakan kelas ini!


Langkah 20: Kode Constructor

Constructor adalah fungsi yang berjalan ketika sebuah objek dibuat dari kelas; kode ini adalah yang pertama kali dieksekusi ketika Anda membuat sebuah instance dari suatu objek (atau berjalan ketika pemuatan permainan, dalam kasus kelas dokumen).

Ini memanggil fungsi yang diperlukan untuk memulai permainan. Periksa fungsi-fungsi ini dalam langkah-langkah berikut.


Langkah 21: Tampilan Animasi Layar Menu & About

Baris berikutnya menangani tombol Menu Screen dan tween tampilan Menu atau About tergantung pada tombol yang ditekan.


Langkah 22: Fungsi Init

Fungsi ini melakukan operasi yang diperlukan untuk memulai permainan, bacalah komentar di kode untuk mengetahui lebih banyak tentangnya.


Langkah 23: Memindahkan Tongkat

Tongkat akan dikendalikan oleh Mouse, itu akan mengikuti posisi x mouse.


Langkah 24: Tabrakan Perbatasan Tongkat

Untuk menghentikan tongkat agar tidak meninggalkan panggung, kita membuat batas tak terlihat di sisi layar.


Langkah 25: Membangun Fungsi Tingkatan

Tingkatan akan dibangun oleh fungsi ini.

Ia menggunakan parameter untuk mendapatkan tingkatan untuk membangun, menghitung ukurannya dan menjalankan perulangan for bersarang, dengan satu perulangan untuk tinggi dan satu untuk lebar. Selanjutnya, ia menciptakan instance Brick baru yang ditempatkan sesuai lebar, tingginya, dan angka yang sesuai dengan i dan j.

Terakhir, batu bata ditambahkan ke vektor bricks untuk mengaksesnya di luar fungsi ini.


Langkah 26: Listener Permainan

Fungsi ini menambah atau menghapus mouse dan memasukkan listener frame. Ini menggunakan parameter untuk menentukan apakah listener harus ditambahkan atau dihapus: default adalah add.


Langkah 27: Fungsi Memulai Permainan

Kode berikutnya memanggil fungsi gameListeners() untuk memulai permainan.


Langkah 28: Pergerakan Bola

Kecepatan bola ditentukan oleh variabel xSpeed dan ySpeed, ketika fungsi update dijalankan, bola mulai bergerak menggunakan nilai-nilai ini setiap frame.


Langkah 29: Tabrakan Dinding

Kode ini memeriksa tabrakan antara bola dan dinding.


Langkah 30: Event Permainan Kalah

Sebuah pernyataan if digunakan untuk memeriksa ketika tongkat tidak mengenai bola. Jika demikian, pemain kehilangan nyawa.


Langkah 31: Tabrakan Tongkat-Bola

Ketika bola menyentuh tongkat, ySpeed diatur ke negatif untuk membuat bola naik. Kita juga memeriksa sisi mana dari bola yang dipukul untuk memilih sisi di mana ia akan bergerak selanjutnya.


Langkah 32: Tabrakan Bata

Kita menggunakan for dan hitTest untuk memeriksa tabrakan batu bata, ketika bola menyentuh batu bata, teknik yang sama yang digunakan dalam tongkat digunakan untuk menentukan sisi yang akan diikuti bola.


Langkah 33: Mengubah Arah Bola & Hapus Bata

Kode berikut mengubah arah Y bola dan menghilangkan bata dari panggung dan vektor.

Jika Anda suka, Anda bisa mengubah logika ini sehingga kecepatan y bola hanya berbalik jika menyentuh bagian atas atau bawah batu bata, dan bukan ketika menyentuh sisinya. Cobalah dan lihat apa yang Anda pikirkan.


Langkah 34: Tambahkan Skor dan Periksa Kemenangan

Setiap hit bata akan menambah 100 ke skor, skor akan diambil dari konstanta score dan ditambahkan ke skor saat ini menggunakan fungsi int dan String. Kode ini juga memeriksa apakah tidak ada lagi batu bata di Vector dan menampilkan peringatan jika demikian.


Langkah 35: Layar Alert

Layar Alert menampilkan informasi pemain tentang status permainan, hal ini ditunjukkan saat event permainan tercapai, seperti kehilangan nyawa atau menyelesaikan level.

Dua parameter digunakan dalam fungsi ini:

  • t: Judul peringatan
  • m: Pesan singkat

Langkah 36: Fungsi Restart

Fungsi selanjutnya memeriksa status permainan (menang, kalah, selesai) dan melakukan tindakan sesuai dengan itu.


Langkah 38: Ubah Tingkatan

Fungsi ini berubah ke tingkatan yang ditulis dalam parameter.


Langkah 39: Hapus Tingkatan

Sebuah fungsi untuk membersihkan sisa bata dan peringatan dari panggung. Ini juga akan mengatur ulang posisi dari tongkat dan bola.


Langkah 40: Menetapkan Kelas Main


Kita akan menggunakan Document Class dalam tutorial ini, jika Anda tidak tahu cara menggunakannya atau sedikit bingung, silakan baca QuickTip ini.


Kesimpulan

Hasil akhirnya adalah permainan yang dapat disesuaikan dan menghibur, coba tambahkan grafik dan level kustom Anda!

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

Advertisement
Advertisement
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.