Como implementar áreas de borda macia com partículas

Meu jogo é criado usando Phaser, mas a pergunta em si é independente de mecanismo.

No meu jogo, tenho vários ambientes, áreas essencialmente poligonais pelas quais os personagens dos jogadores podem se mover e serem afetados. Por exemplo, gelo, fogo, veneno, etc. 'O elemento gráfico dessas áreas é a própria área de polígono preenchida com cores e partículas do tipo adequado (neste exemplo, fragmentos de gelo). É assim que estou implementando isso atualmente - com uma máscara de polígono cobrindo um mosaico com o padrão de partículas:

A borda dura parece ruim. Eu gostaria de melhorar fazendo duas coisas: 1. Fazendo com que a área de preenchimento do polígono tenha uma borda suave e se misture ao fundo. 2. Faça com que alguns dos fragmentos saiam da área do polígono, para que não sejam cortados no meio e a área não tenha uma linha reta

por exemplo (maquete):

Penso que é possível obter um desfoque do polígono, mas não sei ao certo como proceder com o 2.

Como você implementaria isso?

1.Se você quiser algo parecido com o seu modelo, eu usaria partículas (ele não precisa ser um sistema de partículas totalmente explodido).

Renderize suas partículas na forma de polígono em uma RenderTexture. Certifique-se de usar a mistura aditiva nas partículas. As partículas dentro do polígono se misturam suavemente, enquanto as partículas do lado de fora dão a borda macia que você deseja. (Um exemplo do efeito pode ser visto neste vídeo do youtube: Vídeo de partículas aditivas Agora, renderize a RenderTexture na tela principal e pronto. A RenderTexture é necessária para que as partículas não se misturem com o fundo.

Você pode tentar colocar os triângulos diretamente na textura das partículas e ver como isso funciona. Caso contrário, processe-os em cima da sua "sopa de partículas" como uma camada separada.

Criou uma maquete rápida em um jsfiddle atualizado com esta aparência. Você pode encontrar a demonstração atualizada aqui

2.Cada partícula tem uma velocidade e uma origem. Quando o seu jogador toca no polígono, você altera a velocidade de cada partícula proporcional à velocidade do jogador. Quanto mais longe uma partícula estiver do seu jogador, menos ela será afetada pela velocidade do jogador.

A fórmula para calcular a velocidade das partículas seria algo como isto:

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

Para calcular a posição da partícula, coloque isso no seu método de atualização:

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;

Isso deve fornecer um "fluido", onde cada partícula gira em torno de sua origem quando o jogador agita o fluido. O springConstant altera o quanto uma partícula se afasta de sua origem e o fator de amortecimento a rapidez com que a partícula pára. Você pode precisar ajustar o código, já que é a versão modificada de uma simulação 1d que uso no meu jogo.

Agora com uma demonstração: Demo Basta ajustar as 3 constantes no topo até que o fluido se comporte como você deseja.

Meus pensamentos sobre esses dois pontos:

1. Você pode usar o shader blur, mas isso vai ser muito caro. Em vez disso, eu desenharia uma borda extra de triângulos que desbotam de translúcido no centro para transparente nas bordas, para simular o "desfoque". Eu fiz isso em um jogo meu e funciona muito bem. Aqui estão duas capturas de tela de um reforço de arco-íris no meu jogo.

   

   A borda externa tem um gradiente. Na minha situação, a borda não começa com a mesma opacidade que a parte interna, mas se você definir essas opacidades iguais, terá um bom desbotamento.

2. Eu programaria um sistema de partículas e faria as partículas seguirem o polígono. Ao fazer isso, você não precisa se preocupar com o que acontecerá nas bordas. A dinâmica do seu sistema de partículas garantirá que as partículas estejam dentro do polígono e sejam distribuídas uniformemente. Você pode tentar fazer com que as partículas mais próximas se afastem, mas com muita "massa", para que você tenha inércia e pareça suave. Para tornar isso rápido, existem algumas possibilidades, mas o grande problema será a complexidade do tempo do mecanismo de pressionar um ao outro. Se você fizer cada partícula empurrar qualquer outra partícula, você terá O (n ^ 2), o que não é bom, se você estiver tendo, por exemplo, 100 partículas em seu sistema. Uma boa leitura sobre como otimizar isso é esta apresentação do PixelJunk:http://fumufumu.q-games.com/gdc2010/shooterGDC.pdf

   Uma abordagem mais simples seria conectar cada partícula a três ou quatro outras partículas ao construir o sistema de partículas. Agora, cada partícula terá apenas que empurrar as outras quatro partículas às quais está conectada. No entanto, essa abordagem impossibilita turbulências no seu sistema de partículas. Mas isso não parece ser um problema, pois sua situação atual usa uma textura estática. Essa abordagem será O (n), o que é ótimo.

A idéia que tive ao ler sua postagem foi a seguinte:
• construa um conjunto de peças que você usará em suas áreas.
• renderize o polígono da área em uma pequena tela temporária com a resolução do bloco (ex: se os blocos tiverem 16X16, renderize com uma resolução menor (16X, 16X)).
• use essa tela temporária para decidir se deseja renderizar ou não a tela principal:
se um ponto estiver definido na tela de baixa resolução, desenhe uma tela 'aleatória' na tela principal. se um ponto for apenas um vizinho de um ponto definido, desenhe um bloco 'aleatório' com uma opacidade mais baixa (para fazer a transição) na tela principal.

Eu tinha medo que diminuir a resolução criaria um efeito de bloco, mas mesmo com blocos de 20X20, parece muito bom:

As etapas para isso são: pegue seu polígono:

Desenhe o polígono com a resolução do seu bloco: (!! Sim, é o vermelho do shopping).

Em seguida, use o imageData da tela de baixa resolução para decidir se deseja desenhar um bloco ou anotação.
Se um pixel é definido na tela de baixa resolução, significa que devemos desenhar o bloco: escolha um índice 'aleatório' para escolher qual bloco desenhar. Esse índice aleatório deve sempre ser o mesmo para uma determinada área / peça.
Se um ponto estiver vazio, mas próximo a um ponto preenchido, desenhe também um ladrilho, mas com meia opacidade.

Então, vamos desenhar as peças:

Para o polígono, basta desenhar várias vezes o polígono, reduzi-lo e aumentar a opacidade em cada desenho (pode-se também usar o globalCompositeOperation 'mais leve').

Depois de adicionar tudo, ele fornece:

violino está aqui:

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

avise-me se isso ajudar.

Apenas uma ideia:

No seu bloco, as "peças" têm no máximo cerca de 80 px de largura. Eu sugeriria, fazendo 2 áreas. Você desenha seu polígono original e faz uma maquete cerca de 80 pixels de cada borda. Você desenha suas peças no polígono maior.

Então, todas as "peças" que possuem um pixel fora do polígono interno e nenhuma interseção com o polígono interno que você pode inundar os preenche com transparência.

Este é um nível muito alto, mas achei que o compartilharia com você. Há muitos detalhes a serem determinados aqui.

Uma imagem bruta para demonstrar:

Se o polígono preto interno fosse o original, você apagaria todos os polígonos com um ponto vermelho.