Advertisement
  1. Code
  2. Effects

Efek partikel Jalak untuk Stage3D Shooter permainan

Scroll to top
Read Time: 15 min
This post is part of a series called Shoot-'Em-Up.
Quick Tip: Add a Blurry Trail Effect to Your Bullets
Build a Stage3D Shoot-'Em-Up: Explosions, Parallax, and Collisions

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

Aku yakin Stage3D tidak asing bagi sebagian besar pembaca; itu adalah API baru yang memberikan AS3 programmer akses ke GPU. Namun, coding melawan opcodes di Stage3D tidak mungkin setiap orang pilihan, sehingga sangat beruntung bahwa ada jalan pintas: Starling, sebuah perpustakaan yang dikembangkan untuk merangkum tingkat rendah pemrograman untuk membuatnya lebih mudah. Dan bersama dengan Starling, muncul efek perluasan partikelnya. Dalam tutorial ini, kita akan memeriksa sistem partikel kerangka ini, dan melihat aplikasinya diterapkan pada permainan tembak-menembak.


Langkah 1: Konfigurasi dasar

Abaikan langkah ini jika Anda telah bekerja dengan FlashDevelop untuk beberapa waktu. Untuk pemula, di sini adalah bagaimana Anda menginstal sebuah paket perpustakaan - di Starling kasus ini dan extensinya partikel. Perhatikan bahwa kedua item tidak datang dalam satu paket, jadi kita harus men-download secara terpisah.

Pertama, unduh Starling framework dan ekstensi partikelnya dari repositori mereka. Buka zip saat unduhan berhasil. Memindai direktori pertama membuka ritsleting src folder dan paste Starling Perpustakaan kerangka, disorot dalam gambar di bawah, ke dalam folder sumber proyek.

Install Starling libraryInstall Starling libraryInstall Starling library

Memindai folder kedua perpanjangan partikel dan menggabungkan mereka bersama-sama. Anda dapat menarik folder yang disorot di bawah ini ke Starling folder. Gambar di bawah ini adalah hasil akhir Anda harus tiba di.

Install particle extension onto Starling

Untuk info lebih lanjut tentang FlashDevelop dan menggunakan perpustakaan eksternal, lihat tutorial ini:


Langkah 2: Kelas Utama

Jika Anda tidak telah diperkenalkan untuk Jalak dan extensinya partikel sudah, saya sangat menyarankan kunjungan ke Lee Brimelow video tutorial pada efek Jalak dan partikel, dan Matius Chung tutorial tentang penanganan animasi negara dengan Starling.

Kita akan hanya angin melalui dasar dalam dua langkah di sini. Jika Anda sudah dikenal oleh Jalak dan extensinya partikel, merasa bebas untuk beralih ke langkah 4.

Dapat Anda lihat dari gambar kedua langkah sebelumnya (bagian bawah) bahwa dua kelas sedang dibuat: Main.as dan Testing.as. Yang pertama bertindak sebagai sebuah peluncur untuk yang kedua. Jadi, sebagian besar kehidupan kode Starling dalam Testing.as. Aku sudah menyoroti kode penting dalam Main.as berikut:

... dan Testing.as akan terlihat seperti ini:

Dan jika semuanya sudah disetel dengan benar, Anda harus tiba di hasil seperti yang ditunjukkan di bawah ini. Tidak banyak, hanya sebuah sprite di panggung.

Catatan: Testing.as memperpanjang Sprite dari Starling.display.Sprite, tidak flash.display.Sprite. Kelas yang memiliki nama yang sama, tetapi tidak sama.


Langkah 3: Ekstensi Partikel di Starling

Ekstensi partikel Jalak berisi tiga kelas yang penting. Fungsi mereka tabel di bawah ini.

