¡Bienvenido a Universo Maker!
¿Es esta la primera vez que visitas el foro? Si es así te recomendamos que te registres para tener completo acceso a todas las áreas y secciones del foro, así también podrás participar activamente en la comunidad. Si ya tienes una cuenta, conectate cuanto antes.
Iniciar Sesión Registrarme

No estás conectado. Conéctate o registrate

Ver el tema anterior Ver el tema siguiente Ir abajo Mensaje [Página 1 de 1.]

#1 Tutorial: Sombras, Iluminaciones y Tintas el Vie Nov 11, 2016 7:14 pm

Reputación del mensaje :100% (5 votos)

Faye Valentine

avatar




A petición de: @Vala


Nivel: bajo-medio




Introducción: I'm back



Qué de días que no posteaba algún tutorial, pero aquí estoy, cumpliendo con ustedes, especialmente a @Vala que le debía este tutorial desde hace rato. Este tutorial es especial pues no aprenderemos a hacer algo en el maker, sino algo sobre el maker. Las sombras e iluminaciones pueden hacer lucir un mapa muchísimo mejor, pueden realzar la belleza de una escena e incluso pueden aplacar lo vacío que puede lucir un escenario, todo depende de como se juegue con las sombras e iluminaciones. Sin embargo antes de proceder me gustaría hablar un poco sobre este tema:

Es necesario saber que las sombras e iluminaciones son tanto una herramienta como una decisión estética. Son una herramienta porque como he dicho, puede realzar la belleza de una escena, volverla dramática, causar tensión, transmitir emociones en general. El color y las luces son elementos visuales que transmiten emociones, eso es algo que muchos saben. Sin embargo, esto no quiere decir que tu juego tenga que tener iluminaciones para lucir bonito. En lo absoluto. Las iluminaciones son una decisión estética, tú eres quien decide si la estética general de tu juego necesita o no estas sombras e iluminaciones; por ejemplo, para una épica medieval a lo mejor necesites de ellas para escenas de gran dramatismo, pero quizá para un juego con estética 16 bits no es necesario. No, de hecho me atrevería a decir que las iluminaciones de alta calidad ni siquiera se mezclan bien con gráficos retro, tomando en consideración de que las limitaciones técnicas de la época no permitían degradados ni mucho menos. Aún así, los gráficos retro no son necesariamente la única excepción a la regla sobre usar iluminaciones, hay juegos que simplemente no requieren de ella, pero esa será tu decisión.

Agregar también que las tintas de pantalla son importantísimas, más de lo que pensáis. Ya no solo para distinguir si es de noche, día u ocaso, sino que como dije más arriba, los colores transmiten emociones, y muchas veces será una herramienta vital para crear un ambiente en tu juego, créase o no. Oh, ¿me olvidé de mencionar que se mezclan excelentemente con las sombras e iluminaciones? Ópalo Guiño

Por último decir que no es necesario que las sombras e iluminaciones sean 100% perfectas. No nos vamos a quebrar la cabeza calculando sombras y posiciones cuando lo que estamos haciendo es un juego en 2D, yo soy de los que valoro lo bien que se vea sobre detalles banales como esos. Siempre es necesario seguir una lógica pero jamás podremos replicar exactamente la luz de la naturaleza mediante Photoshop, esto va para aquellos que quieren hacer juegos con iluminaciones super-realistas y/o critican las iluminaciones de otros por carecer de realismo cuando como ya he dicho, esta es una herramienta y no una necesidad.

Nada más que aportar, a la acción.



Paso 1: Base



Nuestro primer paso será tomar un mapshot de nuestro juego. En el Ace podéis hacerlo con el script de Hime, que @Vala misma aportó hace un tiempo en este foro, en la sección de scripts. Otros makers tienen sus débidos scripts/plugins, pero yo trabajaré con la resolución estándar para no liarme luego con fijar la imagen a la pantalla y etcétera. Adicionalmente podéis sacarle una captura de pantalla a vuestro mapa (si es tamaño estándar), no importa que el tamaño no sea el exacto de tu maker, luego en nuestro editor fotográfico le cambiaremos el tamaño al debido. Haced lo que creáis conveniente, lo importante es tener la base para trabajar. Yo he hecho este feo mapa:

