Mundo Maker
¡Bienvenid@ a Mundo Maker!

¿Quieres aprender todo sobre el RPG Maker?



Regístrate y forma parte de Mundo Maker.
Conectarse

Recuperar mi contraseña

Temas importantes
----------------------------------------
Páginas con recursos RPG Maker
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
Afiliados
Estadísticas
Tenemos 3817 miembros registrados.
El último usuario registrado es mendo89.

Nuestros miembros han publicado un total de 86235 mensajes en 12290 argumentos.

Tutorial: Sombras, Iluminaciones y Tintas

Ver el tema anterior Ver el tema siguiente Ir abajo

Tutorial: Sombras, Iluminaciones y Tintas

Mensaje por Faye Valentine el 2016-11-12, 00:21





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.

Faye Valentine
Soñador
Soñador

0/3

Créditos 281

Gracias : 34

Volver arriba Ir abajo

Re: Tutorial: Sombras, Iluminaciones y Tintas

Mensaje por Wecoc el 2016-11-12, 09:46

Muy buen tutorial. Quería comentar que yo acostumbro a hacer los efectos de iluminación de modo distinto, si me permites una pequeña explicación a adición de tu tutorial. Hice un tutorial hace tiempo sobre ello pero las imágenes se perdieron, así que mejor lo explico aquí rápidamente.

El modo de crear la imagen en Photoshop u otro programa similar, que es lo más importante, sí lo hago igual. Pero puesto que el tono de pantalla oscurecido del maker ya te marca la sombra o parte oscura por así decirlo, puedes hacer el efecto solo con una imagen de luces, no con dos (luces y sombras), y ya queda decente. De ese modo puedes ponerlo en el juego como Fog y no como picture (en XP directamente y en otros mediante script) lo que permite efectos de iluminación en mapas de cualquier tamaño sin complicaciones. Entonces si juegas un poco con las luces borrando las partes que quedan en sombra (similar a lo que hiciste y sin complicarse mucho la vida) puedes cortar los halos en la imagen para lograr más ese efecto luz/sombra.

Imagen:

Otro detalle del que no hablaste es el blending Normal/Fusionado/Invertido del maker. Para efectos de iluminación se suele usar el Fusionado, pero el Invertido en interiores da un toque muy especial. Para guardar los halos para usarlo en modo Normal hay que guardarlo sin fondo, solo las capas de los efectos. Para Fusionado, con fondo negro. Y para Invertido con fondo blanco e invirtiendo el tono (es decir, con hue 180, aunque puede cargarse con hue normal y luego al cargar la fog cambiar la hue desde allí).

Imagen:

Comentar también que para ahorrar mucho espacio en el juego suele ser suficiente en guardar la imagen a escala 50% y luego al cargar la Fog ponerlo con zoom 200; puesto que es muy transparente no se nota.

Aquí algunos resultados:

Resultados:

Normal - Opacidad 160
Tono: -52, -52, -52, 16
Opinión: Mediocrillo, con fusionado puede quedar mejor, especialmente la parte del fuego.


Fusionado - Opacidad 128
Tono: -40, -52, -52, 16
Opinión: Se ve bien, éste es el modo más habitual de aplicar la iluminación.


Invertido - Opacidad 96
Tono: 24, 12, 24, 16
Opinión: Para mí éste es el más interesante.
avatar
Wecoc
Administrador
Administrador



Créditos 12103

Gracias : 522

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


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