1.Si vous voulez quelque chose qui est proche de votre maquette, j'utiliserais des particules (il n'est pas nécessaire que ce soit un système de particules entièrement soufflé).
Rendez vos particules sous forme de polygone sur une texture de rendu. Assurez-vous d'utiliser un mélange additif sur les particules. Les particules à l'intérieur du polygone se fondront doucement les unes dans les autres tandis que les particules à l'extérieur donneront le bord doux que vous souhaitez. (Un exemple de l'effet peut être regardé dans cette vidéo youtube: Vidéo sur les particules additives Rendez
maintenant la texture de rendu sur votre écran principal et vous avez terminé. La texture de rendu est nécessaire pour que les particules ne se mélangent pas avec votre arrière-plan.
Vous pouvez essayer de mettre les triangles directement sur la texture des particules et voir comment cela fonctionne. Sinon, rendez-les au-dessus de votre "soupe de particules" en tant que couche séparée.
Création d'une maquette rapide dans un jsfiddle mis à jour qui ressemble à ceci
Vous pouvez trouver la démo mise à jour ici
2.Chaque particule a une vitesse et une origine. Lorsque votre joueur touche le polygone, vous modifiez la vitesse de chaque particule proportionnellement à la vitesse du joueur. Plus une particule est éloignée de votre joueur, moins elle est affectée par la vitesse du joueur.
La formule pour calculer une vitesse de particules serait quelque chose comme ceci:
//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);
Pour calculer la position de la particule, vous mettez ceci dans votre méthode de mise à jour:
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;
Cela devrait vous donner un "fluide" où chaque particule oscille autour de son origine lorsque le joueur remue le fluide. Le springConstant change la distance à laquelle une particule s'éloigne de son origine et le facteur d'amortissement à quelle vitesse la particule s'arrête. Vous devrez peut-être modifier le code car il s'agit de la version modifiée d'une simulation 1d que j'utilise dans mon jeu.
Maintenant avec une démo: Démo
Ajustez simplement les 3 constantes en haut jusqu'à ce que le fluide se comporte comme vous le souhaitez.