(A través de todo el tutorial veréis el fuego ese, pero tras tomar tooodas las screenshots me arrepentí y lo quité xDD así que ignoradle)


Bastante feo, ¿no? Luego lo mejoraremos bastante, no os preocupéis.

Ahora con vuestro mapshot en mano necesitaréis alguna herramienta de edición de imagenes, sea GIMP o Photoshop. Este tutorial lo haré con Photoshop, lo siento mucho a los usuarios de GIMP, no me gusta hacer cosas de este tipo en ese programa. De todas formas creo que son muy similares y no tendréis problemas en buscar las alternativas de hacerlo allá, vosotros conoceréis vuestro programa.

Lo abrimos y creamos una cuadrícula de 32x32 (o 48x48 si eres usuario del MV). 

Esta configuración la podemos encontrar en la siguiente dirección:

Edición>Preferencias>Guías, Cuadrículas y Sectores...

Una vez creada nuestra cuadrícula procederemos a crear una nueva capa u rellenar todo lo que está dentro de las paredes con un color negro. Esto será la sombra (ya veréis más adelante)


Y tenemos nuestra base lista para trabajar.



Paso 2: Fuentes de Luz



Tenemos un mapa pintado de negro, ¿de qué nos sirve esto? Pues ya sabéis que en un interior las sombras siempre están presentes, así que lo que haremos será borrarlas suavemente para crear iluminaciones. Ya me entenderéis más adelante, de momento bajadle la opacidad a la capa al valor que creáis necesario, según cuan oscuro queráis que esté. Lo siguiente que haremos será coger la herramienta de Borrador, con opacidad y flujo al máximo, pero dureza al 25%, y haremos 1-3 clicks en la misma posición donde estén nuestras fuentes de luz, que en mi caso son esas dos ventanas.


Como podés apreciar, tenemos el entorno oscuro y nuestras fuentes de luz brillantes. Esto es por supuesto porque de donde proviene la luz no habrá sombra alguna, pero la luz que emita se desvanecerá con la distancia. En breves pasaremos a esto.

Tendremos que ajustar ahora nuestro borrador para borrar las sombras. Estos son los valores que yo recomiendo :


Con estos valores podremos trabajar sobre la primera fase de la luz, donde es más fuerte. El flujo y opacidad podrán variar, de hecho la opacidad lo hará, ya veremos eso más adelante; la dureza y tamaño también, pero yo no recomiendo para el tamaño bajar de 24, no con esa dureza. El flujo no lo recomiendo subir de 15%.

Es una lástima no poderos mostraros en video, así que no me queda más que explicaros por escrito. Aún así no es una técnica difícil, así que no problemo por ese lado. Lo que haremos será borrar suavemente con trazos en arco o semicirculares la primera fase de la luz, donde es más fuerte. Luego bajamos la opacidad y justo donde terminó nuestra primera fase, volvemos a borrar de la misma manera. Volvemos a hacer lo mismo con la última fase, esta vez con una opacidad mucho más baja. Al final tendréis un gradiente. Experimentad vosotros mismos, sé que lo podéis hacer, cualquiera puede. A propósito, las opacidades con las que trabajo son: 100>70>40, para la fase 1, 2 y 3 respectivamente. Recordad que tenéis el flujo muy bajo así que 70 y 40 no representan mucho. Eso sí, acordaos de que el flujo incrementa cuanto mováis el mouse, así que procurad no hacerlo demasiado para no romper el degradado.

Así me ha resultado a mi:



Es normal que siempren resulten esos trocitos de sombra sobre la luz, pero no tenéis que hacer más que coger un borrador con una opacidad (usualmente 50-70) adecuada y borrarlas para que nuestras sombras estén lo más prolijas posibles:


