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

Membuat 'Flux': Game Flash Sederhana Dengan Mekanika Gravitasi

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Taufan Prasetyo Basri (you can also view the original English article)

Dalam tutorial ini, saya akan menjelaskan langkah-langkah utama dan alur kerja untuk membuat game survival ruang sederhana, berdasarkan mekanika gravitasi yang dijelaskan dalam tutorial sebelumnya. Game ini ditulis dalam AS3 menggunakan FlashDevelop.


Memainkan permainan

Gunakan tombol panah kiri dan kanan untuk manuver kapal Anda, atas dan bawah tombol panah untuk menambah atau mengurangi ukuran Medan magnet yang dihasilkan, dan spasi untuk reverse polaritas. Mengumpulkan kristal putih untuk meningkatkan pasokan bahan bakar Anda - tapi menghindari yang merah, karena mereka menggunakannya. Tidak memukul batu, atau itu permainan berakhir!

Dalam tutorial ini, kita tidak benar-benar membuat permainan lengkap ditampilkan di atas; kita akan hanya memulai di atasnya, dengan membuat versi yang sangat sederhana dengan grafis primitif dan hanya satu jenis objek. Namun, pada akhir, Anda harus belajar cukup mampu untuk menambahkan fitur-fitur lainnya Anda sendiri!

Permainan itu sendiri sangat sederhana dalam kondisi saat - Lihatlah kritik ini untuk tips tentang bagaimana Anda dapat mengambil itu dari demo sederhana untuk permainan lengkap!


Mari kita mulai!

Mengatur proyek AS3 baru di FlashDevelop, dan menetapkan ukurannya untuk 550x600px.


Langkah 1: Mengidentifikasi objek permainan

Ada enam objek dalam partikel yang Anda dapat mengidentifikasi dari permainan di atas:

  • Pasokan energi - diwakili oleh objek bentuk oval putih
  • Asteroid - diwakili oleh batu-seperti objek
  • Konsumen energi - diwakili oleh bintang merah yang dibatasi dengan lampu hijau.
  • Bintang - latar belakang
  • Kisaran indikator - diwakili oleh lingkaran putih
  • Kapal - pemain objek

Tentu saja Anda dapat menambahkan objek lain untuk membuat permainan lebih interaktif atau menambahkan fitur baru. Untuk tutorial ini kita akan hanya membuat


Langkah 2: Kelas energi

Dari benda-benda yang kita diidentifikasi, empat dari mereka benar-benar bekerja dalam cara yang sama: dengan jatuh dari atas ke bawah.

Mereka adalah:

  • Bintang-bintang
  • Pasokan energi
  • Konsumen energi
  • Asteroid

Dalam tutorial ini, kita hanya akan membuat objek "energi supply", dari empat di atas. Jadi mari kita mulai dengan menciptakan objek-objek ini dan membuat mereka jatuh, dengan posisi pemijahan acak dan kecepatan.

Mulailah dengan membuat kelas energi:


Langkah 3: Kelas GameScreen

Kelas ini akhirnya akan menguasai sebagian besar aspek-aspek permainan kami, termasuk gerakan pemain dan loop permainan.

Membuat kelas:

Itu yang kita butuhkan untuk sekarang.


Langkah 4: Memperbarui kelas utama

Kita sekarang akan membuat sebuah instance dari GameScreen dalam utama:

Mengapa repot-repot? Yah, dengan cara ini, itu akan lebih mudah untuk menambah layar tambahan kemudian jika kita ingin (seperti preloader, layar judul, Permainan atas layar...).


Langkah 5: Memperkenalkan kelas Manajer

Untuk menghindari GameScreen kelas menjadi terlalu berantakan, kita akan menggunakan kelas terpisah untuk mengelola setiap objek.

Masing-masing manajer kelas akan berisi semua fungsi yang berhubungan dengan, dan berinteraksi dengan, suatu obyek tertentu. Di sini adalah kelas EnergyManager:

