BLOG
Pixel art para juegos: paletas, sombreado y legibilidad.
El pixel art funciona por las restricciones: pocos colores, pocos píxeles y muchas decisiones deliberadas. Estas ideas ayudan a que tus sprites se vean ordenados desde el primer intento.
Empieza con una paleta pequeña
Una paleta de entre 8 y 16 colores obliga a decidir y da coherencia visual. Elegirla antes de dibujar evita que cada sprite tenga su propio estilo. Hay paletas libres muy conocidas que puedes usar como punto de partida, o puedes construir la tuya.
Rampas de color
Una rampa es una serie de tonos del más oscuro al más claro para un mismo material. Con tres o cuatro tonos basta para dar volumen a casi cualquier objeto.
Un truco clásico es cambiar también el matiz, no solo la luminosidad. Las sombras tienden hacia azules o violetas y las luces hacia amarillos o naranjas. Si solo oscureces el mismo color, el resultado se ve apagado y sucio.
Elige una fuente de luz
Decide de dónde viene la luz, por ejemplo arriba a la izquierda, y mantenla en todos los sprites. Los píxeles claros van hacia ese lado y los oscuros al contrario. Es la mejor manera de que objetos dibujados por separado parezcan pertenecer a la misma escena.
Contornos
- Un contorno oscuro y uniforme separa el sprite del fondo. Es la opción más legible.
- Un contorno selectivo usa tonos más claros donde llega la luz. Se ve más suave, pero exige más cuidado.
- Sin contorno, el sprite depende del contraste con el fondo. Es un estilo válido si controlas los fondos.
Evita el ruido
Cada píxel debería tener una razón. Los píxeles sueltos que no forman parte de una línea o de una forma dan una textura ruidosa. Para revisar, aleja la imagen o reduce el zoom: si pierdes la forma general, hay demasiado detalle.
Tramado con moderación
El tramado (dithering) alterna píxeles de dos colores para simular un tono intermedio. Va bien en degradados grandes, como un cielo, y mal en sprites pequeños, donde parece suciedad. Úsalo en superficies amplias y con patrones regulares.
Legibilidad en movimiento
Un sprite debe reconocerse por su silueta. Prueba a rellenarlo de un solo color: si aún se distingue un personaje de un enemigo o de un objeto, la silueta funciona. En un roguelite esto es crítico, porque el jugador toma decisiones en fracciones de segundo.
Los enemigos peligrosos conviene pintarlos con colores que contrasten con el fondo, y los proyectiles, con colores que no se parezcan a ningún elemento decorativo.
Tamaños y escala
Escoge un tamaño base, por ejemplo 16×16 o 32×32, y respétalo. Cuando amplíes la imagen en el motor, usa factores enteros (2×, 3×, 4×) y desactiva el filtrado para que los píxeles no se emborronen. En Godot, esto se logra con el filtro de textura en «Nearest». Más detalles sobre el motor en este artículo.
Ejercicio: una esfera en tres tonos
Dibuja un círculo de 16 píxeles de diámetro. Elige cuatro colores de una misma rampa: oscuro, medio, claro y muy claro. Coloca el tono medio en la mayor parte de la esfera, el oscuro en el borde opuesto a la luz, el claro en la zona iluminada y un solo píxel del muy claro como brillo. Con ese ejercicio entenderás el volumen, que luego aplicarás a personajes, objetos y escenarios.
Animación básica
Para un ciclo de caminar bastan cuatro fotogramas: contacto, bajada, contacto con la otra pierna y subida. No hace falta mover todo el cuerpo: desplazar uno o dos píxeles el torso y los brazos basta para dar vida. Una animación de reposo con dos fotogramas, que suban y bajen un píxel, hace que el personaje parezca respirar.
En juegos para móviles conviene que las animaciones sean legibles incluso en pantallas pequeñas: exagera las poses y evita los detalles de un solo píxel que se pierden al escalar.
Herramientas gratuitas
- LibreSprite y Pixelorama: editores de pixel art de código abierto.
- Lospec: sitio con una gran colección de paletas y tutoriales.
- Tiled: editor de mapas por casillas que se integra bien con motores como Godot.
Revisa siempre la licencia de las paletas y de los recursos que descargues antes de usarlos en un proyecto comercial.