Antes de pasar a hacer las iluminaciones como tal (lo que hemos hecho de momento ha sido una máscara) tenemos que tomar en cuenta algunos detallitos. Por ejemplo, ¿véis esas columnas? Deberían estar afectadas por la luz un poco, especificamente el lado que la encara. Así que con un borrador con menor tamaño y una opacidad de alrededor de 80 (esto variará según cuán lejos esté el objeto, en mi caso no está lejos) nos encargaremos de hacer que brille. También iluminé un poquito más la pared.




Paso 3: Rashos de Luz



Crearemos una nueva capa, con la herramienta de Marco Rectangular (selección =P ) haremos un rectángulo del tamaño de nuestra ventana y lo arrastraremos hasta donde creamos conveniente según la fortaleza de la luz. Luego lo rellenamos con un color de luz, normalmente un amarillo claro para el día, puede pasar a ser un amarillo naranjoso para el ocaso. Ya si queréis luces sobrenaturales os buscaréis vuestros colores xD Para este tutorial yo usé:

Código:
#ffda83



Pero las luces no son tan cuadrículadas, ¿o sí? Claro que no. Un rayo de luz no entra directamente como un rayo solamente, sino que 'baña' el área. Una excepción a la regla puede ocurrir cuando A) El objeto que filtra la luz le da esta forma y B) La luz es tenue. Pero no es nuestro caso así que al demonio 8D

Deformaremos nuestra luz para darle esa forma de que está cubriendo un área. Para ello iremos a:

Edición>Transformar>Deformar

Allí, cada punto que mováis deformará esa área. Yo le he dado la siguiente forma:


Ahora tenemos un rectángulo más feo de lo que era, con forma de intento de arco. ¿Y ahora? Ahora usaremos a nuestro amigo Gauss y le aplicaremos un Desenfoque Gaussiano, para este tutorial yo lo he aplicado con el valor de 25. Usualmente queremos un valor que difumine la luz hasta que pierda forma, se vuelva abstracta, pero no compleeetamente del todo, si os váis muy lejos vais a tener un brillo muy fuerte y más allá de la máscara de luz que hemos creado previamente. Observad:


Ya sé que diréis que no luce bien del todo pero esperad, tan solo esperad. Muchas cosas lo que véis en el editor no es lo que se refleja en el juego, creedme.

Lo último que haremos será realzar un poco los lugares más oscuros, para ello cogemos un pincel y de la misma forma que hemos borrado antes, pintaremos. Lo haremos en los lugares más alejados de la luz y procurad que no se os vaya la pinza, no tiene sentido que una luz ilumine y apenas desaparezca alla sombra absoluta. Los valores de flujo, opacidad, tamaño y dureza pueden ser los mismos que el borrador, o los que os convenga más. Las mismas reglas aplican.


Y listo. Ahora exportamos todas las capas de sombra por separado, y cada capa de iluminación por separado.



Paso 4: Configuración en el Maker



Abriremos nuestro RPG Maker de preferencia y crearemos un evento donde mostrará las dos pictures. La picture de la sombra tiene que ir debajo de la de luz, colocadla con opacidad de 255 ya que la opacidad fue previamente manipulada en el Photoshop. La sombra colocadla con mezcla de Añadir, a la opacidad que os convenga. Aplicad una tinta y voilà.

Resultado final:


Ya sé que os sentiréis estafado pues sigue luciendo feo, ¡pero ahora luce menos feo! ¿No os encanta los efectos de iluminación

Pero bueno, en mi defensa ha sido un poco apurado para sacar las screenshots del tutorial, no tuve tiempo para cuidar cada aspecto y tal, pero aquí os dejo otras dos imagenes con las que sí guardé más cuidado. Las había hecho antes siguiendo el mismo método que enseñé:


(Esta no está tan cuidada en las luces en el sentido de que están demasiado duras, pero igual luce bien xD)



Bonus: Tintas



