¿Cómo creo múltiples focos 2D?


12

Estoy buscando crear un efecto de "foco" 2D que permita un foco en múltiples entidades. Es decir, como si varios sprites estuvieran sosteniendo antorchas. Para una sola entidad (un foco), uso una técnica en la que superpongo un sprite degradado y hago que el punto central persiga a esa entidad. Esta técnica funciona bien para un solo foco de atención. Aquí hay una captura de pantalla para ilustrar de lo que estoy hablando:

Foco único: funciona

Efecto de foco con un foco

El problema con el que me encuentro es que esta técnica no se extiende a múltiples entidades. Si superpongo otra imagen destacada, me encuentro con varios problemas. Aquí hay una captura de pantalla simulada:

Múltiples focos = problemas

Efecto Spotlight con dos focos

El problema más obvio son las esquinas visibles. Esto podría resolverse haciendo que la imagen destacada sea gigantesca para cubrir todo el nivel, pero eso no se siente bien. El segundo problema más difícil de resolver es que estoy multiplicando efectivamente la oscuridad con esta técnica. Entonces cada sprite agregado tiene el efecto de oscurecer a todos los demás. Claramente estoy abordando este problema incorrectamente.

¿Algunas ideas?


Esfuerzos continuos

Ha habido una discusión sobre las opciones de mezcla en los comentarios. Aquí está mi pensamiento actual. En mi ejemplo de foco único anterior, uso un archivo de imagen que se parece a esto: (he reemplazado la transparencia con el color verde para que sea más fácil de ilustrar)

Enfoque de transparencia

Como se discutió anteriormente, el problema es que la combinación alfa de esta imagen con otra imagen no va a producir el efecto deseado. En cambio, producirá esto:

Superposición de dos círculos de transparencia.

Eso no me parece un problema de opciones de mezcla. Me parece que el problema es que ese tipo de imagen tiene incorporada la máscara de transparencia y la imagen (un cuadrado negro), cuando deberían separarse.

Entonces, en lugar de una imagen en negro con una transparencia recortada incorporada, debería usar máscaras de transparencia que se utilizan en tiempo de ejecución contra el cuadrado negro. Al hacerlo, todavía no puedo usar una máscara de transparencia blanca y negra tradicional o se encontrará con el mismo problema. Aquí hay un ejemplo, esta vez el blanco y el negro representan el blanco y el negro:

Máscara de transparencia

Parece que la solución sería aplicar una máscara de transparencia que en sí misma utilice la transparencia. Algo como esto: (verde = transparente)

Máscara de transparencia con transparencia

De esa manera, se podrían mezclar varias máscaras de transparencia alfa y ENTONCES usarlas como una máscara de transparencia contra el cuadrado negro. Aquí hay un ejemplo de dos de las máscaras de transparencia alfa combinadas:

Dos máscaras de transparencia con transparencia

De todos modos, ese es el enfoque en el que estoy trabajando para implementar. Publicaré resultados si esto funciona. Lo que no sé (en este momento) es si puedo usar una máscara de transparencia que tenga transparencia.


Pensando en ello, parece que debería mover las máscaras de transparencia y aplicarlas a una gran textura negra. Sin embargo, no tengo idea de cómo se haría eso.
Cameron Fredman

77
No estoy seguro de cómo está creando o aplicando sus degradados, sin embargo, esto podría ser un problema de fusión, donde si usa la combinación correcta funcionará bien. Necesitaríamos más información sobre las texturas.
dennmat

Estoy usando AndEngine como marco, y gran parte de la mezcla ocurre detrás de escena, aunque hay un "setBlendFunction ()" disponible.
Cameron Fredman

Mirando a qué se vinculó, diría que probablemente desee que la segunda solución aparezca en la parte inferior o la tercera si eso no funciona. No tengo claro sobre andEngine, y no parecían tener documentos, tal vez si no puedes encontrar tu respuesta en ese hilo, podrían ayudarte más, ya que parece que ya están jugando con la combinación opciones mucho detrás de escena.
dennmat

Aunque ese hilo parece estar solucionando su problema en primer lugar, ¿tiene la versión que incluye ese cambio?
dennmat

Respuestas:


3

Conceptualmente, la solución a múltiples focos consiste en:

  1. Comience con una matriz completamente negra para mantener los valores de iluminación para cada píxel en la escena.
    • Cero representará un área de la imagen sin luz alguna.
    • El 100% representará un área que está completamente saturada de luz natural.
    • Si quieres ponerte elegante, podrías tener un valor superior al 100% (digamos, 200%) que represente un área de la imagen que está sobresaturada y difumina todo en una deslumbrante mancha blanca de píxeles. Preocúpese por esto más tarde y simplemente limite los valores entre 0-100% por el momento.
  2. Para cada fuente de luz dentro de la pantalla o lo suficientemente cerca del borde que su halo agregaría a la luz, agregue los valores de luz de esa fuente de luz a su matriz de valores de luz para los píxeles de la escena.
  3. Utilice la matriz de valores de luz resultante para modificar los píxeles de su escena de modo que:
    • Los píxeles iluminados con un 0% de luz son negros.
    • Los píxeles iluminados con un 100% de luz tienen su color normal.
    • Otros píxeles son un color a medio camino.
    • Parece que ya sabes cómo hacer este paso, a juzgar por tus capturas de pantalla.

El truco es comprender que la combinación alfa puede hacer uno o más de estos pasos. La combinación alfa se refiere al uso de un mapa / imagen alfa para modificar los píxeles de una imagen o textura de una manera simple. Por lo general, también significa que será un conjunto rápido de funciones, o implementado con comandos especiales de hardware, para hacerlo más rápido. Puede hacerlo con matrices regulares y comandos de lenguaje normal, pero usar las funciones especiales de biblioteca alfa / blending es probablemente mejor. ... Y no tendrá errores. A veces esto significa hacer que los píxeles sean parcialmente transparentes, pero para su caso, esto significará:

  • Agregar valores alfa a cada píxel, para construir la matriz de valores de luz desde el n. ° 1.
  • Usando la matriz de valores de luz del n. ° 1 para resolver los colores finales para píxeles del paso n. ° 3.

Comenzaría a buscar la documentación de sus funciones de mezcla alfa para ver qué funcionalidad proporcionan para combinar píxeles de varios tipos. Sospecho que tendrán funciones para cada uno de los pasos que deberá realizar, pero pueden estar bajo nombres que no son obvios.


Estoy buscando esta respuesta y voy a intentarlo. La idea de un destello / desenfoque de lente para valores superiores al 100% también es un bono agradable e inspirador. Publicará actualizaciones con las lecciones aprendidas en el proceso. Gracias ET
Cameron Fredman
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.