Ilumina tus juegos con luz dinámica!

Cómo puedo usar mis Normal Maps ?

Antes de empezar, debes saber decidí escribir la documentación más completa posible sobre este tema porque no había ninguna antes. Así, estudié, probé y describí todas las soluciones que encontré a través de investigación y experimentos. así que te recomiendo que leas toda esta página pero para ahorrarte un tiempo puedo decir esto: El mejor efecto disponible es el de Matriax. Siéntase libre ir directamente a este e ignorar a los demás. Sin embargo, recuerde que nunca sabemos demasiado.

Efecto de Pode : Porque es el primero

Empecemos por el que, personalmente, considero el fundamental y primer intento de iluminación dinámica en construct2 (incluso si esta declaración es arbitraria) :

El efecto de luz dinámica en 2D fue creado por Pode por el 2012. este efecto es una adaptación del trabajo de Matt Greer sobre iluminación dinámica en 2D para motores de juego en nuestro amado Construct2. Su trabajo es descrito aquí. El efecto en si mismo es descargable aquí. La solución de Pode es básica pero efectiva.

Por favor ten en cuenta que permite crear solo una fuente de luz. Una vez que tengas tu sprite y su Normal Map juntos, debes agregar el efecto en el Normal Map como he explicado en el capitulo previo.

Entonces, debes ajustar varios parámetros. Tienes el color de la imagen (image color), entendiendo que el valor mas alto corresponde a las sombras mas oscuras. en la versión actual necesitas ajustar los 3 canales de color para el mismo color. Puedes ajustar la dirección de la luz con los mismos valores que la imagen superior. los vectores XYZ determinan la posición de la luz sobre tu textura debes saber que a un Z menor las sombras serán mas ligeras.

Por ejemplo, puede establecer el valor de la posición de luz (X, Y, Z) de esta manera :

El cuadrado Amarillo es tu fuente de luz y va a seguir al cursor, siempre mirando el centro de tu sprite. para eso usamos un cuadrado rojo invisible ubicado el centro de la imagen inferior. la luz siempre estará de cara a él.

Por supuesto, no estas obligado a usar el cuadrado rojo, puedes usar el spite en si mismo como el objeto a ser mirado por la luz o cualquier punto de la imagen. Es más, ni siquiera estas obligado a eso, en el ejemplo, esta "fuente de luz siempre esta mirando algo" esto es importante porque utiliza el seno y coseno del angulo "K" para ajustar su iluminación. sin embargo, es ciertamente posible hacerlo de otra manera para evitar esto. aunque actualmente no se como hacerlo.

El efecto BumpMapping : Porque está ahí

Y ahora, para terminar esta parte de una sola luz, aquí está el último efecto interesante. El efecto BumpMapping. Es un efecto preinstalado en Construct 2, y puede usarlo sin instalar nada más, aunque necesitarás un Normal Map.

Espera. De acuerdo con el nombre del efecto, funciona con un mapa de bump. Primero, ¿qué demonios es un mapa de bump? y segundo, ¿por qué usamos un Normal Map en ese caso?

Asumo que a nadie le interesa realmente. Pero una vez más, como un desarrollador de vídeo juegos, deberías saber qué estas usando y lo que está haciendo, por lo que recomiendo que leas este pequeño articulo en este pequeño blog

En realidad, el efecto funciona con el mapa de bump y el Normal Map de todos modos. El procedimiento es, una vez más, exactamente el mismo que antes. Tienes tu sprite y su Normal Map. Se establece el efecto en el Normal Map. Se establecen los parámetros relacionados con el efecto y así sucesivamente ...

Estos parámetros son bastante simples desde aquí. La dirección de la Luz en X, La dirección de la Luz en Y, La dirección de la Luz en Z y finalmente la intensidad de esta. Es bastante similar al efecto creado por Pode, pero aquí la luz no necesita mirar al centro de tu sprite todo el tiempo, por lo que puedes iluminar varios objetos al mismo tiempo.

Las matemáticas para alinear la luz con el efecto bumpmapping están totalmente hackeadas. Estoy seguro de que podría hacerse mucho mejor, no he mirado en el efecto de manera adecuada aun (ni siquiera miró el código de la demo de efectos 'Ghost Shooter')

Como podras entender, la siguiente hoja de eventos puede estar obsoleta.

Funciona, pero es raro.

Ahora conoces algunas alternativas diferentes para usar iluminación dinámica en tus juegos pero no puedes usar más de una fuente de luz aun, lo que es triste. En realidad es posible usar varias fuentes de luz, pero en ese caso, tendríamos que modificar uno de los efectos anteriores agregando varias variables.

