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

Buat Game Pop Anda Dengan Efek Partikel dan Quadtrees

by
Difficulty:IntermediateLength:LongLanguages:

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

Jadi, Anda ingin ledakan, api, peluru, atau mantra sihir di game Anda? Sistem partikel menghasilkan efek grafis sederhana yang bagus untuk membuat game Anda sedikit lebih menarik. Anda dapat lebih memukau pemain dengan membuat partikel berinteraksi dengan dunia Anda, memantul dari lingkungan dan pemain lain. Dalam tutorial ini kita akan menerapkan beberapa efek partikel sederhana, dan dari sini akan melanjutkan untuk membuat partikel memantul dari dunia di sekitar mereka.

Kita juga akan mengoptimalkan hal-hal dengan menerapkan struktur data yang disebut quadtree. Quadtrees memungkinkan Anda untuk memeriksa tabrakan jauh lebih cepat daripada yang Anda bisa tanpa satu, dan mereka mudah diterapkan dan dipahami.

Catatan: Meskipun tutorial ini ditulis menggunakan HTML5 dan JavaScript, Anda harus dapat menggunakan teknik dan konsep yang sama di hampir semua lingkungan pengembangan game.

Untuk melihat demo di artikel, pastikan untuk membaca artikel ini di Chrome, Firefox, IE 9, atau browser lain yang mendukung HTML5 dan Canvas.

Perhatikan bagaimana partikel berubah warna saat jatuh, dan bagaimana mereka memantul bentuknya.

Apa itu Sistem Partikel?

Sistem partikel adalah cara sederhana menghasilkan efek seperti api, asap, dan ledakan.

Anda membuat particle emitter, dan ini meluncurkan "partikel" kecil yang dapat Anda tampilkan sebagai piksel, kotak, atau bitmap kecil. Mereka mengikuti fisika Newtonian yang sederhana dan berubah warna ketika mereka bergerak, menghasilkan efek grafis yang dinamis, dapat disesuaikan.


Awal Sistem Partikel

Sistem partikel kita akan memiliki beberapa parameter merdu:

  • Berapa banyak partikel yang keluar setiap detik.
  • Berapa lama sebuah partikel dapat "hidup".
  • Warna setiap partikel akan mengalami transisi.
  • Posisi dan sudut partikel akan muncul.
  • Seberapa cepat partikel akan pergi ketika mereka berkembang.
  • Berapa banyak gravitasi yang harus mempengaruhi partikel.

Jika setiap partikel muncul persis sama, kita hanya memiliki aliran partikel, bukan efek partikel. Jadi mari kita juga memungkinkan variabilitas yang dapat dikonfigurasi. Ini memberi beberapa parameter lagi untuk sistem kita:

  • Berapa banyak sudut peluncuran mereka dapat bervariasi.
  • Berapa kecepatan awal mereka dapat bervariasi.
  • Berapa umur mereka bisa bervariasi.

Kita berakhir dengan kelas sistem partikel yang dimulai seperti ini:


Membuat Arus Sistem

Setiap frame kita perlu melakukan tiga hal: membuat partikel baru, memindahkan partikel yang ada, dan menggambar partikel.

Membuat Partikel

Membuat partikel cukup sederhana. Jika kita membuat 300 partikel per detik, dan itu 0.05 detik sejak frame terakhir, kita membuat 15 partikel untuk frame (yang rata-rata sampai 300 per detik).

Kita harus memiliki loop sederhana yang terlihat seperti ini:

Fungsi spawnParticle() menciptakan partikel baru berdasarkan parameter sistem:

Kita memilih kecepatan awal dari sudut dan kecepatan acak. Kemudian menggunakan metode fromPolar() untuk membuat vektor Cartesian velocity dari kombinasi sudut/kecepatan.

Trigonometri dasar menghasilkan metode fromPolar:

Jika Anda perlu memoles trigonometri sedikit, semua trigonometri yang kita gunakan berasal dari Unit Circle.

Gerakan partikel

Gerakan partikel mengikuti hukum Newtonian dasar. Partikel semua memiliki kecepatan dan posisi. Kecepatan kita ditindaklanjuti oleh gaya gravitasi, dan posisi kita berubah secara proporsional terhadap gravitasi. Akhirnya kita perlu melacak setiap partikel kehidupan, jika tidak, partikel tidak akan pernah mati, kita akan berakhir terlalu banyak, dan sistem akan terhenti. Semua tindakan ini terjadi secara proporsional dengan waktu antar frame.

