Bagaimana menerapkan area tepi lunak dengan partikel

Game saya dibuat menggunakan Phaser, tetapi pertanyaannya adalah engine-agnostik.

Dalam permainan saya, saya memiliki beberapa lingkungan, pada dasarnya area poligonal yang dapat dipindahkan oleh karakter pemain dan dipengaruhi. Misalnya es, api, racun dll. Elemen grafis dari area ini adalah area poligon yang diisi warna itu sendiri, dan partikel dari jenis yang sesuai (dalam contoh ini pecahan es). Ini adalah bagaimana saya saat ini menerapkan ini - dengan topeng poligon menutupi tilesprite dengan pola partikel:

Tepi keras terlihat buruk. Saya ingin meningkatkan dengan melakukan dua hal: 1. Membuat area isian poligon memiliki tepi yang lembut, dan menyatu dengan latar belakang. 2. Suruh beberapa pecahan keluar dari area poligon, sehingga tidak terpotong di tengah dan area tersebut tidak memiliki garis lurus

misalnya (maket):

Saya pikir 1 dapat dicapai dengan mengaburkan poligon, tapi saya tidak yakin bagaimana caranya dengan 2.

Bagaimana Anda akan menerapkan ini?

1.Jika Anda menginginkan sesuatu yang dekat dengan mockup Anda, saya akan menggunakan partikel (Itu tidak harus menjadi sistem partikel sepenuhnya meledak).