Por ejemplo, para cada fuente de luz posible, es necesario establecer los vectores XYZ, su intensidad, tal vez color y esas cosas. en la versión actual estas de todas formas limitado, entonces ¿qué podemos hacer?

El Efecto de Matriax : Porque la perfección existe

En este punto hemos visto varias formas de iluminar tu mundo de manera dinámica. como has aprendido, todas funcionan con el mismo concepto, basados en dos objetos principales: un mapa difuso y un Normal Map, al ponerlas juntas una sobre otra. El efecto de Matriax no es diferente , usa los mismos ingredientes para funcionas apropiadamente.

Pero el Normal Map extendido es (actualmente) la mejor forma de lidiar con la iluminación dinámica en construct2. Si, lo he dicho. Una vez mas, el efecto es similar al de Pode, pero con mejor aspecto y... la posibilidad de usar tres fuentes de luz.

Puedes personalizar la iluminación de cada fuente de luz a voluntad. Si quieres poner la primera mucho mas brillante que las otras y colorear la luz de la tercera fuente de rojo no tendrás problema. Puedes descargar el efecto aquí

Una demo capX esta incluida, pero probémoslo con el sujeto de prueba oficial de este tutorial: Cloud Strife. No te preocupes, a él le gusta, le he preguntado, asi que vamos a ver los resultados:

