Registrarse

[Gráficos] ¿Cómo hacer Tiles por vos mismo? ¡Muy Fácil de Hacer! Actualización 31/01/18

Diego Mertens

Dartrix Joven
¡Alola, mis amigos! Hoy, buscando por internet, me topé con un tutorial ES-PEC-TA-CU-LAR, de 44tim44, para hacer Tiles por nosotros mismos.:heart:
El mismo tiene dos grados de dificultad::hmm: ¿no que fácil?
Fácil: Usar un estilo de Tiles predefinido y cambiarlo un poco a nuestro gusto.
Medio: Crear un estilo propio (es más fácil si ya has experimentado con el anterior), osea, hacer tiles desde cero, es por eso que es un poco más difícil, pero con práctica y esfuerzo todo se logra :D:awesome:¿:. de veras?
Pues... Lo traduje con Google Traductor, pero hice algunas correcciones a errores fatales en cuanto a cohesión y coherencia creo que eran esas xd.
Post original:44tim44's Tiling Tutorial
Casi lo mismo que dijo 44tim44 dijo:
¡Que tal estáis todos! Soy 44tim44 también conocido como tImE en Pokecommunity.
Estoy aquí hoy con un tutorial sobre cómo hacer mosaicos.

Si acabas de tropezar aquí, sin saber por qué, siéntate de todos modos, porque Uncle tImE está a punto de llevarte a todos en un viaje en el fantástico mundo de "cómo hacer gráficos sofisticados para tus juegos".

Paso 1. Decidir tu estilo gráfico
Para comenzar, debes elegir un estilo de gráficos para tu juego.
"Pero, Sr. tim, me gusta simplemente tomar lo que creo que se ve bien del Internet y agregarlo a mi Tileset, sin importarme los derechos de autor
¿Por qué tengo que elegir un estilo?"
¡Detente justo ahí, criminal!
Solo agregar sin fijarse si va bien hará que su juego se vea hecho sin ganas, además...


Si bien muchas de estos Tiles son buenos o incluso están muy bien hechas, ¡NO TIENEN ABSOLUTAMENTE NINGUNA RAZÓN para ser parte del mismo juego!
Por el amor de todo lo bueno en el mundo, elija un estilo gráfico y quédese con él.
No use edificios vivos sin outlines junto con árboles desaturados que tengan outlines.

Magiscarf, un deviantArtist, por ejemplo, tiene un estilo muy particular:




Magiscarf usa colores muy vivos y outlines oscuras. El estilo usa proporciones de construcción realistas, pero se siente muy "caricaturesco" debido a "sombreado limpio", como me gusta llamarlo. (Por lo que quiero decir, el sombreado nunca se ve irregular o raro y por lo general solo consiste en 1 color más oscuro.)

El estilo que ha creado Magiscarf es uniforme en su diseño y no tiene diferentes estilos para diferentes tiles.


Aquí hay algunos buenos ejemplos de estilos gráficos comúnmente usados, para juegos Pokémon:

- Propio de GBA:
Estilos de RSE y FRLG. Usan contornos azul oscuro con un 50% de sombras grises y una paleta de colores limitada, utilizando colores ligeramente desaturados. Uno de los estilos más simples de usar.




- Propio de DS
Si bien no puede "dibujar" modelos 3D ni texturas, ni usarlos como mosaicos, puede imitar el aspecto del estilo artístico utilizado en DPPt y BW / 2.
Este estilo usa contornos muy ligeros o nulos. Tiene colores de alto contraste y utiliza una paleta de colores más grande que los juegos de GBA, así como colores con menos desaturación. (DPPt y BW / 2 también usan estilos ligeramente diferentes, pero se pueden usar juntos, siempre que tome en cuenta los tamaños puerta / NPC).



- Estilo propio de vos
Crea tu propio estilo
Aquí es donde caen estilos como el trabajo de Kyledove. Kyledove ha sido un artista popular durante mucho tiempo, y aunque su estilo siempre está evolucionando, ha habido algunas cosas particulares para él. Los colores muy desaturados y los contornos oscuros solían ser su contra, pero mientras sus colores fueron volviendo mucho más vívidos y sus contornos oscuros permanecieron igual, se alcanza a ver un gran talento.