Menggambar Partikel

Akhirnya kita harus menggambar partikel. Cara Anda menerapkan ini dalam game Anda akan sangat bervariasi pada platform ke basis platform, dan seberapa mahir Anda menginginkan render tersebut. Ini bisa sesederhana menempatkan satu piksel berwarna, untuk memindahkan sepasang segitiga untuk setiap partikel, yang digambar oleh shader GPU yang rumit.

Dalam kasus ini, kita akan memanfaatkan API Kanvas untuk menggambar kotak kecil untuk partikel.

Interpolasi warna tergantung pada apakah platform yang Anda gunakan memasok kelas warna (atau format representasi), apakah itu menyediakan interpolator untuk Anda, dan bagaimana Anda ingin mendekati seluruh masalah. Saya menulis kelas gradien kecil yang memungkinkan interpolasi mudah antara beberapa warna, dan kelas warna kecil yang menyediakan fungsionalitas untuk interpolasi antara dua warna.


Inilah sistem partikel kita beraksi!

Partikel Memantul

Seperti yang Anda lihat di demo di atas, sekarang kami memiliki beberapa efek dasar partikel. Mereka tidak memiliki interaksi dengan lingkungan di sekitar mereka. Untuk membuat efek ini menjadi bagian dari dunia permainan kita, kita akan membuat mereka terpental dari dinding di sekeliling mereka.

Untuk memulai, sistem partikel sekarang akan mengambil collider sebagai parameter. Ini akan menjadi tugas collider untuk memberi tahu sebuah partikel apakah itu menabrak apa saja. Metode step() partikel sekarang terlihat seperti ini:

Sekarang setiap kali partikel bergerak, kita bertanya pada collider apakah jalur pergerakannya telah "bertabrakan" melalui metode getIntersection(). Jika demikian, kita mengatur ulang posisinya (sehingga tidak berada di dalam apa pun yang berpotongan), dan mencerminkan kecepatannya.

Implementasi "collider" dasar dapat terlihat seperti ini:

Mendapati masalah? Setiap partikel perlu memanggil collider.getIntersection() dan kemudian setiap panggilan getIntersection perlu memeriksa setiap "dinding" di dunia. Jika Anda memiliki 300 partikel (semacam angka rendah), dan 200 dinding di dunia Anda (tidak masuk akal juga), Anda melakukan 60.000 tes persimpangan garis! Ini bisa menggerakkan permainan Anda menjadi terhenti, terutama dengan lebih banyak partikel (atau dunia yang lebih kompleks).


Deteksi Tabrakan Lebih Cepat Dengan Quadtrees

Masalah dengan collider sederhana kita adalah memeriksa setiap dinding untuk setiap partikel. Jika partikel kita berada di kuadran kanan atas layar, kita tidak perlu membuang waktu memeriksa apakah itu menabrak dinding yang hanya di bagian bawah atau kiri layar. Jadi idealnya kita ingin memotong setiap pemeriksaan untuk persimpangan di luar kuadran kanan atas:

Particle effects and quadtrees
Kita hanya memeriksa tabrakan antara titik biru dan garis merah.

Itu hanya seperempat dari cek! Sekarang mari kita bahas lebih jauh: jika partikel berada di kuadran kiri atas dari kuadran kanan atas layar, kita hanya perlu memeriksa dinding-dinding itu di kuadran yang sama:

Particle effects and quadtrees

Quadtrees memungkinkan Anda melakukan hal ini! Daripada menguji terhadap semua dinding, Anda membagi dinding ke dalam kuadran dan sub-kuadran yang mereka tempati, jadi Anda hanya perlu memeriksa beberapa kuadran. Anda dapat dengan mudah pergi dari 200 cek per partikel menjadi hanya 5 atau 6.