Dejare que ustedes juzguen. para lograr esto debes hacer el proceso usual (mapa difuso, Normal Map, activar el efecto en el Normal Map y bla bla bla) y entonces preocuparte de algunas opciones. (estas opciones son algo que mencioné antes. Tienes tres fuentes de luz, así que debes definir todas las variables que las definen.

Hechémosle un vistazo:

Ahora puedes ver varias variables que se requieren para definir una fuente de luz en este efecto. Empezando en el primer campo, este screenshot muestra las variables de la segunda fuente de luz de la imagen anterior. puedes activar o desactivar ingresando 1 o 0 in este mismo campo, ademas puedes definir los vectores XYZ.

Las siguientes tres variables te permiten definir el color de tu luz en el modelo de colores RGB. Que es un modelo de colores que para llegar a un color final debes mezclar tres colores base, rojo, verde y azul. en otras palabras, ajustando el valor de cada color crearas tu color final.

La luminosidad de la luz (Light luminosity) habla por si misma, es la intensidad de tu luz.

Hay otras cuatro variables que están ahí para definir la luz ambiental (the ambient luminosity). en resumen, la luz en si misma es la iluminación aplicada a cualquier objeto cerca de la fuente de luz, mientras que la luz ambiental es la iluminación de toda la capa (layer). Y nuevamente, puedes definir el color y la intensidad que quieres para esta luz ambiental.

Las últimas tres variables definen el comportamiento de tu luz. el tamaño (size) del arco en medio, su luminosidad (mayor es más oscuro) y finalmente, la distancia de la luz. Debido a que tienes tres fuentes de luz, tendrás que establecer estas variables tres veces. en esta ocacion no tienes que preocuparte del centro de tus objetos o cosas así. Aquí, a diferencia del efecto de Pode, puedes configurar varias luces, con varios objetos con facilidad. Ahora, para los eventos, todo es simple.

La particularidad es que necesitas definir la resolución de la ventana a todos los Normal Maps utilizados para obtener la luz en el punto deseado. En otras palabras, debes establecer los parámetros como este para tus luces:

For X = (LayerToCanvasX(0, "YourObject".x, "YourObject".y))/WindowWidth

For Y = (LayerToCanvasY(0, "YourObject".x, "YourObject".y))/WindowHeight

NOTA: Cuando uses este efecto, la vista previa (preview) no funciona de manera adecuada con Firefox. honestamente no sé por qué, pero todo va perfecto con otros navegadores, asi que cuando quieras probarlo, trata con Chrome u Opera.

CONCLUSIÓN: Bueno, la presentación de las principales alternativas (actualmente) disponibles en Construct2 para la implementación de iluminación dinámica ha concluido. Personalmente recomiendo el Normal Map extendido de Matriax porque es el más completo. quisiera escribir la documentación oficial así que he decidido presentar todo lo que sé sobre eso. como he dicho, para tu proyecto, deberías enfocarte en este ultimo efecto.

en cualquier caso eres libre de elegir aquel que necesites, es posible modificar cualquiera de estos efectos para crear una alternativa real que te permita mas de tres fuentes de luz. Este tutorial (actualmente) no toma en cuenta eso.

De acuerdo a tu decisión, tendrás que diseñar tu nivel para una fuente de uz o un máximo de tres. en el futuro, este tutorial tendrá un enfoque en la forma adecuada para modificar uno de estos efectos, ciertamente el tercero.

Creación al azar creada en Construct2 usando el efecto de Matriax:

Que se haga la luz"]

Y dios dijo

Que se haga la luz

Es tiempo de hacer algunos experimentos. Esta es la parte prectica de mi tutorial. Aquí vamos a estudiar una manera simple de implementar de manera efectiva la iluminacion dinámica en un juego de plataformas muy básico. Primero que todo, necesitamos un nivel, este es nuestro bello nivel, hecho con paint en menos de tres minutos.

Aqui, queremos agregar dos fuentes de luz, asi que usaremos el efecto de Matriax. sabiendo que es lo mejor que podemos usar de momento, de todas formas no es una gran sorpresa que lo elijamos. ahora, necesitamos encontrar un personaje. Este es Bob, Bob va a ser nuestro personaje. Bob será nuestro sujeto de pruebas en lugar de Cloud Strife.

Bob es feliz.

Bob actualmente se está enfriando en mi escritorio. Él no entiende mi incraible fondo de pantalla (wallpaper) y ciertamente ni idea de donde está. necesitamos implementarlo en nuestro incomodo mundo en 2D tan pronto como sea posible. Asumo que sabes las cosas fundamentales de Construct2, por lo tanto no voy a explicar como implementar a Bob. Como la idea es mantenerse básico, le di el comportamiento de un solido (Solid behavior) a cada plataforma en este nivel y el comportamiento de plataformas (platform behavior) a Bob. Aquí estamos:

Bob es feliz.

Tenemos un mundo y una cosa viva en él. Siguiente paso: los Normal Maps. Queremos iluminar a Bob y su ambiente aburrido, así que necesitamos cuatro Normal Maps. De hecho, el nivel tiene tres plataformas más Bob. Nuestra escena tiene cuatro piezas.

Advertencia: Debes trabajar con piezas. Nunca trates de generar un Normal Map para todo el nivel a la vez. Perderás calidad y detalles, y te hará extremadamente difícil de editar la representación de tus plataformas o superficies si están todos aglomerados. Es muy importante dividir tu entorno en varias piezas y luego trabajar con ellas. Puedes vincular los Normal Map resultantes a sus respectivos sprites después, en Construct 2. Por ejemplo:

Para hacer mi creación aleatoria, no creé un solo Normal Map para todo el escenario, sino seis pequeños. Insisto en la noción de hacerlo por partes. El ambiente de este nivel aleatorio se compone de varios elementos rojos, blancos o negros. No he creado un mapa normal para cada elemento de mi escenario 2D, sino para cada parte del mismo. Mantén la diferencia en mente. Volvamos al mundo de Bob.

Usando una de las cinco herramientas descritas anteriormente, generaremos sus Normal Maps y luego los agregaremos al juego. Cree una familia dedicada a ellos, luego le daremos el efecto NormalMap extented a esta familia. Configuremos las opciones de esta manera:

Asegúrate de que cada Normal Map es exactamente del mismo tamaño de su contraparte difusa y están en la misma posición en la escena. En la hoja de eventos (event sheet) no olvides definir la posición del Normal Map ligado a Bob, así:

Añade otros dos sprites que van a ser utilizados como nuestras fuentes de luz. Yo uso dos pequeños cuadrados llamados LightOne y LightTwo. Dales el comportamiento Drag&Drop (Drag&Drop* behavior) , y después en tu hoja de eventos, has lo que hiciste en la página anterior:

Ten en cuenta que no hemos trabajado en más de un sprite hasta ahora ( y menos nuestras pequeñas fuentes de luz). La situación es muy diferente, y si haces una vista previa de tu trabajo, deberías obtener una atrocidad similar a la que tienes aquí:

El extraño fondo magenta de tus Normal Maps es más o menos lo que se convertirá en penumbra una vez que el efecto se active. Todos tus Normal Maps tienen actualmente este fondo magenta, y por lo tanto tienen sus propias penumbras, que es completamente inútil y feo. Tenemos que arreglar este lío. Y esto lleva menos de cinco segundos en Paint o Photoshop (borra el fondo magenta). Por ejemplo, aquí hay un mapa normal correcto:

Y una vez que reemplazamos todos nuestros Normal Maps en el juego por los que has arreglado...

Todo se ve bien. Las pruebas son concluyentes, ahora sólo tenemos que reemplazar estos dos cuadrados de colores por nuestras fuentes de luz reales, lo que implica sólo ligeras modificaciones en la hoja de eventos. Cambiemos también la opacidad de las lámparas. Y así es como vamos: