PUNTO 1: PERSPECTIVA

La perspectiva en el tiling es muy importante, ya que no es lo mismo un tile con una buena perspectiva que otro que parece que lo estés viendo de frente, ¿no? Pues bien, mi técnica al hacer un tile es declarar el ángulo de inclinación en torno a 60º, algo así visto de perfil:



Por otra parte, si lo viéramos de frente, sería algo así. Véase que comparo; a la izquierda, como si se viera de frente, y a la derecha, como se tiene que ver:



PUNTO 2: OUTLINES

Veo también importante aclarar el tema de las outlines, ya que cuando se empieza se tiende mucho a cometer estos fallos que desmejoran mucho el resultado final.

Para empezar, en esta imagen os muestro cómo debe hacerse una curva. Primero tienes la línea recta, luego haces otra de 2 px, después otra de 1, y ya otra vez de 2 px hacia donde quieras girar:



Otro punto a tener en cuenta es que el grosor de una out nunca debe sobre pasar el píxel, ya que queda feo:



PUNTO 3: PALETAS

En este punto seré breve. He marcado con varios colores las zonas más adecuadas para ciertos tiles. He escogido paletas cercanas a la gama de grises porque no son tan chillonas, que es otro fallo que se suele cometer al empezar, el coger paletas demasiado llamativas.



Rojo: zona recomendada para coger colores.
Rojo oscuro/marrón: zona recomendada para hacer los sombreados.
Azul: zona recomendada para coger outs exteriores.

Para empezar, creamos un archivo en paint. Vamos a imagen, tamaño de imagen y ponemos los parámetros [ancho=32; alto=48]. Después, cogemos el borrador, ponemos como segundo color el que queramos (que no sea negro o muy oscuro, por favor) y creamos una plantilla de cuadraditos.



En esta parte, cogeremos la herramienta círculo y haremos 3 círculos. El de arriba, el más pequeño. El del medio, el más grande. El de abajo, el mediano. Cuando cojáis práctica no hará falta, pero de momento viene muy bien y es de mucha utilidad para hacer la forma básica del árbol.



Ahora vamos a arreglar las outlines para perfeccionar el árbol y que no tenga esa forma circular. Mucha gente hace una mitad y luego copia y pega en el otro lado, pero yo quiero que el árbol sea irregular, asi que lo hago distinto en toda su extensión.



Ahora, cogeremos las paletas. Yo he cogido nueve por si me conviene usar una paleta en vez de otra, pero lo normal son 7 u 8 contando con las outs, esto para la copa del árbol.
Una vez cogidas, podemos empezar a pintar. Cogéis el color más oscuro y vais rodeando la parte de abajo, tal como se ve en la imagen. Después, hacéis un par de líneas más para simular la forma del follaje. Luego, cogéis el segundo color más oscuro y pintamos el interior. Con el tercero hacemos un par de brillos tal como muestra la imagen.



Ahora haremos lo mismo pero en el segundo nivel. Para la cuestión de las paletas, yo uso un método que lo llamo (por ponerle un nombre) 123-234-345. ¿En qué consiste?
Para el primer nivel, hemos usado el 1º, 2º y 3º color ¿no? Pues para el segundo nivel, usaremos el 2º, 3º y 4º color, para el tercer nivel el 3º, el 4º y el 5º, etc.



Ya que estamos, vamos a pintar las outs de dentro, que quedan algo feas. Para ello, usaremos los colores del sombreado del nivel anterior. Para el primer nivel, o usamos la paleta más oscura, con lo cual queda feo, o buscamos otra. Por tanto, yo busco otra y me queda mejor que con el negro.



Ahora que tenemos la copa hecha, quedan el tronco y la sombra. Hagamos el tronco. Este es un tronco normalito, sin muchos detalles y que acaba en 3 picos. Podéis practicar a ver qué tronco os sale, tened imaginación.



Para pintarlo, cogemos 3 colores; uno oscuro para remarcar dónde se juntan los picos, el del medio para bordear esa zona, y el más claro para el brillo del árbol.
Ahora toca la sombra. Yo haré una estilo B&W. Para ello, cogemos un color de la copa, ni muy claro ni muy oscuro, pero si hay que elegir, que sea tirando a oscuro. Después, pintamos con ese color de forma irregular alrededor del tronco, que quede algo así.



Por último, con el siguiente color más claro, repetimos la operación bordeando la sombra interior y voìla, ce ça! hemos hecho un bonito árbol. Por último, borramos la plantilla y las paletas para que quede limpio.

Empecemos:

1. Creamos una plantilla de 48x48 px.