Nama kelas Fungsi
Particle.AS Satu partikel tunggal dengan atribut yang unik.
ParticleSystem.as Mengontrol aliran partikel: generasi, animasi dan daur ulang.
ParticleDesignerPS.as Perpanjangan dari ParticleSystem.as untuk memungkinkan manipulasi mudah sistem partikel.

Kami akan membuat sebuah instance dari ParticleDesignerPS.as. Hal ini memerlukan memasukkan berikut argumen ke konstruktor kelas:

  • file XML yang berisi semua inisiasi nilai untuk partikel properti (cukup jumlah mereka)
  • gambar untuk sampel untuk semua partikel

Jangan khawatir, onebyonedesign.com akan membantu Anda mengatasi hal ini. Kunjungi halaman perancang partikelnya dan sesuaikan semua nilai inisiasi ini dengan isi hati Anda. Kemudian Ekspor semua data ke ZIP format. ZIP file ini akan berisi XML file dan gambar untuk efek partikel Anda dirancang hanya melalui halaman web mereka!

Save particle details.Save particle details.Save particle details.

Unzip dan menarik semua ini ke dalam folder sumber dalam FlashDevelop. Melihat item yang disorot dalam gambar di bawah ini.

Integrate with source folder.

Menghasilkan pernyataan impor untuk mendapatkan kedua item ke kelas pengujian Anda. Anda juga perlu untuk menulis ulang metode init dalam pengujian. Mereka semua di bawah.

Inilah hasil yang harus Anda capai. Agak sederhana, bukan?


Langkah 4: Memahami sistem partikel

Langkah berikutnya adalah untuk memungkinkan interaksi dengan sistem partikel (api kecil) pada saat runtime. Kita akan menggunakan mouse untuk mengendalikan sifat api. Namun sebelum kita lakukan, saya ingin sidetrack sedikit untuk singkat Anda pada konsep sistem partikel.

Partikel yang hanya sprite yang mendapatkan dipancarkan dari koordinat. Setelah melahirkan, mereka akan menghidupkan pola tertentu. Pola ini dapat menjadi unik untuk setiap partikel atau umum untuk semua partikel. Tapi yakinlah, sifat fisik mereka akan berubah dari waktu ke waktu. Sebagai contoh:

  • Jarak dari koordinat kelahiran
  • Arah dan kecepatan
  • Tingkat warna dan alpha
  • Ukuran

Juga, hidup mereka di panggung ditentukan pada saat lahir. Jika setiap partikel diperbolehkan untuk hidup selamanya di panggung, kita akan memiliki kelebihan penduduk dan kinerja aplikasi akan menderita karena memiliki banyak aset grafis untuk menangani. Pada titik tertentu, partikel itu mati tetapi tidak terlepas dari panggung. Ini didaur ulang sebagai gantinya, dengan dipindahkan ke koordinat kelahiran dan mengambil peran partikel baru. Ini adalah sebuah partikel baru karena set baru properti akan ditentukan untuk itu kemudian sebelum animasi yang tendangan dan lain siklus terus.

(Ini adalah objek penggabungan, dan Anda dapat melihat bagaimana menerapkannya pada proyek Anda sendiri bebas - Starling Flash di sini.)

Oke, jadi bagaimana ini berhubungan dengan api kami? Yah, kita dapat menggunakan meredakan fungsi untuk menghidupkan sifat kebakaran ini dari waktu ke waktu. Dalam kerangka Starling, ParticleDesignerPS terletak di ujung hirarki ini:

ParticleDesignerPS > ParticleSystem > DisplayObject > EventDispatcher > Object

Untuk menyerang keseimbangan, kita hanya akan menelusuri sifat warisan dari ParticleSystem. Ayo kita lihat ini langkah berikutnya...


Langkah 5: Sifat ParticleSystem dan ParticleDesignerPS

Berikut adalah sifat ParticleSystem.

Properti Deskripsi
kapasitas Maksimum partikel sistem dapat membawa setiap saat. Peningkatan dalam langkah 500 setelah jumlah partikel melebihi kapasitas saat ini. Baca-saja.
numParticles Jumlah partikel dalam sistem pada waktu tertentu. Baca-saja.
emissionRate Jumlah partikel yang dihasilkan dari kelahiran koordinat setiap detik.
emitterXemitterY Kontrol titik untuk wadah di mana semua partikel hidup.

blendFactorSource, blendFactorDestination

Context3DBlendFactor definisi untuk sumber dan tujuan. Tujuan merujuk kepada piksel warna dari render terbaru dan sumber mengacu warna pixel baru untuk menarik ke tujuan.
tekstur Gambar saat ini sampel sebagai tekstur partikel. Baca-saja.

Orang-orang dari ParticleDesignerPS tabel dalam tabel berikut. Sebagian besar properti ini bisa menjadi baik-baik saja disetel oleh keadaan awal dan akhir. Sebagai contoh, semua partikel yang dihasilkan akan memulai dengan ukuran 1.0 dan menghentikan 0.1. Namun, partikel aliran akan membosankan jika semua partikel dimulai dan diakhiri seperti Serikat serupa, sehingga ParticleDesignerPS ketentuan untuk varians dari nilai awal, dan kadang-kadang varians penghentian nilai juga.

Mengutip contoh mereka, jika kita memberikan varians dari 0,2 pada partikel ukuran awal, berturut-turut partikel melahirkan atau didaur ulang ke dalam sistem akan memulai ukuran mereka di suatu tempat antara 0.8 ~ 1.2 dan berakhir pada 0.1.

Properti Deskripsi
emitterXVariance, emitterYVariance Variasi koordinat kelahiran.
startSizestartSizeVariance Ukuran awal dan varians
endSize, endSizeVariance Ukuran terminasi dan varians
emitAngle, emitAngleVariance Partikel awal arah dan varians
speedspeedVariance Partikel kecepatan awal dan varians
gravityX Percepatan sepanjang sumbu x pada semua partikel awal kecepatan
gravityY Percepatan sepanjang sumbu pada semua partikel awal kecepatan
tangentialAcceleration, tangentialAccelerationVariation Tingkat rotasi partikel kecepatan, dan varians

Ada dua jenis aliran partikel yang ditetapkan dalam ParticleDesignerPS: gravitasi dan radial. Ditunjukkan dalam tabel di atas adalah sifat yang Anda dapat men-tweak jika Anda menggunakan gravitasi. Untuk gravitasi, kelahiran koordinat partikel terletak di emitterX dan emitterY. Untuk radial, koordinat kelahiran untuk partikel terletak agak jauh dari emitorX dan emitorY, dan mereka bergerak ke arahnya. Tabel di bawah ini menunjukkan sifat-sifat aliran radial.

Properti Deskripsi
maxRadius, maxRadiusVariance Radius maksimum dari pusat, dan varians
minRadius Radius minimal dari pusat
rotationPerSecond, rotationPerSecondVariance Tingkat rotasi pada kecepatan partikel
startColor, startColorVariance Warna awal dan varians
endColor, endColorVariance Penghentian warna dan varians

Langkah 6: Menambahkan Interaktivitas

Yah, terima kasih untuk menampung jalan memutar yang kecil. Sekarang untuk beberapa ActionScript. Dalam metode init, kita akan menambahkan pendengar ke panggung untuk acara-acara berhubungan.

Dan pendengarnya seperti di bawah ini.

Untuk melakukan animasi, misalnya Tween didefinisikan. Manipulasi yang sangat mirip dengan yang populer Tween mesin dalam banyak cara. Kemudian, kami menambahkannya ke juggler instance Starling saat ini. Objek juggler ini akan membantu memperbarui contoh Tween secara progresif dari waktu ke waktu.

Hasilnya di bawah ini. Klik dan tarik mouse Anda di sekitar panggung.


Langkah 7: Menyiapkan kapal

Mari kita mengatur kapal kami sekarang dan menaruh jejak di atasnya. Aset dari opengameart.org dan saya telah menyertakan mereka dalam paket download. Memeriksa situs tersebut keluar untuk lain bebas seni permainan.

Kami akan mulai lagi dengan kelas lain, TestingShip.as. Pertama, impor gambar pesawat ruang angkasa 'boss1.png'.

.. .followed oleh sedikit setup untuk initialise di init metode:

Memperbarui posisi dan orientasi loc (lokasi) dan lof (line of sight).

Sekali lagi, klik dan seret dalam tahap untuk melihat efek:


Langkah 8: Menyiapkan Trail Knalpot

Oke, knalpot kapal adalah di atas kapal itu sendiri, dan pesawat ruang angkasa tidak menanggapi mouse acara. Kami akan memperbaikinya sekarang. Hanya offset emitterX dan emitterY partikel mengalir jarak beberapa dari pesawat ruang angkasa dan memperbarui rotasi pesawat ruang angkasa yang menggunakan lof.

(Perhatikan bahwa lof diperbaharui pada acara mouse. Anda akan melihat script langkah berikutnya.)


Langkah 9: Menavigasi Kapal

Mari kita coba untuk program navigasi kapal sekarang, di pengutusan acara mouse. Aku hanya sudah berkomentar baris penting:

Dan di sini adalah menunjukkan hasil akhir. Tarik mouse di sekitar panggung dan pesawat ruang angkasa akan pergi ke sana.


Langkah 10: Menghidupkan knalpot

Mari kita selaraskan knalpot kita. Saat kapal bergerak, knalpot pasti akan bertiup lebih kencang, kan? Kita dapat meningkatkan emissionRate dan mempercepat ketika menggerakkan kapal, dan mengundurkan emissionRate ketika terhenti. Inilah acara yang disorot:

Dan di sini adalah fungsi panggilan pada peristiwa-peristiwa.

Klik dan tarik kembali, dan memperhatikan panjang knalpot.


Langkah 11: Efek paralaks

Partikel juga dapat mengekspresikan seberapa cepat kapal bergerak relatif terhadap lingkungannya. Lihat output di bawah ini. Klik dan seret mouse Anda. Mengamati kecepatan di mana partikel sekitarnya bergerak. Mereka meningkatkan saat Anda berinteraksi dengan kapal, dan memperlambat ketika Anda berhenti interaksi. Mereka juga orient rotasi mereka sesuai.

Mengkonfigurasi efek ini relatif mudah di app dipamerkan oleh onebyonedesign.com. Namun, kita harus kode ActionScript beberapa untuk mengubahnya pada saat runtime, dan ini akan mengambil beberapa langkah berikutnya.


Langkah 12: Satu emitor di depan

Inisiasi partikel mengikuti format yang mirip dengan contoh sebelumnya. Anda dapat memilih untuk mengubah efek Anda dengan aplikasi dari onebyonedesign.com dan mengimpor ke panggung Anda. Saya hanya kode langsung ke ActionScript untuk kemudahan.

Kita juga akan perlu untuk menempatkan emitor partikel kecil kaki depan kapal.

Dan update vektor ini pada saat runtime.


Langkah 13: Penyebaran

Soalnya, emitorXVariance dan emitterYVariance menangani sumbu secara terpisah. Ini berarti bahwa jika kita memutar pesawat ruang angkasa, kita perlu beberapa cara untuk menentukan panjang penyebaran sepanjang dua sumbu ini.

Spread issue in emitterSpread issue in emitterSpread issue in emitter

Sekarang memeriksa vektor untuk garis pandang. Hal ini selalu tegak lurus dengan garis penyebaran (baris gelap tipis). Kita dapat meningkatkan vektor ini sesuai dan swizzle dengan x dan y dengan emitor 's varians pada titik awal. Periksa demo di bawah. Klik dan tarik mouse Anda di sekitar. Anda akan melihat aliran partikel lebih jelas.

