1.Jeśli chcesz czegoś zbliżonego do makiety, użyłbym cząstek (nie musi to być w pełni rozdmuchany układ cząstek).
Renderuj swoje cząstki w postaci wielokąta na RenderTexture. Upewnij się, że używasz mieszania dodatków do cząstek. Cząsteczki wewnątrz wielokąta płynnie się ze sobą łączą, a cząsteczki na zewnątrz zapewniają miękką krawędź, której chcesz. (Przykład efektu można obejrzeć w tym filmie na youtube: Wideo cząstek addycyjnych
Teraz wyrenderuj RenderTexture na ekranie głównym i gotowe. RenderTexture jest konieczny, aby cząstki nie zlewały się z tłem.
Możesz spróbować umieścić trójkąty bezpośrednio na teksturze cząstek i zobaczyć, jak to działa. W przeciwnym razie renderuj je na „zupce cząsteczkowej” jako osobną warstwę.
Utworzono szybką makietę w zaktualizowanym jsfiddle, który wygląda tak:
Zaktualizowaną wersję demo można znaleźć tutaj
2. Każda cząstka ma prędkość i pochodzenie. Kiedy twój gracz dotknie wielokąta, zmieniasz prędkość każdej cząstki proporcjonalnie do prędkości gracza. Im dalej cząstka znajduje się od gracza, tym mniej na nią wpływa prędkość gracza.
Wzór na obliczenie prędkości cząstek byłby mniej więcej taki:
//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);
Aby obliczyć położenie cząstki, umieść to w metodzie aktualizacji:
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;
To powinno dać ci „płyn”, w którym każda cząstka obraca się wokół swojego źródła, gdy gracz miesza płyn. SpringConant zmienia, o ile cząstka odchyla się od swojego źródła, oraz tłumienie Czynnik, jak szybko cząstka zatrzymuje się. Być może będziesz musiał poprawić kod, ponieważ jest to zmodyfikowana wersja symulacji 1d, której używam w swojej grze.
Teraz z wersją demonstracyjną: Demo
Ulepsz 3 stałe na górze, aż płyn zachowa się tak, jak chcesz.