Render partikel Anda dalam bentuk poligon pada RenderTexture. Pastikan untuk menggunakan campuran aditif pada partikel. Partikel-partikel di dalam poligon akan saling berbaur dengan lancar sementara partikel di luar akan memberikan tepi lembut yang Anda inginkan. (Contoh efeknya dapat ditonton dalam video youtube ini: Video Partikel Aditif Sekarang render RenderTexture ke layar utama Anda dan Anda selesai. RenderTexture diperlukan agar partikel tidak menyatu dengan latar belakang Anda.

Anda bisa mencoba meletakkan segitiga langsung ke tekstur partikel dan lihat bagaimana hasilnya. Kalau tidak, render di atas "sup partikel" Anda sebagai lapisan terpisah.

Membuat mockup cepat dalam jsfiddle yang diperbarui yang terlihat seperti ini. Anda dapat menemukan demo yang diperbarui di sini

2. Setiap partikel memiliki kecepatan dan asal. Ketika pemain Anda menyentuh poligon, Anda mengubah kecepatan setiap partikel sebanding dengan kecepatan pemain. Semakin jauh sebuah partikel menjauh dari pemain Anda, semakin sedikit itu dipengaruhi oleh kecepatan pemain.

Rumus untuk menghitung kecepatan partikel akan menjadi seperti ini:

//player.velocity and particle.velocity are vectors 
//k is a factor to enhance or weaken the influence of players velocity
var distanceToPlayer = (player.position - particle.position).length();
particle.velocity = particle.velocity + ((k * player.velocity) + particle.velocity) * (1/distanceToPlayer);

Untuk menghitung posisi partikel Anda menempatkan ini dalam metode pembaruan Anda:

var speedY = -(springConstant * (particle.position.y - particle.origin.y)) - (dampingFactor * particle.velocity.y);
var speedX = -(springConstant * (particle.position.x - particle.origin.x)) - (dampingFactor * particle.velocity.x);

particle.position.y = particle.position.y + speedY;
particle.position.x = particle.position.x + speedX;

particle.velocity.x = particle.velocity.x + speedX;
particle.velocity.y = particle.velocity.y + speedY;

Ini akan memberi Anda "cairan" di mana setiap partikel mengayunkan asalnya ketika pemain mengaduk cairan. SpringConstant mengubah seberapa banyak partikel berayun dari asalnya dan faktor peredam seberapa cepat partikel itu beristirahat. Anda mungkin harus mengubah kode karena versi modifikasi dari simulasi 1d yang saya gunakan dalam permainan saya.

Sekarang dengan demo: Demo. Hanya men-tweak 3 konstanta di atas sampai cairan berperilaku seperti yang Anda inginkan.

Pikiran saya tentang dua poin ini:

1. Anda bisa menggunakan shader blur, tapi itu akan sangat mahal. Alih-alih, saya akan menggambar batas segitiga tambahan yang pudar dari tembus cahaya di tengah menjadi transparan di bagian tepi, untuk mensimulasikan "blur". Saya telah melakukan itu dalam permainan saya dan itu bekerja dengan cukup baik. Berikut adalah dua tangkapan layar penguat pelangi di game saya.

   

   Perbatasan luar memiliki gradien. Dalam situasi saya, perbatasan tidak dimulai pada opacity yang sama dengan bagian dalam, tetapi jika Anda mengatur opacity itu sama, Anda akan memiliki pudar yang bagus.

2. Saya akan memprogram sistem partikel dan membuat partikel mengikuti poligon. Dengan melakukannya, Anda tidak perlu khawatir tentang apa yang akan terjadi di ujung-ujungnya. Dinamika sistem partikel Anda akan memastikan bahwa partikel berada di dalam poligon dan terdistribusi secara merata. Anda dapat mencoba membuat partikel terdekat mendorong satu sama lain, tetapi membuatnya dengan banyak "massa" sehingga Anda memiliki kelembaman dan terlihat halus. Untuk mempercepat hal ini, ada beberapa kemungkinan, tetapi masalah besar adalah kompleksitas waktu dari saling mendorong satu sama lain. Jika Anda membuat setiap partikel mendorong setiap partikel lainnya, Anda akan memiliki O (n ^ 2), yang tidak baik, jika Anda memiliki misalnya 100 partikel dalam sistem Anda. Bacaan yang bagus tentang bagaimana Anda dapat mengoptimalkan ini adalah presentasi PixelJunk ini:http://fumufumu.q-games.com/gdc2010/shooterGDC.pdf

   Pendekatan yang lebih sederhana adalah dengan menghubungkan setiap partikel ke tiga atau empat partikel lainnya ketika membangun sistem partikel. Sekarang setiap partikel hanya perlu mendorong empat partikel lain yang terhubung dengannya. Namun, pendekatan ini membuat turbulensi dalam sistem partikel Anda menjadi tidak mungkin. Tetapi ini tampaknya tidak menjadi masalah, karena situasi Anda saat ini menggunakan tekstur statis. Pendekatan ini akan menjadi O (n) yang bagus.

Ide yang saya miliki ketika membaca posting Anda adalah yang ini:
• membangun satu set ubin yang akan Anda gunakan untuk area Anda.
• membuat poligon area pada kanvas sementara kecil pada resolusi ubin (mis: jika ubin 16X16, render pada resolusi lebih rendah (16X, 16X)).
• gunakan kanvas sementara untuk memutuskan apakah akan membuat ubin atau tidak pada kanvas utama:
jika suatu titik ditetapkan pada kanvas beresolusi rendah, gambarkan ubin 'acak' pada kanvas utama. jika suatu titik hanyalah tetangga dari set point, gambarkan ubin 'acak' pada opacity yang lebih rendah (untuk melakukan transisi) pada kanvas utama.

Saya takut menurunkan resolusi akan membuat efek blok, tetapi bahkan dengan ubin 20X20, tampilannya cukup bagus:

Langkah-langkah untuk ini adalah: ambil poligon Anda:

Gambar poligon pada resolusi ubin Anda: (!! ya itu hal mal merah).

Kemudian gunakan imageData kanvas resolusi rendah untuk memutuskan apakah akan menggambar ubin atau catatan.
Jika sebuah piksel diatur pada kanvas beresolusi rendah, itu artinya kita harus menggambar ubin: ambil indeks ubin 'acak' untuk memilih ubin mana yang akan digambar. Indeks acak itu harus selalu sama untuk area / ubin tertentu.
Jika suatu titik kosong tetapi di samping titik yang diisi, gambar juga ubin, tetapi dengan setengah opacity.

Jadi mari kita menggambar ubin:

Untuk poligon saya hanya menggambar beberapa kali poligon, menurunkannya, dan meningkatkan opacity pada setiap undian (orang mungkin menggunakan globalCompositeOperation 'lebih ringan', juga).

Setelah Anda menjumlahkan semuanya, itu memberi:

biola ada di sini:

http://jsfiddle.net/gamealchemist/T7b4Y/

beri tahu saya jika ini membantu.

Hanya sebuah ide:

Di ubin Anda, "potongan" adalah sekitar 80px paling lebar. Saya sarankan, membuat 2 area. Anda menggambar poligon asli Anda, dan Anda membuat maketnya sekitar 80 piksel dari setiap sisi. Anda kemudian menarik ubin Anda ke dalam poligon yang lebih besar.

Kemudian, Semua "potongan" yang memiliki piksel di luar poligon bagian dalam, dan tidak ada persimpangan dengan poligon bagian yang Anda dapat membanjiri mengisinya dengan transparansi.

Ini level yang sangat tinggi, tetapi saya pikir saya akan membaginya dengan Anda. Ada banyak detail yang harus ditentukan di sini.

Gambar kasar untuk diperagakan:

Jika poligon hitam bagian dalam adalah yang asli, Anda akan menghapus semua poligon dengan titik merah.