Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. Programming
Gamedevelopment

Buat Permainan Pop Anda Dengan Kesan Partikel dan Quadtrees

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Meyria (you can also view the original English article)

Jadi, anda mahu letupan, api, peluru, atau mantra sihir dalam permainan anda? Sistem zarah memberikan kesan grafis yang mudah untuk mempercepat permainan anda sedikit. Anda boleh memainkan lebih banyak pemain dengan membuat zarah berinteraksi dengan dunia anda, memantul persekitaran dan pemain lain. Dalam tutorial ini, kami akan melaksanakan beberapa kesan zarah yang mudah, dan dari sini kita akan bergerak untuk menjadikan zarah-zarah itu meletus dari dunia di sekelilingnya.

Kami juga akan mengoptimumkan perkara dengan melaksanakan struktur data yang disebut quadtree. Quadtrees membolehkan anda menyemak perlanggaran lebih cepat daripada yang anda boleh tanpa satu, dan mereka mudah untuk melaksanakan dan memahami.

Nota: Walaupun tutorial ini ditulis menggunakan HTML5 dan JavaScript, anda harus menggunakan teknik dan konsep yang sama dalam hampir semua persekitaran pembangunan permainan.

Untuk melihat demo dalam artikel, pastikan anda membaca artikel ini dalam Chrome, Firefox, IE 9, atau pelayar lain yang menyokong HTML5 dan Kanvas.

Perhatikan bagaimana zarah mengubah warna ketika mereka jatuh, dan bagaimana mereka melantunkan bentuknya.

Apakah Sistem Zarah?

Sistem zarah adalah cara mudah menghasilkan kesan seperti kebakaran, asap, dan letupan.

Anda membuat pemancar zarah, dan ini melancarkan "zarah kecil" yang boleh anda paparkan sebagai piksel, kotak, atau bitmaps kecil. Mereka mengikuti fizik Newtonian mudah dan menukar warna apabila mereka bergerak, menghasilkan kesan dinamik, disesuaikan, grafik.


Permulaan Sistem Zarah

Sistem zarah kita akan mempunyai beberapa parameter mudah alih:

  • Berapa banyak zarah ia meludah keluar setiap saat.
  • Berapa lama zarah dapat "hidup".
  • Warna setiap zarah akan beralih melalui.
  • Kedudukan dan sudut zarah akan muncul dari.
  • Berapa cepat zarah akan pergi apabila mereka bertelur.
  • Berapa banyak graviti harus mempengaruhi zarah.

Sekiranya setiap zarah menghasilkan sama, kita hanya mempunyai aliran zarah, bukannya kesan zarah. Oleh itu, mari juga membenarkan variasi yang boleh dikonfigurasikan. Ini memberi kami beberapa parameter lagi untuk sistem kami:

  • Berapa sudut pelancaran mereka boleh berbeza-beza.
  • Berapa banyak halaju awal mereka boleh berubah-ubah.
  • Berapa banyak seumur hidup mereka boleh berbeza-beza.

Kami berakhir dengan kelas sistem zarah yang bermula seperti ini:


Membuat Aliran Sistem

Setiap bingkai kita perlu melakukan tiga perkara: membuat zarah baru, gerakkan zarah yang ada, dan lukis zarah.

Membuat Zarah

Mewujudkan zarah adalah sangat mudah. Sekiranya kita mencipta 300 partikel sesaat, dan 0.05 saat sejak kerangka terakhir, kita membuat 15 zarah untuk bingkai (yang purata kepada 300 sesaat).

Kita perlu mempunyai gelung mudah yang kelihatan seperti ini:

Fungsi spawnParticle() kami menghasilkan zarah baru berdasarkan parameter sistem kami:

Kami memilih halaju awal kami dari sudut rawak dan kelajuan. Kami kemudian menggunakan kaedah fromPolar() untuk membuat vektor halaju Cartesian dari kombinasi sudut/kelajuan.

Trigonometri asas menghasilkan kaedah fromPolar:

Sekiranya anda perlu menyusun trigonometri sedikit, semua trigonometri yang kami gunakan diperoleh daripada Circle Unit.

Pergerakan zarah

