1.Якщо ви хочете чогось, що є близьким до вашого макета, я б використовував частинки (це не повинно бути повністю продутою системою частинок).
Візуалізуйте свої частинки у формі багатокутника на RenderTexture. Обов’язково використовуйте добавки, що змішуються на частинки. Частинки всередині багатокутника плавно змішатимуться один з одним, тоді як частинки зовні нададуть м'який край, який ви хочете. (Приклад ефекту можна переглянути у цьому відео на YouTube:
Aditive Particle Video Тепер винесіть RenderTexture на головний екран, і ви закінчите. RenderTexture необхідний, щоб частинки не зливалися з вашим фоном.
Ви можете спробувати нанести трикутники безпосередньо на текстуру частинок і подивитися, як це виходить. В іншому випадку візуалізуйте їх поверх «супу з частинок» як окремий шар.
Створений швидкий макет із оновленої jsfiddle, що виглядає приблизно так.
Оновлену демонстрацію ви можете знайти тут
2. Кожна частинка має швидкість і початок. Коли ваш гравець торкається багатокутника, ви змінюєте швидкість кожної частинки, пропорційну швидкості гравців. Чим далі частинка подалі від вашого гравця, тим менше на неї впливає швидкість гравців.
Формула для обчислення швидкості частинок була б приблизно такою:
//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);
Щоб обчислити положення частинки, ви поставите це у своєму методі оновлення:
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;
Це повинно дати вам "рідину", коли кожна частинка розгойдується навколо свого походження, коли гравець переміщує рідину. SpringConstant змінює, наскільки частинка відхиляється від свого походження і демпфуючийФактор, як швидко частинка спочиває. Можливо, вам доведеться налаштувати код, оскільки його модифіковану версію 1d-симуляції я використовую в своїй грі.
Тепер з демонстрацією: демонстрація
Просто налаштуйте 3 константи вгорі, поки рідина не поводиться так, як ви цього хочете.