2. En la mitad de la izquierda (o la derecha, lo que prefiráis) hacéis el borde de la montaña. Una curva cerrada abajo, luego más o menos recta hacia el cuadrado de arriba y al final una curva abierta.



3. Copiáis y pegáis en el otro lado.



4. Ahora lo que haremos será coger las paletas y hacer con un color neutro una franja separatoria para aislar los cuadrados del medio, tal como muestra la imagen. Así, a la hora de pintar la montaña, no tocaremos esa parte, que será el tapete de montaña.



5. Con el primer color más oscuro (obviando las outlines) hacemos la primera sombra. Haremos, tal como muestra la imagen, rayas verticales para hacer la textura de una roca.



6. Luego, pintamos con el segundo color más oscuro el resto de la montaña, para luego pintar el sombreado más claro, donde incide la luz. Además, con el primer color oscuro, haremos un segundo nivel para que hayan más roquitas en la montaña.



7. Con el tercer color pintaremos formas semicuadradas al final de cada segmento, tal como muestra la imagen. Esto es porque en las montañas la parte de arriba se ilumina más, y es semicuadrada porque las montañas normalmente tienen esa forma, no encontraremos muchas montañas con rocas esféricas incrustadas xD.



8. Con el cuarto color pintamos dentro del tercero, dejando un px de separación. En la parte de arriba de cada saliente podéis rellenarlo entero, así se notará un cambio más brusco.



9. Ahora haremos el tapete. Es sencillo de hacer, y podéis hacerlo como queráis. Podéis hacer circulitos como tapete usando dos colores, podéis hacerlo algo más complicado y usar 3 o 4 colores... como queráis. Una vez que hacéis el tapete, en un sitio aparte, lo pegáis y pegáis alrededor de éste (en sus cuatro lados) una copia para ver si a la hora de mappear se va a unir bien. Si no es el caso, lo modificáis para que en cada lado las partes concuerden.



10. Ahora, rellenáis el hueco dejado por la franja. Aquí no hace falta que concuerden, esto rellenadlo aleatoriamente si os apetece, pero que quede bien el resultado.



11. Y ya tenemos la montaña lista para usar.



Y ya está.

1. Primero, crearemos una plantilla de 80x80 y de relleno, cuadrados de 16x16. La casa será pequeña, común, por lo que no necesitaremos más espacio.


2. Después creamos la forma. Algo simple, un tejado normal, vigas para sostener la casa, una puerta de tamaño corriente y, para las ventanas, lo haremos en primer lugar todo de negro. Añadimos una pequeña chimenea.


3. El tercer paso será empezar a pintarlo. Comenzaremos por el tejado, pintando con un color base. Yo en este caso he escogido un verde azulado.


4. Ahora empezamos a añadirle el sombreado y los detalles al tejado. Unos cuadraditos nunca quedan mal. Y para el sombreado, supongamos que la luz viene de la izquierda.


5. Ahora que hemos terminado el tejado, continuemos con la fachada. La pintaré de un color marrón, para simular la madera. También pintaré del mismo color a la chimenea. Hay que recordar que, además de tratar que el resultado quede bonito, hay que ahorrar colores para insertar los tiles sin problemas.


6. Con un segundo color más oscuro, hacemos las sombras a la casa. No tiene mucha complicación este paso, era mera puntualización sobre la importancia del sombreado.


7. El siguiente paso será añadirle detalles a la fachada, tales como líneas para marcar las tablas de madera o ladrillos para la chimenea. Usaremos un color más oscuro que el del sombreado.


8. En último lugar, vienen las ventanas, las vigas, la puerta, etc. Empezaremos por las ventanas. Pintamos el interior para diferenciarlo del marco y coloreamos éste con colores claritos.


9. Ahora que hemos hecho eso, terminamos con un sombreado a las ventanas. Después, pintamos el cristal con un azul grisáceo, con colores no demasiado llamativos, y les añadimos algún reflejo de cristal. Después, pintamos las vigas con el mismo color del marco de las ventanas, y por último pintamos la puerta con el color que queramos, siempre teniendo en cuenta el límite de paletas.


Con esto, ya hemos terminado la casa y ya está lista para ser insertada en un hack. Suerte y espero que os sirva este tutorial.

1. Lo primero es lo primero. Creamos plantilla.


2. Ahora que tenemos dónde trabajar, trabajemos. Empezamos con el contorno de la orilla, el borde vamos.


3. Tras esto, hacemos el borde del agua sobre la orilla con otro color (para diferenciarlo del de la orilla):