Langkah-langkah untuk membuat quadtree adalah sebagai berikut:

  1. Mulai dengan persegi panjang yang memenuhi seluruh layar.
  2. Ambil persegi panjang saat ini, hitung berapa banyak "dinding" yang jatuh di dalamnya.
  3. Jika Anda memiliki lebih dari tiga baris (Anda dapat memilih nomor yang berbeda), pisahkan persegi panjang menjadi empat kuadran yang sama. Ulangi Langkah 2 dengan masing-masing kuadran.
  4. Setelah mengulangi Langkah 2 dan 3, Anda berakhir dengan "pohon" persegi panjang, dengan tidak ada persegi panjang terkecil yang mengandung lebih dari tiga baris (atau apa pun yang Anda pilih).
Particle effects and quadtrees
Membangun quadtree. Angka-angka mewakili jumlah garis dalam kuadran, merah menjadi terlalu tinggi dan perlu dibagi lagi.

Untuk membangun quadtree kita mengambil satu set "dinding" (segmen garis) sebagai parameter, dan jika terlalu banyak yang terkandung dalam persegi panjang kita, kita membagi lagi menjadi persegi panjang yang lebih kecil, dan proses berulang.

Anda dapat melihat kelas QuadTree penuh di sini:

Pengujian untuk persimpangan terhadap segmen garis dilakukan dengan cara yang sama. Untuk setiap persegi panjang kita melakukan hal berikut:

  1. Mulailah dengan persegi panjang terbesar di quadtree.
  2. Periksa apakah segmen garis memotong atau berada di dalam persegi panjang saat ini. Jika tidak, jangan repot-repot melakukan pengujian lagi di jalur ini.
  3. Jika segmen garis jatuh dalam persegi panjang saat ini atau memotongnya, periksa apakah persegi panjang saat ini memiliki persegi panjang anak. Jika ya, kembali ke Langkah 2, tetapi gunakan masing-masing persegi panjang anak.
  4. Jika persegi panjang saat ini tidak memiliki anak persegi panjang tetapi itu adalah simpul daun (yaitu, hanya memiliki segmen garis sebagai anak-anak), uji segmen garis target terhadap segmen garis tersebut. Jika ada persimpangan, kembalikan persimpangan. Kita selesai!
Particle effects and quadtrees
Mencari Quadtree. Kita mulai di persegi panjang terbesar dan mencari yang lebih kecil dan lebih kecil, sampai akhirnya menguji segmen garis individual. Dengan quadtree, kita hanya melakukan empat tes persegi panjang dan dua tes garis, daripada menguji terhadap semua 21 segmen garis. Perbedaannya hanya tumbuh lebih dramatis dengan kumpulan data yang lebih besar.

Begitu kita melewati objek QuadTree ke sistem partikel kita sebagai "collider", kita mendapatkan tampilan cepat kilat. Lihat demo interaktif di bawah - gunakan mouse Anda untuk melihat segmen garis mana yang perlu diuji oleh quadtree!


Arahkan kursor ke kuadran (sub-) untuk melihat segmen baris mana yang dikandungnya.

Inspirasi

Sistem partikel dan quadtree yang disajikan dalam artikel ini adalah sistem pengajaran yang belum sempurna. Beberapa ide lain yang mungkin ingin Anda pertimbangkan saat menerapkannya sendiri:

  • Anda mungkin ingin memegang objek selain segmen garis di quadtree. Bagaimana Anda memperluasnya untuk menyertakan lingkaran? Kotak?
  • Anda mungkin ingin cara untuk mengambil objek individu (untuk memberitahu mereka bahwa mereka telah dipukul oleh partikel), sementara masih mengambil segmen yang dapat dipantulkan.
  • Persamaan fisika mengalami ketidaksesuaian bahwa persamaan Euler terbentuk seiring waktu dengan frame rate yang tidak stabil. Meskipun ini tidak akan menjadi masalah umum untuk sistem partikel, mengapa tidak membaca tentang persamaan gerak yang lebih maju? (Lihatlah tutorial ini, misalnya.)
  • Ada banyak cara Anda dapat menyimpan daftar partikel dalam memori. Array yang paling sederhana tetapi mungkin bukan pilihan terbaik yang diberikan partikel sering dihapus dari sistem dan yang baru sering dimasukkan. Daftar tertaut mungkin lebih cocok tetapi memiliki lokasi cache yang buruk. Representasi terbaik untuk partikel mungkin bergantung pada kerangka kerja atau bahasa yang Anda gunakan.










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.