El problema de la barra de salud tradicional rectangular o basada en el corazón es algo bien entendido y fácil de resolver. Pero, ¿cuál es la solución aceptada para más barras de salud de "forma creativa", como la maqueta que he hecho a continuación?
La forma obvia de hacer esto sería tener sprites "intermedios", por lo que la tercera imagen sería su propio sprite, junto con muchas otras transiciones para diferentes niveles de salud. Pero eso parece realmente poco elegante y el número de intermedios necesarios para crear una transición sin problemas entre los estados de salud sería grande.
La única otra idea que se me ocurre es superponer el sprite de "salud completa" en la parte superior del sprite de "salud vacía" y pre-hornear conjuntos de coordenadas de píxeles para representar cada tick de salud y luego hacerlos opacos o transparentes como salud. sube o baja
Tengo la intención de que esta pregunta sea independiente del lenguaje y la plataforma, pero siéntase libre de proporcionar una muestra concreta en cualquier idioma / biblioteca / marco si ayuda a la respuesta.
Respuestas:
Hay una manera muy simple de lograr esto con sombreadores, necesita tres texturas *: barra de salud vacía, textura de barra de salud y máscara con gradiente de distribución de salud con un extremo (por ejemplo, el valor alfa más oscuro no negro o más transparente) en un extremo y el otro en otro extremo. Se muestra mejor en la imagen, actualmente no puedo dibujar un degradado curvo solo lineal, pero estoy seguro de que sus artistas no tendrán ningún problema:
ahora, en la muestra de sombreado, ambas texturas y el umbral del valor de máscara, descartan todos los píxeles que no son más brillante que el umbral de entrada (basado en la entrada de salud% shader).
Usted podriause una fórmula matemática para enmascarar en lugar de una textura, pero si lo hiciera, todavía estaría muy limitado a las formas que puede (= simples) crear con dichas fórmulas, y encontrar una no es trivial.
* ver comentarios
fuente
Implementado matemáticamente, como un sombreador de píxeles:
En la CPU, calcule HealthDirection y su 'producto de punto con V2
En la GPU, calcule una dirección normalizada lejos del punto central para cada píxel. Compare cada producto de puntos con HealthDirections 'para elegir si desea sombrear el "fondo" o el color.
Si "invirtió" este algoritmo y trabajó desde la otra dirección, podría "desangrar" la dirección de cada píxel nuevamente en un porcentaje y compararlos con HealthPercent. Con el porcentaje de cada píxel calculado, realizar el desvanecimiento de rojo a verde en la GPU se vuelve trivial.
Dibuje la barra primero aplicando el algoritmo a un quad; los colores de salida entre rangeMin y rangeMax (se pueden hornear) y clip () o salida transparente en cualquier otro lugar. Luego, dibuja el sprite (modificado) sobre él, usando alfa. Rastreé su barra en CAD, la llené de inundación, luego "la magia vagó" la forma de color sólido en Paint para eliminarla. El mío se ve como basura debido a la mezcla de AutoCAD y Paint, a mano; suponiendo que mezcle los bordes internos con transparente, el suyo se verá perfecto .
El borde blanco es el límite del quad. Esta y las X rojas son solo de referencia:
El "sprite con agujero" no necesita ser renderizado al mismo tiempo que la barra de salud. Deben ser instanciados y dibujados todos a la vez, después de que todas las barras de salud estén completas. Dado que el algoritmo es autónomo en el sombreador, también puede agregar instancias y luego, también, dibujar todas las barras de salud con una llamada de dibujo instanciada. Dibujar cada barra de salud en la pantalla debe tomar 2 llamadas DrawInstanced (...) y ser "loco rápido".
fuente