Hacer un estilo personalizado se trata menos de hacer diseños innovadores y más acerca de cómo encontrar un estilo que usted mismo pueda crear fácilmente. Se trata de tener tiles que se ven bien juntos y mantenerse consistentes.

Para mi propio juego, Pokémon: Blaze Red y Lush Green, elegí un estilo similar al estilo Gamefreaks DPPt, pero elegí usar contornos hasta cierto punto. También tengo mucha influencia del estilo FRLG, ya que utilizo muchos detalles en los lados de mi edificio, en lugar de tener colores limpios.




Paso 2. Planifica tu Tileset
Cuando hagas las primeras tiles para tu tileset, deberías preguntarte si solo deseas expandir un estilo anterior o si quieres crear un tileset completamente tuyo.

Por ejemplo: si tiene la intención de crear un tileset al estilo de FRLG, también puede reutilizar la hierba, el césped alto y los árboles de FRLG, para ahorrar tiempo, si solo quiere edificios nuevos de todos modos.

Pero, si decides hacer tu conjunto de fichas completamente desde el principio, siempre recomiendo comenzar con fichas de naturaleza básica.
- Césped
- Árboles
- Montañas + Repisas
- Hierba alta + flores
- Flores
- Bordes de agua + agua + playa
- Caminos + Escaleras

Una vez que tenga estos Tiles, ya puede trazar la mayoría de las rutas que puede planificar para su juego. Y, además, estos tiles se encuentran en casi todos los mapas en la mayoría de los juegos, lo que significa que si comienzas haciendo casas, de todos modos no podrás mapear pueblos o ciudades.

Mi segundo Tileset que suelo hacer consta de edificios básicos y otras estructuras hechas por el hombre que aparecen siempre, tales como:
- Cercas
- Señales
- Carreteras
- Centro + Tienda Pokémon
- Esas casas raras para pasar de una ruta a otra sin conecciones.
A continuación, haremos un árbol.
Utilizaremos el mismo método para usar los colores del juego de fichas FRLG.
Vamos a hacer que el árbol 2x3 sea grande. Esto es 32x48 pixeles, ¡así que hagamos un área de trabajo tan grande!




"Oye, Sr. tim, ¿por qué la mitad del área tiene un color diferente?"
Esto se debe a que los árboles suelen ser más o menos simétricos en el estilo FRLG, por lo que solo haré medio árbol y luego lo reflejaré para que quede completo, antes de agregar un sombreado para que los lados sean un poco diferentes.
¡Ahora intentemos hacer un pino!
Empiezo haciendo un contorno aproximado usando el color de árbol más oscuro y el color de tronco más oscuro para el tronco.



Luego llenamos las áreas con un color ligeramente más claro, respectivamente, para el color base.




A continuación, agregamos colores más claros para cada altura de las ramas, ya que así es como se sombrean los árboles en el estilo FRLG.




A continuación, agregamos más sombras, sombras y detalles para que el árbol parezca menos plano.




Hmm, hagámosle un espejo para ver cómo se ve.




Está bien ... Aunque parece un árbol de FRLG, no estoy muy contento con el sombreado, así que editemos el árbol, eliminando la capa intermedia de ramas y agregando 2 capas en su lugar.





Y luego agreguemos algo de sombreado y lo duplicamos.





Ahora que se ve mucho mejor, ¡pero no olvidemos agregar la sombra en el suelo!
Y mientras estamos en ello, cambiaremos los detalles un poco en la mitad derecha del árbol, por lo que no es completamente simétrico y arreglaremos algunas cosas que parecen un poco flojas.




¡Aquí vamos! ¡Nos conseguimos un pino increíble!

Ahora antes de continuar: Mientras que FRLG usa este esquema de color para sus árboles, realmente no creo que se vea tan bien, ya que los pinetrees a menudo son mucho más azulados y menos amarillentos.
No tengas miedo de usar tus propios colores, solo porque estés usando un cierto estilo. Solo asegúrese de usar la misma cantidad de tonos que el estilo original. En este caso 4 tonos de verde.
¡Cambiemos los colores!




¿No se ve eso simplemente maravilloso?


Montañas

