Qué aprenderás
- Elige una unidad para toda la escena
- Diseña materiales con una paleta limitada
- Evita costuras en texturas repetibles
- Crea bordes y transiciones
Pixel Studio de Pixambas y un navegador moderno; puedes comenzar sin crear cuenta.
Esta ruta amplía los cursos básicos con prácticas y comprobaciones que puedes realizar en Pixambas. Abrir Pixel Studio →
Mi progreso
Guarda el avance de este curso en este navegador.
Elige una unidad para toda la escena
Un tile es un bloque gráfico de tamaño fijo que se combina con otros para construir un nivel. Elegir 16×16 o 32×32 depende del juego, pero mezclar tamaños sin criterio complica el montaje. Decide también si habrá suelos, paredes y objetos separados.
Pasos
- Crea una cuadrícula de 16×16 o 32×32 píxeles.
- Dibuja un bloque de suelo y uno de pared, con paleta común.
- Colócalos lado a lado para comprobar tamaño y alineación.
Ejemplo explicado
Cuatro tiles de 16×16 ordenados en 2×2 ocupan una imagen de 32×32 píxeles.
Práctica
Dibuja dos tiles compatibles que puedan colocarse en una cuadrícula.
Qué evitar: Error común: decidir el tamaño de cada tile después de dibujarlo.
Diseña materiales con una paleta limitada
Una textura no necesita representar cada piedra o hoja. Conviene diferenciar el material por grupos de color, contraste y repetición. Demasiados colores pueden romper la unidad visual del escenario.
Pasos
- Elige cinco colores para tierra y hierba.
- Reserva el tono más oscuro para huecos o profundidad.
- Prueba los tiles a tamaño real con un fondo distinto.
Ejemplo explicado
Un suelo de hierba se entiende mejor con manchas pequeñas de color que con detalles minúsculos en cada píxel.
Práctica
Construye un tile de tierra y otro de hierba con coherencia de iluminación.
Qué evitar: Error común: utilizar sombras con direcciones distintas en cada bloque.
Evita costuras en texturas repetibles
Los bordes opuestos de una textura deben continuar el patrón cuando se repite. Para verificarlo, coloca una copia del tile arriba, abajo, izquierda y derecha. Corrige las diferencias en las uniones antes de decorar.
Pasos
- Dibuja un tile de suelo con un patrón simple.
- Copia la imagen en una matriz 3×3 y examina las uniones.
- Modifica los píxeles de los bordes hasta que no haya cortes evidentes.
Ejemplo explicado
Una línea oscura que termina abruptamente en el borde producirá una costura al repetir la textura.
Práctica
Entrega un suelo que se repita sin uniones molestas en una matriz 3×3.
Qué evitar: Error común: revisar el tile de forma aislada y no en repetición.
Crea bordes y transiciones
Los bordes permiten unir materiales, por ejemplo hierba con tierra. Empieza por un borde superior y otro lateral, y después desarrolla esquinas interiores y exteriores. No todos los escenarios necesitan un sistema completo de autotiling.
Pasos
- Dibuja un tile base de tierra.
- Añade un borde de hierba superior y una esquina.
- Organiza una prueba de cuatro tiles para verificar la continuidad.
Ejemplo explicado
Una esquina exterior debe seguir la misma altura de hierba que los bordes rectos conectados.
Práctica
Termina una pequeña transición entre suelo y terreno con al menos una esquina.
Qué evitar: Error común: hacer una esquina bonita que no encaja con sus bordes.
Introduce variaciones sin crear ruido
Variar piedras, flores y marcas rompe la repetición mecánica, pero el exceso de decoración dificulta leer el suelo. Diseña una versión básica y dos variaciones que tengan exactamente el mismo tamaño de celda.
Pasos
- Duplica el tile de suelo y añade una piedra pequeña.
- Crea otra variación con dos brotes o una marca.
- Alterna las versiones en una escena de 6×4 tiles.
Ejemplo explicado
Usar muchos bloques neutros y pocos decorados suele mantener la claridad visual.
Práctica
Compón un terreno de al menos 24 celdas y revisa qué zonas llaman demasiado la atención.
Qué evitar: Error común: poner el detalle más contrastado en todas las celdas.
Exporta y prueba el escenario
Una hoja de tiles reúne múltiples bloques en una misma imagen. Conserva sus celdas regulares y verifica que cada bloque se puede recortar por tamaño fijo. El montaje de niveles se realiza en el motor; Pixambas exporta las imágenes para importación manual.
Pasos
- Acomoda los tiles por filas, manteniendo una cuadrícula regular.
- Exporta PNG transparente sin cambiar inesperadamente la escala.
- Importa la imagen en el editor de tiles de tu motor y comprueba los bordes.
Ejemplo explicado
Una hoja de cuatro columnas de 16 píxeles tiene 64 píxeles de ancho.
Práctica
Exporta el tileset y construye una escena pequeña, con suelo y pared.
Qué evitar: Error común: mezclar márgenes entre celdas al cortar el tileset.
Proyecto final
Reúne los ejercicios de los seis módulos. Exporta una imagen PNG y una copia de tu proyecto editable. Comprueba el resultado a tamaño real y escribe qué mejorarías en una segunda versión.
Abrir Pixel Studio →Comprueba lo que aprendiste
Recursos de importación
Documentación de Godot · Documentación de Unity
Los archivos guardados en este navegador no se sincronizan entre dispositivos. Descarga una copia de tu proyecto.