Come implementare aree con bordi morbidi con particelle

Il mio gioco è stato creato usando Phaser, ma la domanda in sé è indipendente dal motore.

Nel mio gioco ho diversi ambienti, essenzialmente aree poligonali in cui i personaggi del giocatore possono spostarsi ed essere interessati. Ad esempio ghiaccio, fuoco, veleno ecc. 'L'elemento grafico di queste aree è l'area poligonale piena di colore stesso e particelle del tipo adatto (in questo esempio frammenti di ghiaccio). Ecco come lo sto attualmente implementando - con una maschera poligonale che copre un tileprite con il motivo a particelle:

Il bordo duro sembra cattivo. Vorrei migliorare facendo due cose: 1. Rendere l'area di riempimento del poligono per avere un bordo morbido e fondersi con lo sfondo. 2. Fai in modo che alcuni frammenti escano dall'area del poligono, in modo che non vengano tagliati nel mezzo e l'area non abbia una linea retta

ad esempio (mockup):

Penso che 1 possa essere ottenuto sfocando il poligono, ma non sono sicuro di come procedere con 2.

Come faresti per implementarlo?

1.Se vuoi qualcosa che è vicino al tuo modello, userei le particelle (non deve essere un sistema di particelle completamente bruciato).

Rendi le tue particelle sotto forma di poligono su una RenderTexture. Assicurati di usare la miscelazione additiva sulle particelle. Le particelle all'interno del poligono si fonderanno uniformemente l'una con l'altra mentre le particelle all'esterno daranno il bordo morbido che desideri. (Un esempio dell'effetto può essere visto in questo video di YouTube: Video sulle particelle additive additive Ora esegui il rendering del RenderTexture sulla schermata principale e il gioco è fatto. Il RenderTexture è necessario in modo che le particelle non si fondano con lo sfondo.

Puoi provare a mettere i triangoli direttamente sulla trama delle particelle e vedere come funziona. Altrimenti renderli sopra la tua "zuppa di particelle" come uno strato separato.

Creato un mockup rapido in un jsfiddle aggiornato che assomiglia a questo Puoi trovare la demo aggiornata qui

2. Ogni particella ha una velocità e un'origine. Quando il tuo giocatore tocca il poligono, cambi la velocità di ogni particella in proporzione alla velocità del giocatore. Più una particella è lontana dal tuo giocatore, meno è influenzata dalla velocità del giocatore.

La formula per calcolare una velocità delle particelle sarebbe qualcosa del genere:

//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);

Per calcolare la posizione della particella, inserirla nel metodo di aggiornamento:

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;

Questo dovrebbe darti un "fluido" in cui ogni particella oscilla attorno alla sua origine quando il giocatore agita il fluido. La molla Costante cambia la quantità di una particella che si allontana dalla sua origine e lo smorzamento Fattore della velocità con cui la particella si ferma. Potrebbe essere necessario modificare il codice poiché è la versione modificata di una simulazione 1d che utilizzo nel mio gioco.

Ora con una demo: Demo Basta modificare le 3 costanti in alto fino a quando il fluido si comporta come si desidera.

Le mie opinioni su questi due punti:

1. Puoi usare la sfocatura dello shader, ma sarà molto costoso. Disegnerei invece un ulteriore bordo di triangoli che si sbiadiscono da traslucido al centro a trasparente ai bordi, per simulare la "sfocatura". L'ho fatto in un mio gioco e funziona abbastanza bene. Ecco due schermate di un booster arcobaleno nel mio gioco.

   

   Il bordo esterno ha una sfumatura. Nella mia situazione, il bordo non inizia con la stessa opacità della parte interna, ma se si impostano quelle opacità uguali, si avrà una bella dissolvenza.

2. Programmerei un sistema di particelle e farei seguire alle particelle il poligono. In questo modo, non devi preoccuparti di ciò che accadrà ai bordi. La dinamica del tuo sistema particellare farà in modo che le particelle siano all'interno del poligono e distribuite uniformemente. Potresti provare a far allontanare le particelle più vicine, ma fallo con molta "massa" in modo da avere inerzia e sembrare liscia. Per rendere questa cosa veloce, ci sono alcune possibilità, ma il grande problema sarà la complessità temporale della spinta reciproca del meccanismo. Se fai in modo che ogni particella spinga ogni altra particella, avrai O (n ^ 2), il che non è buono, se hai ad esempio 100 particelle nel tuo sistema. Una buona lettura su come ottimizzare questo è questa presentazione di PixelJunk:http://fumufumu.q-games.com/gdc2010/shooterGDC.pdf

   Un approccio più semplice sarebbe quello di collegare ciascuna particella a tre o quattro altre particelle durante la costruzione del sistema di particelle. Ora ogni particella dovrà solo spingere le altre quattro particelle a cui è connessa. Tuttavia, questo approccio rende impossibili le turbolenze nel sistema particellare. Ma questo non sembra essere un problema, poiché la tua situazione attuale utilizza una trama statica. Questo approccio sarà O (n) che è fantastico.

L'idea che ho avuto durante la lettura del tuo post è stata questa:
• costruisci un set di tessere che utilizzerai per le tue aree.
• eseguire il rendering del poligono area su una piccola tela temporanea alla risoluzione delle piastrelle (es: se le piastrelle sono 16X16, renderizzate con una risoluzione (16X, 16X) inferiore).
• usa quella tela temporanea per decidere se renderizzare le tessere o meno sulla tela principale:
se un punto è impostato sulla tela a bassa risoluzione, disegna una tessera 'casuale' sulla tela principale. se un punto è solo un vicino di un set point, disegna una tessera "casuale" con un'opacità inferiore (per effettuare la transizione) sulla tela principale.

Avevo paura che abbassare la risoluzione avrebbe creato un effetto a blocchi, ma anche con tessere 20X20, sembra abbastanza buono:

I passaggi per questo sono: prendi il tuo poligono:

Disegna il poligono alla risoluzione della tua tessera: (!! sì, è la cosa rossa del centro commerciale).

Quindi utilizzare imageData della tela a bassa risoluzione per decidere se disegnare una tessera o una nota.
Se un pixel è impostato sulla tela a bassa risoluzione, significa che dovremmo disegnare la tessera: prendi un indice di tessera "casuale" per scegliere quale tessera disegnare. Quell'indice casuale dovrebbe essere sempre lo stesso per una data area / tessera.
Se un punto è vuoto ma accanto a un punto pieno, disegna anche una tessera, ma con metà opacità.

Quindi disegniamo le tessere:

Per il poligono ho semplicemente disegnato più volte il poligono, ridimensionandolo e aumentando l'opacità su ogni disegno (si potrebbe usare anche GlobalCompositeOperation 'accendino').

Una volta aggiunto tutto, si ottiene:

il violino è qui:

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

fammi sapere se questo aiuta.

Solo un'idea:

Nella tua tessera, i "pezzi" hanno una larghezza di circa 80 px al massimo. Vorrei suggerire, facendo 2 aree. Disegni il poligono originale e ne realizzi un modello a circa 80 pixel da ciascun bordo. Quindi disegna le tue tessere nel poligono più grande.

Quindi, tutti i "pezzi" che hanno un pixel al di fuori del poligono interno e senza intersezione con il poligono interno è possibile inondarli riempirli di trasparenza.

Questo è di altissimo livello, ma ho pensato di condividerlo con te. Ci sono molti dettagli da determinare qui.

Un'immagine rozza per dimostrare:

Se il poligono nero interno fosse l'originale, cancelleresti tutti i poligoni con un punto rosso.