Pergerakan zarah mengikut undang-undang Newtonian asas. Zarah semua mempunyai halaju dan kedudukan. Halaju kita bertindak oleh gaya graviti, dan kedudukan kita berubah secara proporsional kepada graviti. Akhir sekali, kita perlu menjejaki kehidupan zarah masing-masing, jika zarah tidak akan mati, kita akan mengalami terlalu banyak, dan sistem itu akan terhenti. Kesemua tindakan ini berlaku secara proporsional kepada masa antara bingkai.

Lukisan Zarah

Akhirnya kita perlu menarik zarah kita. Bagaimana anda melaksanakannya dalam permainan anda akan berbeza-beza secara besar-besaran di platform ke platform, dan bagaimana canggih anda ingin menjadikannya. Ini boleh semudah meletakkan satu pixel berwarna, untuk menggerakkan sepasang segi tiga untuk setiap zarah, yang ditarik oleh shader GPU kompleks.

Dalam kes kami, kami akan memanfaatkan API Canvas untuk menarik segi empat tepat kecil untuk zarah.

Interpolasi warna bergantung kepada sama ada platform yang anda gunakan membekalkan kelas warna (atau format perwakilan), sama ada ia menyediakan interpolator untuk anda, dan bagaimana anda hendak mendekati keseluruhan masalah. Saya menulis kelas kecerunan kecil yang membolehkan interpolasi mudah antara pelbagai warna, dan kelas warna kecil yang menyediakan fungsian untuk interpolasi antara mana-mana dua warna.


Inilah sistem zarah kita dalam tindakan!

Memantul zarah

Seperti yang anda lihat dalam demo di atas, kini kami mempunyai beberapa kesan zarah asas. Mereka tidak mempunyai sebarang interaksi dengan alam sekitar di sekelilingnya. Untuk membuat kesan ini sebahagian daripada dunia permainan kami, kami akan memantul dinding di sekitarnya.

Untuk memulakan, sistem zarah kini akan mengambil collider sebagai parameter. Ia akan menjadi pekerjaan collider untuk memberitahu partikel sama ada ia telah jatuh ke dalam apa-apa. Langkah() kaedah zarah kini kelihatan seperti ini:

Sekarang setiap kali zarah bergerak, kami meminta penjejaki sama ada laluan pergerakannya telah 'bertembung' melalui kaedah getIntersection(). Jika ya, kami menetapkan semula kedudukannya (supaya ia tidak berada di dalam apa jua ia bersilang), dan mencerminkan halaju.

Pelaksanaan "collider" asas boleh kelihatan seperti ini:

Perhatikan masalah? Setiap zarah perlu memanggil collider.getInterection() dan kemudian setiap panggilan getInterection perlu menyemak terhadap setiap "dinding" di dunia. Jika anda mempunyai 300 zarah (jenis nombor yang rendah), dan 200 dinding di dunia anda (tidak munasabah sama ada), anda melakukan 60,000 ujian persilangan talian! Ini boleh mengisar permainan anda dengan berhenti, terutamanya dengan lebih banyak zarah (atau dunia yang lebih kompleks).


Pengesanan Penutupan Lebih Pantas Dengan Quadtrees

Masalah dengan collider mudah kami ialah ia memeriksa setiap dinding bagi setiap zarah. Sekiranya zarah kita berada di kuadran kanan atas skrin, kita tidak sepatutnya membuang masa memeriksa sama ada ia terhempas ke dinding yang hanya di bahagian bawah atau kiri skrin. Oleh itu, kami ingin memotong apa-apa cek untuk persimpangan di luar kuadran kanan atas:

Particle effects and quadtrees
Kami hanya memeriksa perlanggaran di antara titik biru dan garis merah.

Itu hanya satu perempat daripada cek! Sekarang mari kita pergi lebih jauh: jika zarah berada di kuadran kiri atas kuadran kanan atas skrin, kita hanya perlu memeriksa dinding-dinding itu di kuadran yang sama:

Particle effects and quadtrees

Quadtrees membenarkan anda melakukan ini dengan tepat! Daripada ujian terhadap semua dinding, anda memecah dinding ke quadrants dan sub-quadrants yang mereka hadapi, jadi anda hanya perlu menyemak beberapa quadrants. Anda boleh dengan mudah pergi dari 200 cek setiap zarah hanya 5 atau 6.