4. Ya tenemos la forma, ¿no? ¡Pues empecemos a colorear! Wiiiii (?). Yo empezaré con la roca de la orilla, con unos colores marrones apagados (no me hartaré de decirlo, no cojáis colores chillones), y la forma de pintar será un poco random, dando un color base, una luz y una sombra.


5. El siguiente paso es repetir lo anterior pero con el agua. Por ahora, sólo rellenaremos el hueco con colores base (uno para el agua y otro para el bordecillo, casi blanco):


6. Ya que tenemos eso, vamos a empezar con los detalles. Se me ocurre que, para darle un efecto de traslucidez al agua y que no parezca tan sólida, podría hacer la silueta que proyecta la roca bajo el agua (ojo, sólo la roca del borde) tal que así:


7. Pues bien, estrictamente ya tenemos el tile hecho. Lo que puede pasar es que no nos guste el resultado. En mi caso me parece que ha quedado un poco soso, así que le añadiré brillos al agua y un color más a la roca para hacer el sombreado:


Y ya está, ya tenemos un tile de agua! Lo que habría que hacer para terminarlo es los bordes exteriores, pero con esto os dejo ya lo básico, el resto es practicar practicar y más practicar!

Lo primero que haremos será crear nuestra plantilla. Después, trazamos un cubo básico con la puerta.



Hacemos un marco que rodee el cubo. Nuestro edificio estará compuesto por vigas, así que empezamos a hacerlas. La primera viga estará justo encima de la puerta. Luego añadimos ventanas, pero que estas estén sólo en una fila de cuadraditos, para que podamos repetirla según queramos (así podremos hacer edificios de varios pisos)



El siguiente paso será añadir algo al tejado, que está muy soso. Podéis ponerle las típicas chimeneas o salidas de aire, puertas para la azotea... Yo le pondré un cacharro que quedará tope guay (?) es algo decorativo, pero al menos rellena el hueco.



Ahora vemos que la parte de arriba de la fachada queda algo desnuda, ¿no? Pues le hacemos otra viga.



Pero claro, ahora queda como muy cargado arriba y muy ancho y abajo no, no da la impresión de que sea estable, ¿verdad? Pues tiene fácil arreglo, hacemos que la viga de encima de la puerta sobresalga de la fachada. También aprovecho y detallo la puerta.



Le sigue faltando algo, algún detalle que haga nuestro edificio realmente "nuestro", personal. Yo le voy a añadir un cartelito donde pondrá los pisos y quién vive (por ejemplo) o si tiene algún negocio saber en qué planta están. También le pondré un teléfono para llamar al timbre, todo muy básico y sin detalles, sólo estamos definiendo el edificio.



Bien, creo que ya es hora de ir dándole color. Vamos a elegir los colores base. Yo elijo estos tonos:



Ahora que ya tenemos la base, vamos a empezar a pintar con detalle; las sombras, los bordes, outs para los bordes interiores... Todo eso lo vamos a ir haciendo. También he decidido separar las ventanas, ya que eran demasiado graaaaandes xd.



Y ya está! Ya tenemos un edificio bastante molón. Ahora cada cual que lo haga como él quiera, el mío ha quedado así:

[spoiler=Primera parte]
Lo primero que os traigo es una sencilla guía que podréis tomar como referencia sobre qué colores son los que se suelen usar para spritear. A diferencia de lo que mucha gente cuando empieza cree, no se deben coger colores chillones, sino colores que se acerquen a la gama de grises. Esto es porque cuando el color está muy saturado (tiene mucho color) da impresión de ser poco realista, mientras que cuanto más gris tenga (es decir, que esté poco saturado), más se parecerá a lo que tenemos como "realista". Aquí os dejo la gama de colores que suele emplearse (algo así como el rango de colores):



Además, nunca deberíais usar el negro ni el blanco puros, ya que son colores demasiado extremos. A no ser para las outlines de un sprite muy muy oscuro, el negro debéis prohibirlo en vuestros trabajos.

Pero, ¿por qué el gris? Bueno, no todo debéis ponerlo con la misma cantidad de gris. El gris va aumentando cuanta más sombra haya en el sprite. Por tanto, en las partes donde de la luz habrá más color, mientras que en las de más sombra, habrá más gris:



Pero no solo habrá más gris, sino que también habrá más azul. El azul es el color que menos luminosidad tiene, por lo que a medida que la luz desciende, el objeto se hace más azulado, mientras que cuanto más cerca, más amarillo tendrá (y más blanco). Además, también influye la distancia. Cuanto más alejado esté algo, mayor será la impresión de que sea azul. ¿Nunca os habéis fijado en las montañas a lo lejos, lo azuladas que se ven? Y sin embargo, cuando estás en la montaña tienen verdes, marrones, incluso amarillos... Os podría decir por qué es pero no viene al caso xd. Aquí veremos el ejemplo de antes pero con la explicación de los azules y amarillos:



