Tutorial de iluminación

Tutorial de iluminación
Autor: kenny_77

--------------------------------------------------------------------------------

Introucción
Antes que nada bienvenidos a mi pequeño tutorial acerca de como iluminar los interiores de las casas y otros mapas.
Para el ejemplo uso un mapa pequeño y simple, porque no es necesario usar uno mas grande, pero obviamente ésta técnica puede ser aplicada a cualquier tipo de mapas y de todos los tamaños.



Qué necesito?
Un editor gráfico. Para este tutorial uso Photoshop CS2 en inglés, pero hasta donde yo sé puedes usar cualquier versión del Photoshop, o también The GIMP.
En caso de que utilices charas para los efectos de luz, vas a tener que hacerte de una plantilla que se adecúe al tamaño de los sprites. Para crear tu propia plantilla sólo tienes que crear una imagen capaz de contener 16 sprites del mismo tamaño. O sea que, si las dimensiones de tu sprite de luz son 4x4px, tu plantilla va a tener que ser de 16x16px.


Comenzando...
Lo primero que vamos a tener que hacer, es tomar una screenshot del área sobre la cual vamos a trabajar. Si se trata de una mapa pequeño, trata de tomar una screen de todo el mapa para tener una mejor perspectiva de cómo va a quedar

Luego, con la herramienta de selección poligonal (polygonal lasso) selecciona el área que se va a ver afectada por la luz.


En ésta parte hay que tener cuidado. Es aconsejable utilizar mucho zoom para asegurarnos de no seleccionar nada que no debamos, ni de no seleccionar alguna parte que debería verse afectada por la luz. También es aconsejable utilizar una forma triangular a la hora de seleccionar la parte de abajo de la ventana, ya que es la forma más "real" que podemos lograr siendo un juego en 2D.
El seleccionar o no las cortinas o no, es opcional, de hecho, como lo tengo hecho en mi juego, las seleccioné en este paso.


Luego de eso, creamos una nueva capa (Ctrl+Shfit+N en Photoshop) y pintamos nuestra selección de blanco.

Bien. El comportamiento de la luz es un tanto raro, pero vamos a tratar de emularlo lo más parecido que podamos. Si analizan alguna imágen de un juego en 2D (por ejemplo el Golden Sun de GBA), notarán que la luz se hace más y más ténue hacia abajo, pero también hacia los lados. Teniendo en cuenta ésto, no será difícil recrear dicho comportamiento, aunque sí hay que ser cuidadoso y detallista.

Ahora tenemos que crear una nueva capa por encima de la anterior, tal y como está indicado en la screen de la derecha.
La intención de ésto es delimitar desde dónde hasta dónde se va a ir atenuando la luz, y al dividirlo en "etapas" se hace más fácil para nosotros trabajar luego la imágen.
El número de divisiones varía segun el tamaño de la imágen y del nivel de detalle que le quieras dar. La cosa no es ni ponerle pocas divisiones para que sea mas fácil, ni ponerle muchas para que quede súper detallado, sino encontrar un equilibrio, ya que si le pones demasiado detalle vas a trabajar mucho en vano, ya que un nivel de detalle muy elevado no se nota en este trabajo en particular, y una imágen trabajada con pocas divisiones, queda simplemente horrenda, así que la cosa es encontrar un equilibrio.
Tampoco es necesario que queden súper parejas las divisiones, ni super iguales las lineas que dividen, con que tengan más o mens la misma forma alcanza y sobra.
Lo más importante acá es que se note bien en las divisiones que van para abajo y también para los costados, que suban un poco, ya que si no, en pasos posteriores vas a notar que queda mal.




Espero que con esas imágenes hayan entendido más o menos cual es el concepto de dividir lo pintado de blanco.



