Últimos temas
» Stats que no calzan (MV)
por Muzgar Hoy a las 1:49 pm

» Juego Base en Inglés (RPG MAKER MV)
por Muzgar Hoy a las 1:22 pm

» Problema con pantalla en negro (MV)
por The Ferydra Hoy a las 2:12 am

» [VXACE] Las Esferas de Capricornia. Actualizado 06.12.17
por Pocari Ayer a las 8:31 pm

» Hago BSO para tu proyecto
por RoryGRojas Ayer a las 4:53 pm

» 3ºC vs Kursaal (RPG2000) (Terminado)
por rpgero Mar Dic 12, 2017 4:52 pm

» No se ven/ejecutan eventos
por Pokefanmati Dom Dic 10, 2017 8:22 pm

» [ACE] El secreto de la estrella perdida
por TheHeroZX Mar Dic 05, 2017 7:28 pm

» Demo "Oblitian: La Búsqueda" (2017) [VxAce]
por Invark Lun Dic 04, 2017 4:07 am

» Procesos automáticos bloquean el movimiento de mi personaje
por KRiZaLiD Lun Dic 04, 2017 3:15 am

» las armas inferno(demo)
por conor Dom Dic 03, 2017 9:23 pm

» Pongámosle un Mote a nuestro Limo
por Stainler Dom Dic 03, 2017 5:01 am


Tutorial: Sombras, Iluminaciones y Tintas

Ver el tema anterior Ver el tema siguiente Ir abajo

Tutorial: Sombras, Iluminaciones y Tintas

Mensaje por InvariableZ el Sáb Nov 12, 2016 1:24 am





A petición de: @Vala
(Foros UM)


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? ;)

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
Nota: este tema fue originalmente posteado en UM por mi persona. Faye Valentine es mi nick en dicho foro, pero de igual manera quería aportar este tutorial aquí. Dependiendo de su recepción pasaré más tutoriales hasta acá.


*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.
avatar
InvariableZ
PJ de Relleno
PJ de Relleno

Venezuela
RPG Maker : Ace
Mensajes : 27
Monedas : 764
Reputación : 21

Volver arriba Ir abajo

Re: Tutorial: Sombras, Iluminaciones y Tintas

Mensaje por Muzgar el Sáb Nov 12, 2016 2:25 pm

Un tutorial muy completo y realmente útil, te dejo el +1 por ahí xD

Muchas gracias por tomarte las molestias de postearlo aquí tambien y de crear un tutorial tan detallado, me gustaría ver más como este si fuese posible.

Un saludo

_________________
Apoya wild wars poniendo esta barra en tu firma


Muzgar apoya a...
Spoiler:

avatar
Muzgar
Admin
Admin

RPG Maker : Ace
Mensajes : 1031
Monedas : 867
Reputación : 108

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

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