De acuerdo, ahora vamos a hacer un mosaico de montaña.
Una vez más, comience buscando algún material de referencia y luego hagamos un
Gran espacio de trabajo de 48x48 píxeles, ya que necesitamos 1 frente, 1 parte posterior, 2 lados y 4 esquinas para nuestra baldosa de montaña. También necesitaremos hacer las "esquinas inversas" más tarde, ¡pero entonces llegaremos a eso!




Una vez más, comenzaremos con un esquema básico y un color base para las fichas.
Trate de no hacer el contorno demasiado recto o redondo. Es una roca, después de todo. Hágalo irregular y tenga algunos bordes ásperos y filosos.




A continuación agregaremos sombreado a la montaña. Recuerda que las fichas FRLG usan sombreado donde la luz del sol proviene de la esquina superior izquierda. (¡Todas las fichas son más claras en el lado izquierdo y más oscuras en el derecho!)




Eso se ve bien, pero agreguemos más sombreado, hagamos que se vea más "lleno de baches" y áspero.
Y mientras estamos en ello, ¡hagamos que el contorno sea menos oscuro en la parte superior!




Cuando hagas mosaicos de montaña, recuerda comprobar a menudo para que tus fichas "giren" correctamente.
En otras palabras, asegúrese de que se vean bien cuando los coloca muchos de ellos en una fila, ya que mapeará las paredes con ellos.




¡Perfecto! Pero también necesitamos un patrón en la cima de la montaña.
Esto puede ser difícil de hacer como un principiante e incluso para los spriters más experimentados también.
Así que simplemente agregaremos el patrón FRLG a nuestro diseño.




¡Bueno! Ahora, necesitamos hacer esas "esquinas inversas" también.
Tengo un pequeño truco para hacer eso.
Tomo una de las baldosas laterales y elimino la mitad en diagonal y pego en la parte superior de una baldosa frontal.




Ahora haz lo mismo con el otro lado y ¡Voila!
¡Tienes 2 fichas de "esquina inversa"!




Por último, las otras 2 fichas de "esquina inversa" son más fáciles de hacer. Simplemente tome la parte superior de la montaña y agregue / elimine algunos sombreados y agregue un poco de fondo a la misma.






Mira eso, casi hemos terminado, ¡simplemente agreguemos algo de sombra alrededor! (¡Recuerda lo que dije acerca de dónde viene la luz!)




Si eso no es una verdadera belleza, ¡entonces no sé lo que es!
¡Mira eso!
¡Hemos hecho las fichas más básicas de nuestra naturaleza!
Realmente no podré incluir un tutorial para cada tipo de mosaico que cualquiera pueda necesitar, ¡así que el resto de los mosaicos depende de ti para diseñarlo y crearlo!
La mejor manera de aprender algo es hacerlo tú mismo, ¿sabes?
Los tiles de camino no son muy difíciles de hacer, sólamente necesitarás una plantilla.


Esa plantilla será el Autotile, que se irá armando a medida que vayas agregando el mismo tile. (no me expliqué bien, lo sé)

Primero, necesitaremos hacer la base, la forma y colores
"beta" que queramos tener, porque seguramente cambiemos de idea al hacer el tile.
Los colores y formas que yo elegí, serían del estilo de BW, pero pueden elegir cualquier estilo.

Cuando ya tengan esto, habrá que comenzar a hacer la parte en donde el camino se "hace de tierra".
También colorear el cuadrado que está entre medio de los otros dos cuadrados verdes, ya que ese será el tile del centro.

Luego que terminamos eso, hay que empezar a hacer los cambios en la tierra, para que se vea mejor, ya saben, pintitas más claritas, más oscuras, esas cosas.

Luego de eso, habría que hacerle las "esquinas" en dónde sólo hay una regla: que entren 4, y que no ocupen más de 16x16 px. Esto no siempre será sencillo de hacer, así que será mejor a medida que mejoremos.

Después, hay que hacer lo que se verá cuando sólo haya un tile. No es muy importante, pues nadie usará sólo un tile del camino. Así que pueden copiar de las esquinas que acaban de hacer. La otra forma "la correcta" (para seguir con la estructura del tile) sería tomar un cuadrado de 16x16 px de cada esquina del tile y unirlos en el tile de arriba a la izquierda.
Cualquier error que crean que cometí, háganmelo saber, por favor. Sin críticas destructivas, ¿ok?no, ¿como crees?:boom:

Obviamente, créditos a 44tim44.
Para armar un tileset, vean el tutorial que hace poco mi amigo/a @J. Manuel posteó aquí:
Como crear un Tileset con Photoshop

¡Alola, amigos! ¡Espero den +Gracias si les sirvió este post! ¡Y también espero que puedan llegar a ser buenos Tilers después de esto! ¡Alola!otra vez :dodgy:
 
Última edición:

super luisuto

Miutu hizo unas zapatillas con mi stunfisk
Re: ¿Cómo hacer Tiles por vos mismo? ¡Muy Fácil de Hacer!

Intentare hacerlo, muchas gracias por este gran tutorial. Aunque tengo una opinion; algunos tiles, como los arboles, no tienen por que ser iguales de mitad a mitad, es decir, una mitad del arbol puede ser algo distinta a la otra y esto tambien le da mas realismo. Los arboles en la sexta generacion estan hechos de esta forma y tambien algunos tiles de magiscarf.
 
Última edición:

Nyaruko

Pinchando ruedas de trenes
Respuesta: ¿Cómo hacer Tiles por vos mismo? ¡Muy Fácil de Hacer!

Se ve algo complicado hacer tiles tan bien hechos pero un dia probaré a ver con este tutorial
 

Sayer301!

UnityLord!
Miembro de honor
Respuesta: ¿Cómo hacer Tiles por vos mismo? ¡Muy Fácil de Hacer!

Me ha encantado man, la verdad que el arbol con esas paletas no me estaba convenciendo, pero al final no ha quedado nada mal. Y la montña... hiiiper guapa! es digna de usar en cualqueir hack!

Ojala sigas trayendo mas tutoriales enseñando como hacer diferentes tiles, mola de 10!
 

Diego Mertens

Dartrix Joven
Respuesta: ¿Cómo hacer Tiles por vos mismo? ¡Muy Fácil de Hacer!

Intentare hacerlo, muchas gracias por este gran tutorial. Aunque tengo una opinion; algunos tiles, como los arboles, no tienen por que ser iguales de mitad a mitad, es decir, una mitad del arbol puede ser algo distinta a la otra y esto tambien le da mas realismo. Los arboles en la sexta generacion estan hechos de esta forma y tambien algunos tiles de magiscarf.
Pues... Gracias, lo de los árboles, pues son de 44tim44, que los ha hecho como son en Rojo Fuego. Casi.

Se ve algo complicado hacer tiles tan bien hechos pero un dia probaré a ver con este tutorial
Pues, no creo que sea tan difícil, creo que comenzaré a hacer tutos propios de tiles, con otros estilos si es posible.

Me ha encantado man, la verdad que el arbol con esas paletas no me estaba convenciendo, pero al final no ha quedado nada mal. Y la montña... hiiiper guapa! es digna de usar en cualqueir hack!

Ojala sigas trayendo mas tutoriales enseñando como hacer diferentes tiles, mola de 10!
¡Sí, estoy planeando traer más tiles de todo tipo! Sobretodo naturaleza, ya que quiero practicar primero, si te interesa la montaña, habla con 44tim44.

Los árboles de 44tim44 son algo raros, pero se pueden tomar como inspiración para hacer algún que otro árbol.
 

Acosta

The Wolf~
Respuesta: ¿Cómo hacer Tiles por vos mismo? ¡Muy Fácil de Hacer!

Increible este aporte, se ve algo complicado, y bastante interesante la verdad. Sigue así, gran trabajo.

¡Gracias y saludos! :)
 

Nyaruko

Pinchando ruedas de trenes
Respuesta: ¿Cómo hacer Tiles por vos mismo? ¡Muy Fácil de Hacer!

@Diego Mertens yo lo digo más que nada porque soy muy paquete con el pixel art en general xD

Yo lo digo más que nada porque soy muy paquete con el pixel art xD
 

Jorge

Héroe de WaH
¡Super tutorial! He de decir que yo he querido aprender a hacer tiles y ya encontré un tutorial que me da una idea más o menos de como hacerlo, sinceramente muchas gracias. ~Ice Spirit
 
Arriba