Las tintas o tonos de pantalla son aquellas las que dotarán de color a nuestra imagen en el juego. Sea para dar a entender que es de noche, que un lugar es muy oscuro o que el sol está por salir, es una herramienta necesaria y que, incluso si no usas efectos de iluminación, estará presente en tu juego a lo largo de su duración. Puede marcar la diferencia instantáneamente entre "oh, estoy en un desierto" y "dios mio el calor me está matando en este desierto del demonio, alguien que me mate por favor" o para los inexpertos en tintas: "MIS OJOS" (¿lo pilláis? la pantalla sobresaturada 8D)

Nuestras tintas tienen que evitar ser super saturadas o de lo contrario será muy fuerte a la vista y causará desagrado. Los tonos de pantalla tienen que reflejar el ambiente y escenario actual.

Ahora bien, es super complicado ponerme aquí a explicar como lograr cada uno de los cienmil tonos posibles, pero sí que puedo facilitaros unas cuentas tintas de pantalla genéricas, y que lucen bastante bien.

Atención: la paleta de los tilesets puede afectar el resultado del tono de pantalla y/o su saturación
Atención 2: algunas imagenes de muestra no parecen tener un cambio notable, esto se debe a la sutileza del cambio pero si se hace una comparación entre el mapa sin tono y el mapa con tono, será bastante notorio. Probadlo vosotros mismos.
Atención 3: algunos tonos de pantalla vienen muchísimo mejor acompañados con otros efectos, como neblina, lluvia y claro, iluminación.
Atención 4: no debéis tomar estos valores como de facto, siempre jugad con los valores para que se adapten a vuestras necesidades. Como en todo mis tutoriales, estas son bases para que vosotros trabajéis y tengáis más o menos una idea de qué tono sería más óptimo para X caso.


Spoiler:

Bares escribió:R: -22 | G: -54 | B: -54 | S: 128
Interior Ocaso escribió:R: -12 | G -34 | B: -44 | S: 98
Noche escribió:R: -102 | G -85 | B: -35 | S: 168
Amanecer escribió:R: -2 | G: -6 | B: 28 | S: 66
Día Normal escribió:R: 18 | G: 8 | B: -14 | S: 34
Ocaso escribió:R: 0 | G: -51 | B: -64 | S: 100
Día Caluroso escribió:R: 34 | G: 7 | B: -34 | S: 0
Tormenta escribió:R: -85 | G: -51 | B: -34 | S: 138
Sepia escribió:R: -34 | G: -48 | B: -58 | S: 180
Cielo escribió:R: 12 | G: 11 | B: 34 | S: 168
Nublado escribió:R: -34 | G: -17 | B: -17 | S: 120
Cueva Fría escribió:R: -51 | G: -34 | B: -17 | S: 68



Créditos: no requeridos


*Este tutorial fue hecho en Photoshop pero puede hacerse en cualquier editor de imagenes avanzado tales como GIMP o Paint.NET con los conocimientos requeridos. Los tonos de pantalla presentados sirven para cualquier versión del RPG Maker.

#2 Re: Tutorial: Sombras, Iluminaciones y Tintas el Vie Nov 11, 2016 7:33 pm

Reputación del mensaje :100% (1 voto)

Tomate

avatar
Insisto, deberías recopilar todo esto en un hermoso PDF (pues manejas bien el diseño gráfico) y armar el más genial, increíble y didáctico Manual de Tutoriales por Faye Valentine. ¡Serías famoso! Ópalo Contento Ópalo Sonrisa Grande

Puedo estar todo el día leyéndote, Faye. Está genial, como siempre, todo impecable y súper ordenado con variedad de capturas de pantalla. ¡Y qué tan cierto es lo que describes! Los colores están para ayudarnos a dotar de emociones distintos lugares, personajes y momentos. Sí,sí, son vitales.

Me encantó que reconozcas que no es necesario utilizar la iluminación en todos los juegos, ya que hay personas con estilos diferentes. Aunque cuando veo un mapa con iluminación y bien hecho, no puedo evitar admirarlo, transmiten mucho realismo. Pero bueno, bien explicaste que forma parte de nuestros gustos y decisiones, cada uno con su estilo.

Tendré que comenzar a darte las gracias en nuevos idiomas alienígenas para no ser tan repetitivo...¡PERO ES QUE ERES UN GENIO! Ópalo Reputación Ópalo Aplaudiendo

P/D: La introducción me dio hizo gracia. Ópalo Sonrisa Grande

#3 Re: Tutorial: Sombras, Iluminaciones y Tintas el Lun Nov 14, 2016 4:52 pm

Vala

avatar
Faye, muchísimas gracias por el tuto, me sirvió bastante. Es probable que a partir de ahora trabaje mucho más con los efectos de luz y sombra. Cabe destacar que el agregado de las tintes fue un acierto, ya que muchas veces las desestimamos, pero son asombrosamente útiles.
Ópalo Reputación para vos.

Saludos,
Vala.

#4 Re: Tutorial: Sombras, Iluminaciones y Tintas el Mar Nov 22, 2016 1:54 am

Natalie

avatar
Para variar... un gran post! Ópalo Reputación

Yo ya conocía las bondades de las sombras e iluminación, fue preguntando en el post de screens (que por cierto lo tengo abandonado, le echaré un vistazo) y sobre todo aprendí de @Leaser (que habrá sido de él?),@Ledai y @LuRen (por aquel entonces Ginrei xD), ¡gracias sempais! Ópalo Contento

Aún así me ha resultado muy útil los valores de los tonos, es muy rollo estar probando y gracias a ti tenemos un tono para cada situación!! ^^  

Bueno, ahora todos a iluminar proyectos... ¡miedo me da ver el nivel del siguiente concurso de screens! Ópalo Emocionado

#5 Re: Tutorial: Sombras, Iluminaciones y Tintas el Mar Nov 22, 2016 4:26 am

Brrt

avatar
Otro tuto asombroso de @Faye_Valentine , para mi esto es bastante util, porque siempre trato de darle mejor aspectos a mis proyectos, tratando de hacer mapas que sean de mi gusto y para el jugador, pero últimamente he estado fallando mucho, me queda los mapas bien como quiero que queden, pero no las iluminaciones y pues con este tuto me ha venido anillo al dedo Ópalo Gato.

tome su Ópalo Reputación se lo ha ganado.

#6 Re: Tutorial: Sombras, Iluminaciones y Tintas el Vie Feb 10, 2017 7:41 pm

Leaser

avatar
Espero no sea considerado Necropost, hace bocha que no paso pero como vi la mención que hizo @Natalie pasé a ver qué tal el tutorial.

Muy bueno y detallado, sirve para todos aquellos que no están experimentados en el tema de iluminación/sombreado. Cubriste bastantes aspectos de la iluminación, mi único detalle es que no soy muy fanático del "sombreado general" en los bordes internos.
Prefiero ir por un sombreado manual, donde cada objeto tenga y proyecte sombras en base a la/s fuentes de luz que haya. Utilizar un sombreado general a mi ver le resta esa firmeza que tienen que tener los objetos y en donde la sombras juegan un rol primordial. Aunque para el común de los usuarios es conveniente que utilicen ese tipo de sombreado para ir aprendiendo y después expandirse/practicar con un sombreado avanzado.

En fin, un gran tutorial y muy bien explicado!

(@Natalie Sigo vivo, pero como siempre dije quiero un Universo Maker con fondo oscuro. El fondo blanco es muy molestooooooooooOoOoOo (?. Pasan los años y voy a seguir pidiendo lo mismo. jajajajaj Cómo va Godelse?)

Edit: Formato, sintaxis y detalles.

Contenido patrocinado


Ver el tema anterior Ver el tema siguiente Volver arriba  Mensaje [Página 1 de 1.]

Permisos de este foro:
No puedes responder a temas en este foro.