Creando el efecto de iluminación
Ahora lo que tenemos que hacer, es empezar a borrar parcialmente lo que pintamos de blanco para darle transparencias.
¿Cómo lo hacemos? Cambiando la opacidad de la herramienta de borrado. Recomiendo que le den entre 15 y 20% de opacidad, pero ésto es de acuerdo a lo que busquen, acá entra en juego tu gusto más que nada.
Bien. Lo que vamos a hacer, es ir borrando cada vez más basándonos en las divisiones. Le damos de 2 a 5 veces con la goma a todo lo seleccionado, como para dejar sentada una base. A partir de ahora el modo para borrar es el siguiente:

Partimos de la primera marca. A partir de esa marca, para abajo borramos todo. Después descendemos una marca.
Borramos todo desde la segunda marca para abajo. Descendemos una marca.
Repetimos la operación hasta que no nos queden más marcas xD


Ahora, si querés, podés redondearle los bordes borrando con la goma con 100% de opacidad.
Aunque es opcional, personalmente te recomiendo que lo hagas, más que nada para que no te quede muy cuadrada la luz.
Resultado final



Queda bonito, ¿no?.
Ésta técnica se puede aplicar también para hacer luces laterlales, que entren desde supuestas ventanas situadas en las paredes laterales del lugar. El procedimiento es exactamente igual, solo que, obviamente, hay que proyectar desde otro ángulo a la hora de marcar con el lazo poligonal.

Pasando el sprite al maker
Tenemos varias formas de hacerlo:

Mediante CharasEste es el modo más cómodo, puesto que no tenemos que calcular coordenadas como si usaramos imágenes, ni nos consume lugar que puede llegar a ser valioso cono si lo pusiéramos en el tileset.
Mediante imágenesEste método sólo recomiendo usarlo en casos muy específicos aplicando ésta técnica, puesto que en caso de tener que emplear muchas imágenes en un mismo mapa supone un consumo de memoria que podría tornarse molesto.
Agregando la imágen al tilesetÉste método es quizá el que menos conviene, pero puede llegar a resultarle útil a alguien. Sus principales desventajas son:
Como generalmente estos gráficos ocupan bastantes tiles, supone mucho lugar en una capa que podría ser aprovechado para el decorado del ambiente, por ejemplo cosas sobre una mesa, o una pala bajo la ventana.
Tienes que editar cada tileset que vayas a usar, lo cual es muy incómodo.
Si bien estas son dos desventajas muy grandes, éste puede resultar el método más cómodo para agregar las luces que hagamos para ventanas laterales, ya que con eventos (al menos yo) no se puede hacer que queden pegadas al autile del costado.
Bueno, eso es todo. Espero que les sirva.
Mapeando de acuerdo a la iluminación
No hay mucho que hablar sobre ésto, pero es bueno mencionarlo.
Notarán que en los tilesets vienen 3 tiles por cada tipo de piso: uno claro, uno oscuro, y uno mitad y mitad.
La idea básica es utilizar el claro como base y el oscuro para las sombras y, para darle un toque más real, proyectar sombras usando el que es mitad y mitad, y, de ser necesario (casi seguro que lo será), crear con el photoshop uno igual pero para el otro lado, o sea que la sombra vaya al revés.

Wow que buen tutorial está mjy bien porque eso de que halla una ventana pero no halla luz, y lo único que se pueda hacer es poner la luz en el suelo queda algo...bueno que no está mal pero es preferible esto que seve mucho mejor XD Gracias por el tutorial jirachi me alegro de que estes en el foro y de que aportes en el
Caistsa

Muy buena, y qeria decir una cosa.
Alguien con un poco de cabeza, ya lo habria pensado el solo, de hecho, yo, hice un titleset para mi demo, lo hice, pero no de ese modo, si no oscureciendolo, pero qe de todas formas, es lo mismo al fin y al cabo.
Buen aporte (=

gracias,gracias,no hay de que,ya ire poniendo mas tutoriales,me alegro de aportar cosas al foro

Gracias tio muy util!