Terakhir, skala besar penyebaran dan menaruhnya sedikit lebih jauh sebelum kapal jadi pemain tidak akan melihat emisi mereka titik.


Langkah 14: Pacu Akselerasi

Akhirnya kapal mempercepat, mari kita meningkatkan besarnya gravityX dan gravityY, ditambah knalpot, sesuai.


Langkah 15: Kapal diserang

Seperti Anda maju dalam permainan, Anda pasti akan mengambil hits dan menderita kerusakan. Sebagai kerusakan menjadi parah, Anda kapal akan membakar. Efek seperti itu dapat dihasilkan di sini; kita dapat menggunakan emissionXVariance dan emissionYVariance untuk mendefinisikan area burn. Saya telah menyoroti mereka dalam kode di bawah ini.

Kerusakan keparahan ditandai oleh daerah dan intensitas membakar. Meningkatkan dan mengurangi emissionRate untuk mensimulasikan ini. Saya telah menambahkan kontrol pada keyboard "A" dan "S" untuk meniru ini.

Catatan bahwa jika Anda meningkatkan umur dari partikel, api tampaknya membakar lebih intens. Yah, itu butuh waktu untuk melakukan interpolasi partikel dari ukuran awal untuk mengakhiri ukuran, jadi jika Anda meningkatkan umur, akhir yang lebih lama untuk transisi dari awal lebih besar untuk lebih kecil ukuran. Seperti partikel besar lainnya tinggal di tempat yang sama lagi, mereka berbaur bersama-sama untuk memberikan kesan lebih intens api.


Langkah 16: Membakar Kapal

Tekan tombol "" melihat api yang membakar lebih intens dan kunci "S" sedikit memadamkan itu. Warna knalpot telah perubahan, untuk membedakannya dari pembakaran:


Langkah 17: Kapal meledak

Semua permainan yang baik harus berakhir di beberapa titik. Terlepas dari yang adalah dihapuskan, sebuah ledakan yang baik untuk menyelesaikan tidak boleh dilewatkan. Jadi bagaimana tentang awan jamur nuklir? Klik pada demo di bawah ini untuk melihat satu.

Sekarang, mari kodekan.


Langkah 18: Aliran Radial partikel

Aliran partikel ini sedikit berbeda dari yang telah kita lihat. Sebelumnya kami telah menggunakan partikel aliran tipe 0 (gravitasi) dan ini adalah tipe 1 (radial). Partikel benar-benar bergerak ke tengah pada kecepatan konstan.

Saya mengubah varian sudut emisi ke level tertinggi sehingga Anda dapat melihat semua partikel yang dihasilkan membentuk lingkaran. Kemudian, dengan menjiwai jari-jari maksimum dan jari-jari minimum, partikel-partikel ini harus hidup dalam waktu yang lama, menggunakan Tween, kami mencapai hasil ini.

Berikut adalah kode untuk melakukan animasi.


Langkah 19: rekap

Jadi ini telah tutorial yang panjang. Mari kita sedikit rekap di sini. Kami telah pergi melalui:

  • Menyiapkan Starling dan ekstensi partikelnya
  • Sifat-sifat sistem partikel
  • Contoh properti manipulasi berdasarkan skenario permainan penembak.

Kesimpulan

Kami telah membahas sedikit di sini. Namun, satu aspek penting yang belum saya lalui adalah memperluas dari ParticleSystem. Ini benar-benar akan memberikan Anda kekuatan untuk kode Anda sendiri jalur partikel daripada mengandalkan pada ParticleDesignerPS. Saya akan harus menunda ini untuk tutorial lain.

Terima kasih untuk membaca dan melihat Anda dalam tutorial selanjutnya. Meninggalkan komentar pada kesalahan dan mesin partikel ini digunakan dalam proyek Anda jika Anda memilih untuk mengadopsi itu.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.