A questão da barra de saúde tradicional retangular ou baseada no coração é algo bem compreendido e facilmente resolvido. Mas qual é a solução aceita para mais barras de saúde "de forma criativa", como a maquete que fiz abaixo?
A maneira óbvia de fazer isso seria ter sprites "intermediários", para que a terceira imagem fosse seu próprio sprite, juntamente com muitas outras transições para diferentes níveis de saúde. Mas isso parece realmente deselegante e o número de entres necessários para criar uma transição suave entre os estados de saúde seria grande.
A única outra idéia que posso ter é sobrepor o sprite de "saúde completa" em cima do sprite de "saúde vazia" e pré-assar conjuntos de coordenadas de pixel para representar cada marca de saúde e torná-las opacas ou transparentes como saúde sobe ou desce.
Pretendo que esta pergunta seja independente da linguagem e da plataforma, mas fique à vontade para fornecer uma amostra concreta em qualquer idioma / biblioteca / estrutura, se isso ajudar na resposta.
Respostas:
Existe uma maneira muito simples de conseguir isso com shaders, você precisa de três * texturas: barra de saúde vazia, textura e barra de saúde vazias e máscara com gradiente de distribuição de saúde com um extremo (por exemplo, valor alfa mais escuro, não preto ou mais transparente alfa) em uma extremidade e o outro do outro lado. É melhor mostrado na imagem. Atualmente, não consigo desenhar gradiente curvo apenas um linear - mas tenho certeza de que seus artistas não terão problemas:
Agora, no shader, experimente ambas as texturas e limpe o valor da máscara, descartando todos os pixels que não são mais brilhante que o limite de entrada (com base na% de entrada de shader da saúde).
Você poderiause uma fórmula matemática para mascarar em vez de uma textura, mas se você fizer isso, ainda estará muito limitado às formas que você é capaz (= formas simples) de criar com as referidas fórmulas - e encontrar uma não é trivial.
* ver comentários
fonte
Implementado matematicamente, como um pixel shader:
Na CPU, calcule o HealthDirection e seu 'produto pontual com V2
Na GPU, calcule uma direção normalizada para longe do ponto central de cada pixel. Compare cada produto de ponto com o HealthDirections 'para escolher se sombrear "fundo" ou em cores.
Se você "inverteu" esse algoritmo e trabalhou na outra direção, poderá "desamarrar" a direção de cada pixel novamente em uma porcentagem e compará-los ao HealthPercent. Com o percentual de cada pixel calculado, a execução do desbotamento de vermelho para verde na GPU se torna trivial.
Desenhe a barra primeiro aplicando o algoritmo a um quad; cores de saída entre rangeMin e rangeMax (pode ser cozido) e clip () ou transparentes em todos os lugares. Em seguida, desenhe o sprite (modificado) sobre ele, usando alfa. Rastreei sua barra em CAD, a preenchi e depois "variei mágica" a forma da cor sólida no Paint para excluí-la. O meu parece uma merda devido à mistura manual do AutoCAD e do Paint; supondo que você combine as bordas internas com transparências, a sua ficará perfeita .
A borda branca é o limite do quad. Ele e os X vermelhos são apenas para referência:
O "sprite com furo" não precisa ser renderizado ao mesmo tempo que a barra de saúde. Eles devem ser instanciados e desenhados de uma só vez, depois que todas as barras de saúde estiverem completas. Como o algoritmo é independente no sombreador, você também pode adicionar instancias a ele e desenhar também todas as barras de saúde com uma chamada de instanciação. Desenhar todas as barras de saúde na tela deve receber 2 chamadas DrawInstanced (...) e ser "louco rápido".
fonte