Perhatikan bahwa kita memerlukan referensi ke GameScreen untuk dilewatkan ke konstruktor, dan kami menyimpan referensi ini dalam variabel pribadi. Kami juga menyiapkan vektor untuk menyimpan referensi untuk semua benda energi.

Sejauh kelas berisi tidak ada fungsi lain; kami akan menambahkan mereka nanti.


Langkah 6: Menciptakan energi

Menambahkan di bawah fungsi untuk menciptakan energi, ini adalah hanya fungsi; kita akan memanggil fungsi kemudian dari GameScreen kelas:

Kami membuat pasokan energi baru dengan kecepatan 4, menambahkannya ke daftar tampilan (melalui GameScreen), tambahkan ke vektor dari semua energi objek bahwa kami hanya dibuat, dan mengatur posisi titik acak dalam batas-batas tertentu.

Calculation.generateRandomValue (#, #) adalah fungsi statis kita tidak menulis belum, jadi mari kita melakukan itu sekarang. Membuat kelas baru yang disebut perhitungan dan menambahkan fungsi ini:

Fungsi ini akan menghasilkan angka acak antara dua nilai yang dilewatkan ke. Untuk informasi lebih lanjut tentang cara kerjanya, lihat tips cepat ini. Karena ini adalah fungsi statis, kita tidak perlu untuk menciptakan sebuah contoh perhitungan untuk menyebutnya.

Sekarang, apa adalah bahwa fungsi addEnergyToScreen()? Kami belum ditetapkan bahwa belum, jadi mari kita lakukan sekarang. Menambahkan ini ke GameScreen:

Itu hanya menambah contoh berlalu energi ke dalam tampilan daftar. Mari kita juga membuat sebuah fungsi yang sesuai untuk menghapus objek tertentu energi dari layar:


Langkah 7: Pemijahan energi

Mari kita menetapkan timer yang mendefinisikan interval untuk setiap hal ikan bertelur. Kode ini berjalan dalam fungsi constructor GameScreen's:

Jadi, setiap tiga detik, timer akan memanggil spawnEnergy(). Mari kita menulis bahwa fungsi sekarang:


Langkah 8: Membuat pemain

Mari kita gunakan lingkaran lain, lebih besar untuk mewakili pemain. Merasa bebas untuk mengimpor gambar untuk digunakan sebagai gantinya:

Tambahkan kode ini ke GameScreen untuk menambahkan pemain ke layar:

Sejauh ini kita harus memiliki beberapa pasokan energi yang jatuh beberapa detik, dan pemain yang muncul di tengah layar:

playerandenergy.

Langkah 9: Bergerak pemain

Pada dasarnya ada dua cara untuk menerapkan gerakan:

  1. Menggunakan Boolean (benar/salah) nilai - benar = bergerak, palsu = tidak bergerak. Bila tombol panah kanan ditekan, nilai untuk "bergerak tepat" akan berubah ke true. Di setiap bingkai update, "bergerak benar" benar, kita meningkatkan objek x-nilai.
  2. Menggunakan langsung update setiap frame - ketika tombol panah kanan ditekan, objek disuruh untuk menggerakkan kanan segera, dengan meningkatkan nilai x.

Metode kedua tidak mengakibatkan halus gerakan ketika tombol ditekan terus-menerus, tetapi metode pertama tidak - sehingga kita akan gunakan metode pertama.

Ada tiga langkah sederhana untuk melakukan hal ini:

  1. Buat dua variabel Boolean, satu untuk memindahkan tepat dan satu untuk memindahkan kiri.
  2. Beralih Boolean ketika tombol ditekan atau dirilis:
  3. Berdasarkan Boolean ini, benar-benar memindahkan pemain setiap bingkai:

    Jangan lupa untuk terlebih dahulu membuat mendengarkan fungsi dari acara bingkai enter, "memperbarui":

    Mempertahankan pemain dalam batas-batas layar:

Berikut adalah bagaimana semua itu terlihat, di tempat:


Langkah 10: Memindahkan pasokan energi

Saat ini, pasokan energi pemijahan tetapi tidak bergerak. Kita akan menggunakan fungsi GameScreen.update() untuk membuat mereka bergerak, sejak beroperasi setiap bingkai.

Tambahkan kode ini ke GameScreen.update():

Sekarang tentu saja kita perlu membuat EnergyManager.moveAll() fungsi, sehingga menambahkan ini ke EnergyManager.as:


Langkah 10: Deteksi tumbukan

Kita akan perlu untuk memeriksa tabrakan antara setiap objek energi dan pemain. (Jika Anda mengembangkan permainan lebih lanjut, Anda harus memeriksa ini untuk asteroid dan konsumen energi, tetapi tidak untuk bintang.)

Tempat terbaik untuk menangani pemeriksaan yang ada di dalam EnergyManager, dipicu setiap bingkai oleh GameScreen.

Satu hal yang perlu dipertimbangkan: tumbukan cek akan antara dua lingkaran, sehingga hitTestObject() tidak ideal. Sebaliknya, kita akan menggunakan metode yang dijelaskan dalam tutorial ini.

Kita dapat menulis fungsi sebagai berikut:

  • Garis 32: dicatat bahwa kita melewati dalam rujukan kepada pemain, sehingga kita dapat mengakses posisinya.
  • Jalur 38: Necro adalah singkatan energi Supply.
  • Line 40 & 41: menemukan perbedaan di x - dan y koordinat pemain dan pasokan energi yang kita saat ini memeriksa.
  • Baris 43: menghitung jarak antara objek melalui Pythagoras.
  • Baris 45: Periksa tabrakan; 28 adalah jumlah dari jari-jari dua objek (radius pemain adalah 20, energi radius adalah 8).
  • Line 46 & 47: menghapus pasokan energi dari layar dan vektor.
  • Jalur 51: Tambahkan maksimal satu unit energi per frame.

Anda bisa mengubah jalur 51 untuk energyTransfer + = 1, untuk memungkinkan pemain untuk menyerap lebih dari satu objek energi sekaligus. Terserah kepada Anda - mencobanya dan melihat bagaimana hal itu mempengaruhi permainan.


Langkah 11: Panggilan tabrakan deteksi rutin

Kita perlu memeriksa tabrakan setiap bingkai, jadi kita harus memanggil fungsi kami hanya menulis dari GameScreen.update().

Pertama, kita perlu membuat sebuah integer variabel untuk menyimpan nilai transfer energi dari fungsi deteksi tabrakan. Kita akan menggunakan nilai ini untuk meningkatkan energi kapal dan menambah Skor pemain.


Langkah 12: Hukum Newton mengenai gravitasi

Sebelum kita pergi ke menciptakan Permainan montir untuk fungsi 'Push' dan 'Menarik' kapal, saya ingin memperkenalkan konsep fisika yang didasarkan montir.

Idenya adalah untuk menarik objek ke arah pemain dengan gaya. Hukum gravitasi Universal Newton memberikan kita formula matematika yang besar (dan sederhana) yang kita dapat menggunakan untuk ini, dimana angkatan ini tentu gaya gravitasi:

G adalah hanya beberapa, dan kita bisa mengaturnya untuk apa pun yang kita sukai. Demikian pula, kita dapat mengatur massa setiap objek dalam permainan untuk setiap nilai yang kita sukai. Gravitasi terjadi di jarak yang tak terbatas, tetapi dalam permainan kami, kita akan memiliki cut-off point (dilambangkan oleh lingkaran putih dalam demo dari awal tutorial).

Dua hal yang paling penting untuk dicatat tentang formula ini adalah:

  • Kekuatan tergantung di alun-alun jarak antara dua objek (jadi jika objek adalah dua kali lebih jauh, kekuatan yang satu-seperempat kuat).
  • Arah kekuatan adalah sepanjang garis langsung menghubungkan dua objek melalui ruang.

Langkah 13: Merevisi konsep-konsep matematika

Sebelum kita mulai pengkodean mekanika gamenya untuk fungsi 'Push' dan 'Menarik', mari kita menjadi jelas pada apa yang kita inginkan itu harus dilakukan:

frameWork

Pada dasarnya, kita want A (pemain) untuk mengerahkan kekuatan tertentu pada B (kristal), dan memindahkan B menuju A berdasarkan bahwa gaya.

Kita harus merevisi beberapa konsep:

  • Flash hanya berfungsi di radian, bukan derajat.
  • Sistem koordinat Flash memiliki sumbu yang terbalik: turun berarti peningkatan y.
  • Kita bisa mendapatkan sudut garis yang menghubungkan A ke B menggunakan Math.atan2 (B.y - A.y, B.x - A.x).
  • Kita dapat menggunakan trigonometri untuk mengetahui berapa banyak kita perlu bergerak B sepanjang setiap sumbu, berdasarkan sudut ini dan Angkatan:
    • B.x + = (Force*Math.cos(angle));
    • B.y + = (Force*Math.sin(angle));
  • Kita dapat menggunakan teorema Pythagoras's untuk mengetahui jarak antara dua objek:

Untuk selengkapnya, lihat tutorial gravitasi dalam tindakan dan trigonometri untuk pengembang permainan Flash.


Langkah 14: Menerapkan mendorong dan menarik

Berdasarkan penjelasan sebelumnya, kita dapat datang dengan garis besar untuk kode kita yang menarik setiap kristal ke kapal:

  1. Menemukan perbedaan di x dan y antara kapal dan kristal tertentu.
  2. Menemukan sudut antara mereka, dalam radian.
  3. Mencari jarak antara mereka, menggunakan Pythagoras.
  4. Memeriksa apakah objek dalam bidang gravitasi kapal.
  5. Jika demikian, menghitung gaya gravitasi, dan...
  6. .. .apply Angkatan, mengubah x dan y nilai Crystal.

Contoh kode:

  • Line 53: mendapatkan referensi untuk pemain.
  • Line 55: kita loop melalui setiap objek energi.
  • Line 61: menemukan sudut antara kapal dan energi.
  • Line 63: menemukan jarak antara mereka, juga.
  • Line 65: memeriksa apakah energi dalam kapal Angkatan lapangan.
  • Jalur 67: menggunakan rumus:
    • 4 = G, "terus-menerus gravitasi" Aku telah memilih.
    • 50 = m1, massa kapal pemain.
    • 10 = m2, massa objek energi.
  • Line 69: menerapkan gerakan.

Inilah timelapse menampilkan bagaimana ini terlihat:

Perhatikan bahwa energi bergerak cepat semakin dekat sampai ke kapal, berkat r-squared istilah.

Kita dapat menerapkan fungsi mendorong hanya dengan membuat kekuatan negatif:

Di sini objek bergerak lebih lambat karena mendapat lebih jauh dari pemain, karena kekuatan mendapat lebih lemah.


Langkah 15: Oleskan montir

Tentu saja bahwa Anda akan memerlukan fungsi ini akan dijalankan setiap bingkai oleh GameScreen - tetapi sebelum itu, kita perlu menggunakan Boolean fungsi untuk beralih antara dua fungsi:

Kita akan menggunakan benar untuk 'Push' dan palsu untuk 'Tarik'.

Di dalam KeyDownHandler():

Setelah itu, Anda akan memiliki untuk memeriksa setiap frame Boolean. Menambahkan ini ke update() akan membuat:


Langkah 16: modifikasi

Anda mungkin menemukan bahwa gerakan tidak terlihat begitu baik. Ini bisa menjadi karena kekuatan tidak cukup ideal, atau karena istilah r-squared.

Saya ingin mengubah formula seperti begitu:

Seperti yang Anda lihat, saya sudah dikurangi nilai "G" untuk 0.8, dan mengubah Angkatan bergantung hanya pada jarak antara objek, daripada jarak kuadrat.

Mencobanya dan melihat jika Anda menikmati perubahan. Anda selalu dapat mengubahnya namun Anda suka.


Langkah 17: Kelas teks

Kita akan perlu untuk menunjukkan beberapa teks pada layar, untuk menunjukkan nilai dan kapal sisa kekuatan.

Untuk tujuan ini, kita akan membangun kelas baru, teks:

Sangat sederhana; Hal ini pada dasarnya sebuah movieklip dengan bidang teks di dalamnya.


Langkah 18: Menambahkan kekuatan untuk pemain

Untuk memberikan beberapa tantangan permainan, kami akan membuat kapal kekuatan terbiasa perlahan-lahan, sehingga pemain harus mengumpulkan energi objek untuk mengisi ulang.

Untuk membuat kapal kekuatan muncul di kapal itu sendiri, kita hanya dapat menambahkan contoh teks ke objek kapal tampilan daftar.

Menyatakan variabel ini dalam kelas kapal tersebut:

Kita akan perlu untuk menjaga jumlah daya (baik disimpan dan ditampilkan) diperbarui setiap bingkai, sehingga menambahkan fungsi baru untuk pemain:

Pertama, dalam konstruktor:

Dan kemudian...

Kekuatan akan berkurang setiap bingkai oleh 1/24 unit, berarti itu akan mengurangi dengan satu unit penuh setiap detik.

Kita perlu membuat ini menjalankan setiap bingkai, jadi Tambahkan baris ini untuk GameScreen.update():


Langkah 19: Membuat energi meningkatkan daya

Ketika kapal bertabrakan dengan objek energi, kami menginginkannya untuk meningkatkan kekuatan.

Dalam GameScreen.update(), tambahkan baris yang disorot:

Ingat Anda dapat mengubah berapa banyak daya dikembalikan dalam fungsi EnergyManager.checkCollision().


Langkah 20: Menyiapkan Skor

Sekali lagi, kita akan membutuhkan kelas teks. Saat ini, kami akan menampilkan "Nilai" dan kemudian nilai.

Di sini, kami akan memerlukan ketiga variabel lain:

  • Teks "Nilai".
  • Skor nilai teks.
  • Variabel untuk menyimpan nilai sebenarnya.

Menyatakan di kelas GameScreen ini:

Dalam konstruktor, tambahkan kode ini:

Sekarang, dalam fungsi update() akan membuat, menambahkan ini:

Thats it - kami telah membuat versi dasar dari permainan di atas!

Lihat (Anda mungkin perlu untuk reload halaman):


Fitur tambahan dan Polishing

Latar Ruang

Mungkin Anda juga ingin latar belakang dengan gambar tertanam dan bintang-bintang. Menambahkan ini ke kelas utama Anda:

Sekarang membuat kelas bintang:

Dalam konstruktor Main(), tambahkan ini membuat bintang-bintang:

Berikut adalah sebenarnya createStars() fungsi:

Dengan alpha acak, ukuran, posisi, dan kecepatan, latar belakang pseudo-3D dapat dihasilkan.

Berbagai indikator

Berbagai indikator lingkaran dapat dilakukan hanya dengan membuat lingkaran lain dan menambahkannya ke daftar layar kapal, seperti bagaimana Anda menambahkan teks indikator kekuatan. Pastikan lingkaran berpusat pada kapal, dan memiliki radius sama dengan kapal push/pull jangkauan.

Tambahkan transparansi (alpha nilai) ke lingkaran dengan kode di bawah ini:

Mencoba menambahkan kontrol tambahan yang membuat rentang yang menambah atau mengurangi ketika panah atas dan bawah tombol ditekan.


Kesimpulan

Saya harap Anda menikmati tutorial ini! Harap meninggalkan komentar Anda.

Next: Membaca kritik ini untuk panduan mengambil fluks dari demo sederhana untuk permainan lengkap!

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.