Esto se puede ver mejor (creo yo) que mediante estas dos imágenes:



En la primera, vemos cómo podemos ir haciendo sombra (menos luminosidad) en un sprite si vamos subiendo el tono del color seleccionado. En la segunda, lo que vamos haciendo es ir metiéndole más y más azul. ¿Veis que en la segunda va perdiendo luz? Esto es muy útil cuando quieres cambiar un poco los colores para que no esté tan monótono pero no tienes ni puta idea de cómo xD.

Esto ya hace que tenga que explicar los dos tipos generales de colores (o tres mejor dicho); colores fríos (violeta-azul-verde), colores calientes o cálidos (amarillo-rojo-naranja-marrón) ¡OJO! Colores calientes no tiene que ver con que sean más luminosos (hay marrones que son casi negros y aún así son calientes); y por último los colores no saturados, es decir, que no tienen color xd (blanco-gris-negro):



Recordad, siempre intentad meter grises, con uno de los ejercicios que os mande veréis que ni los de nintendo usan colores chillones ni en general en ningún lado (a menos que quieras dar el cante, entonces ole ole).

[spoiler=Lo Básico]
Lo primero que tenemos que tener en cuenta es que cualquier objeto tiene volumen. El volumen, al dibujar, se da por las sombras y las luces. Por ejemplo, esta es la forma de hacer una esfera y que parezca una esfera:



Como veréis, la primera tiene forma de esfera y además la parte iluminada está del lado contrario a la sombra.

Esto es importante, ya que la segunda, por ejemplo, también parece una esfera y, sin embargo, la luz está del lado de la sombra. Este es un error que, en un objeto simple, se ve perfectamente, pero a la hora de hacer un sprite esto cuesta más ver. Por eso hay que ponerle ojo. La tercera esfera no tiene mucha explicación, ¿verdad? xD

Ahora otro ejemplo; esta vez un cubo:



Aquí es lo mismo y la tercera tampoco tiene explicación. Os pongo estas últimas imágenes de cada ejemplo para que veáis lo ridículo que es un mal sombreado. Pero hago hincapié en que aquí es muy obvio, pero en un sprite es más complicado de ver. Tened cuidado.

Vamos a complicarlo un poco más:



Aquí ya hemos combinado un cubo con una esfera. Para sernos más sencillo, hemos puesto un punto amarillo que es la luz, el foco de iluminación. Aquí tenemos que hacer la sombra del cubo pero, a la vez, tener en cuenta que esa sombra da sobre una esfera, lo que deforma el sombreado. A su vez, la esfera tiene su propia sombra. No tiene mucho misterio, ¿verdad?

Pues bien, ya hemos tocado el tema de la sombra y su lógica. ¿Qué pasa cuando la sombra parece demasiado "plana" o demasiado brusca? Podemos hacer uso del dithering. El dithering consiste en añadir unos puntitos en el borde de la sombra dejando entre medias un espacio:

Ahora que entendemos la teoría, pasemos a la práctica. Queremos hacer un recolor. En teoría, ya sabemos cómo escoger los colores, pero ¿y el sombreado? Traaaanquilos, para eso estoy ;D. Yo cogeré un sceptile, quizá ya lo hayáis visto en un reto mío. Pues bien, empecemos...



Aquí tenemos el sprite original. Le cambiaremos no sólo las paletas, sino también el sombreado y las outs. Para ello, lo dejaremos en blanco y con las outs negras:



El siguiente paso será bocetar el sombreado. Aquí tenemos dos opciones; una de ellas será hacer un sombreado como si al pokémon le apuntasen con un foco, y la segunda será como si estuviese al aire libre. ¿Cuál creéis que es la mejor? Os lo digo yo, la segunda xd. Mucho más natural y mucho más nintendo:



Continúo con la segunda (ya al final os pondré cómo queda con otros colores usando el primer sombreado, por si tenéis curiosidad). Busco unas paletas que me atraigan y sustituyo los colores por el sombreado:



Veréis que así es muy fácil, ¿no? Es un recurso que se usa mucho en pintura y otras disciplinas del arte, hacerlo primero en blanco y negro para las sombras y luego aplicar color. Da buenos resultados y te lías menos.

¿Qué puede ocurrir? Que los colores ya no te atraigan. Este ha sido mi caso. ¿Qué hago? Cambiar las paletas xd o bien reutilizarlas pero de otra manera:



Mejor, ¿no? Ya sólo quedan arreglar un par de detallitos tontos y ya tenéis el recolor!