Langkah-langkah untuk membuat kuadran adalah seperti berikut:

  1. Mulakan dengan segi empat tepat yang memenuhi keseluruhan skrin.
  2. Ambil persegi panjang semasa, hitung berapa banyak "dinding" jatuh di dalamnya.
  3. Sekiranya anda mempunyai lebih daripada tiga baris (anda boleh memilih nombor yang berbeza), perpecah segi empat ke empat kuadran yang sama. Ulang Langkah 2 dengan setiap kuadran.
  4. Setelah mengulang Langkah 2 dan 3, anda akan mempunyai "pokok" segi empat tepat, dengan tiada segi empat tepat yang terkecil yang mengandungi lebih daripada tiga baris (atau apa sahaja yang anda pilih).
Particle effects and quadtrees
Membina kuadran. Nombor mewakili bilangan garisan dalam kuadran, merah terlalu tinggi dan perlu dibahagikan.

Untuk membina kuadran kami, kami mengambil satu set "dinding" (segmen garisan) sebagai parameter, dan jika terlalu banyak terkandung dalam segi empat tepat kami, kami membahagikan kepada segi empat tepat yang lebih kecil, dan proses itu berulang.

Anda boleh melihat kelas QuadTree penuh di sini:

Ujian untuk persilangan terhadap segmen garisan dilakukan dengan cara yang sama. Untuk setiap persegi panjang kita lakukan perkara berikut:

  1. Mulakan dengan segi empat tepat terbesar dalam kuadtree.
  2. Semak sama ada segmen garisan bersilang atau berada di dalam segi empat tepat semasa. Sekiranya tidak, jangan risau melakukan sebarang ujian ke atas jalan ini.
  3. Sekiranya segmen talian jatuh dalam segi empat semasa atau bersilang, periksa sama ada segiempat tepat semasa mempunyai mana-mana segi empat tepat kanak-kanak. Sekiranya ia berlaku, kembali ke Langkah 2, tetapi gunakan setiap segi empat kanak-kanak.
  4. Jika segi empat semasa tidak mempunyai segi empat kanak-kanak tetapi nod daun (iaitu, ia hanya mempunyai segmen garisan sebagai kanak-kanak), menguji segmen garisan sasaran terhadap segmen garisan itu. Sekiranya ada persimpangan, kembalikan persimpangan. Kita Sudah Selesai!
Particle effects and quadtrees
Mencari Quadtree. Kami memulakan di segi empat tepat terbesar dan mencari yang lebih kecil dan kecil, sehingga akhirnya menguji segmen baris individu. Dengan kuadtree, kami hanya menjalankan empat ujian segi empat dan dua ujian baris, dan bukan ujian terhadap semua 21 baris segmen. Perbezaannya hanya bertambah dramatik dengan set data yang lebih besar.

Sebaik sahaja kita lulus objek QuadTree ke sistem zarah kita sebagai "collider" kita dapat melihat kilat cepat. Lihat demo interaktif di bawah - gunakan tetikus anda untuk melihat segmen baris yang mana quadtree perlu ujian terhadap!


Tuding pada kuadran (sub-) untuk melihat segmen garisan yang terkandung di dalamnya.

Makanan untuk Pemikiran

Sistem zarah dan kuadran yang dibentangkan dalam artikel ini adalah sistem pengajaran asas. Beberapa idea lain yang mungkin anda ingin pertimbangkan ketika melaksanakannya sendiri:

  • Anda mungkin mahu memegang objek selain segmen baris dalam kuadtree. Bagaimana anda mengembangkannya untuk memasukkan kalangan? Squares?
  • Anda mungkin mahu cara untuk mendapatkan semula objek individu (untuk memberitahu mereka bahawa mereka telah dilanggar oleh zarah), sementara masih mengambil segmen yang dapat dilihat.
  • Persamaan fizik menderita daripada percanggahan persamaan Euler membina dari masa ke masa dengan kadar bingkai yang tidak stabil. Walaupun ini tidak akan penting untuk sistem zarah, mengapa tidak membaca persamaan pergerakan lebih maju? (Lihat contoh tutorial ini.)
  • Terdapat banyak cara anda boleh menyimpan senarai zarah dalam ingatan. Arahan adalah paling mudah tetapi mungkin bukan pilihan terbaik kerana zarah-zarah sering dikeluarkan dari sistem dan yang baru dimasukkan. Senarai berkaitan mungkin lebih baik tetapi mempunyai lokasi cache yang buruk. Perwakilan terbaik untuk zarah mungkin bergantung kepada kerangka kerja atau bahasa yang anda gunakan.










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.