Creador de pixel art — editor y generador de pixel art online gratis

Un creador de pixel art son cuatro cosas: una cuadrícula, un lápiz, un borrador y un botón de exportar. Todo lo demás —capas, animación, gestión de paletas— es comodidad apilada encima de ese bucle. El editor de aquí funciona en el navegador. Eliges un tamaño de lienzo, dibujas con un lápiz de un píxel y descargas un PNG. Sin instalador, sin cuenta, sin paso de subida.

La decisión que la mayoría de las herramientas entierra: el tamaño de la cuadrícula es lo más difícil de revertir. Todo lo que viene después se deriva de él: cuántos píxeles recibe una cara, si un ojo es de uno o dos píxeles, cómo sobrevive el sprite a un aumento de 4x en un motor de juego. Esta página cubre el editor en sí, las matemáticas de la cuadrícula, dibujar frente a generar un sprite, las paletas como presupuesto y cómo tomar el personaje que acabas de dibujar y ponerlo en un mundo 3D por el que alguien pueda caminar.

Creador de pixel art (lienzo en vivo)

El lienzo es la página. En la parte visible tienes una cuadrícula de mapa de bits de tamaño fijo, un lápiz que escribe un píxel por clic, un borrador que vuelve a escribir el valor transparente, una tira de paleta y un botón de exportar que escribe un PNG. El clic izquierdo dibuja, el clic derecho o una tecla modificadora borra, y el centro del lienzo siempre muestra el límite real del píxel en lugar de una estimación escalada.

Entiende la diferencia entre el tamaño del lienzo y el tamaño de visualización antes de dibujar nada. Un lienzo de 32x32 mostrado a 800x800 sigue siendo 32x32 píxeles de datos. El zoom cambia el tamaño con el que se renderizan los píxeles, nunca cuántos existen. Exportar con zoom sigue escribiendo un archivo de 32x32, que es el comportamiento correcto y sorprende a casi todo el mundo la primera vez.

El único ajuste que los principiantes hacen mal es elegir el tamaño de la cuadrícula después del dibujo en lugar de antes. Alguien boceta un personaje en un lienzo de 64x64, le gusta y luego lo quiere en un juego de tiles de 16x16. Reducir un sprite dibujado a mano de 64x64 a 16x16 mediante remuestreo lo destruye: los detalles de dos píxeles se vuelven manchas grises, los contornos de un píxel se convierten en líneas grises de dos píxeles y el número de colores se multiplica porque cada borde promediado inventa un valor nuevo. Si ya dibujaste al tamaño equivocado, vuelve a dibujar al tamaño objetivo usando la versión antigua como referencia visual. Eso es más rápido y más limpio que cualquier reducción, y fuerza la simplificación que la cuadrícula más pequeña realmente necesita.

Aumentar después es seguro. Reducir después no lo es. Elige la cuadrícula más pequeña que pueda contener los detalles que necesitas y trata cada píxel que gastas como gastado.

Cuadrícula de pixel art y plantillas

Quienes buscan una cuadrícula de pixel art, una cuadrícula para pixel art o dibujar pixel art en una cuadrícula se refieren al mismo objeto: un campo delimitado de cuadrados donde un cuadrado es un píxel y un color. La cuadrícula no es decoración sobre la obra. Es el contrato de resolución. Un círculo de radio 5 no es un círculo, es una escalera concreta de píxeles individuales que colocas a mano o aceptas de una plantilla.

Las plantillas existen porque las primeras cuatro filas de un círculo, un cubo isométrico o un personaje en vista de 3/4 son tediosas de deducir de memoria y fáciles de equivocar un poco. Una plantilla es una posición de partida, no un sprite terminado. Pega la forma, luego elimina los píxeles que no pertenecen a tu personaje y vuelve a pintar el contorno para que la dirección de la luz sea coherente con todo lo demás que hayas dibujado.

El tamaño que eliges es un presupuesto expresado en píxeles. Un sprite de 8x8 deja a una cara unos 4x4 para trabajar, lo que no deja espacio para un contorno, un ojo y una boca a la vez: eliges dos. Un sprite de 16x16 admite un contorno de un píxel y dos tonos por material. Un sprite de 32x32 por fin tiene espacio para una dirección de la luz. Más allá de 64x64 la tentación es dibujar trazos en lugar de píxeles, y el rigor que hace que el estilo se lea empieza a escaparse.

Las cuadrículas no cuadradas importan para los tiles. Un lienzo de 16x32 es un personaje de pie en un juego con vista cenital; un lienzo de 32x32 es un tile. Mantén esas dos categorías en archivos separados, porque un sprite de personaje y un tile de un tileset tienen reglas de alineación distintas cuando llegan al motor.

Algunas personas construyen la cuadrícula en una hoja de cálculo, una celda por píxel, rellenando celdas y alejando el zoom para comprobar si la forma se lee de un vistazo. Funciona, y tiene una ventaja real: puedes copiar un bloque de ojo de 6x6 y pegarlo en cada celda de una hoja de sprites sin volver a dibujarlo.

El modo de fallo es la exportación. Las hojas de cálculo renderizan líneas de cuadrícula, bordes y relleno de celda. Si haces una captura de pantalla de la hoja y la recortas, heredas una costura oscura de un píxel entre cada píxel y un color ligeramente equivocado en cada borde de celda. Desactiva primero las líneas de cuadrícula y los bordes, ajusta el zoom a un múltiplo entero exacto y luego recorta en el límite del píxel en lugar de a ojo. Un lienzo dedicado evita todo el problema, por eso la hoja de cálculo es una buena herramienta de planificación y una mala herramienta de producción.

Dibujar frente a generar

Ambos métodos llenan el mismo lienzo. El dibujo a mano escribe exactamente los píxeles que colocas. La generación escribe un conjunto de píxeles que satisface una descripción y luego los editas. Ninguno es un atajo que evite al otro; responden a preguntas diferentes.

El dibujo a mano gana cuando ya ves la silueta. Si conoces la forma del casco, el espaciado exacto de los ojos o cómo debe alinearse este personaje junto a cuatro sprites existentes, colocar píxeles es más rápido que describirlos y corregir el resultado. La generación gana cuando estás explorando. Si conoces la idea —una rana blindada de perfil sosteniendo un escudo— pero no la silueta, la generación te da una posición de partida en una sola pasada en lugar de cuarenta decisiones. Agent Sprite Forge genera sprites a partir de una descripción directamente en una cuadrícula que puedes seguir editando, lo cual importa porque el resultado es un punto de partida, no un entregable.

El resultado de un sprite generado es plausible a tamaño de miniatura y desordenado a 8x de zoom. Daños típicos: píxeles individuales sueltos que flotan a un cuadrado del contorno, roturas en lo que debería ser un contorno continuo de un píxel, bordes suavizados que llevan colores que no están en tu paleta y el sprite tocando el borde del lienzo. Esto último no es cosmético: un sprite que ocupa todo el lienzo no tiene margen, así que la rotación, la sombra proyectada o cualquier relleno del motor lo recortarán.

La solución es mecánica y toma unos minutos por sprite. Hazlo en el mismo orden cada vez para no reintroducir problemas que ya arreglaste.

Online, gratis, sin descargas

Gratis cubre todo el bucle de dibujo: selección de cuadrícula, lápiz, borrador, relleno, edición de paleta y exportación a PNG. No caduca y no bloquea la exportación tras una cuenta. La generación es la parte con límites prácticos, porque producir un sprite consume cómputo de una forma en que colocar un píxel no lo hace. Dibujar y exportar no tienen límite de frecuencia.

No se necesita cuenta para dibujar ni exportar. Nada de lo que dibujas se sube; la imagen permanece en la pestaña del navegador y solo sale cuando la descargas. La contrapartida de la edición en el lado del cliente es la misma que la de cualquier aplicación de escritorio sin autoguardado: cerrar la pestaña sin exportar pierde el dibujo. Exporta cuando el sprite se lea correctamente, no cuando esté terminado. Las versiones intermedias son baratas.

La exportación contiene exactamente los píxeles. Un PNG con las dimensiones nativas del lienzo, RGBA de 8 bits, con el alfa conservado. Si dibujaste sobre un fondo transparente, el fondo permanece transparente: transparente es un valor, no un color, y sobrevive a la exportación. Si dibujaste sobre un fondo relleno, ese relleno queda incrustado en cada píxel detrás del personaje. Si quieres un color de fondo, píntalo a propósito. Si quieres componer el sprite sobre algo más tarde, deja el fondo vacío y exporta tal cual.

La separación honesta es entre la generación y todo lo demás. La edición, el trabajo de color y la salida de archivos se ejecutan localmente y se comportan igual tanto si usas la herramienta una vez como si la usas a diario. Los límites prácticos se aplican a la generación, por eso el flujo de trabajo útil es generar una forma aproximada y luego pasar el tiempo en el editor, donde nada se mide.

Nada en la ruta de exportación añade una marca de agua, remuestrea la imagen ni cambia el nombre del archivo a las dimensiones del lienzo. Lo que dibujaste es lo que obtienes.

Paletas y estilos

El color es un presupuesto, no una preferencia. Una paleta de 16 colores es una restricción que obliga a reutilizar, y la reutilización es lo que hace que un sprite se lea como un solo objeto en lugar de un montón de píxeles. Cuando el mismo marrón medio aparece en la correa de cuero, el mango de madera y la bota, el ojo los agrupa y el personaje encaja en foco. Una paleta de 256 colores es suficiente cuerda para ahorcar un sprite: te permite añadir un color nuevo cada vez que topas con un problema, y el resultado no tiene lógica interna. Dos sprites del mismo artista con dos paletas no relacionadas de 60 colores parecen venir de dos proyectos diferentes.

Construye la paleta como rampas en lugar de colores individuales. Un conjunto viable de 16 colores son cinco rampas de tres tonos, más un color de contorno dedicado. Cada rampa es una base, una sombra y una luz. La base es tu tono medio. La sombra es la base oscurecida y desplazada hacia el azul o el morado, no solo oscurecida: una sombra hecha bajando el brillo únicamente se lee como suciedad. La luz es la base aclarada y desplazada hacia el amarillo. En un sprite de 16x16, las luces deben cubrir aproximadamente una décima parte de los píxeles; más que eso y la fuente de luz deja de ser direccional.

El estilo proviene de las reglas que aplicas de forma consistente, no de los colores en sí. Una paleta compartida por todo un reparto significa que el rojo de la túnica del jugador es el mismo valor RGB que el rojo del estandarte del enemigo y el rojo del objeto de salud. Ese es todo el truco. No cuesta nada aplicarlo y es la diferencia entre un juego que parece deliberado y un juego que parece ensamblado.

Convierte tu personaje de píxeles en un mundo 3D

El traspaso es una frase: exporta el sprite al 100 por cien, impórtalo como textura y colócalo en el mundo con un múltiplo entero de la cuadrícula de píxeles para que los píxeles sigan siendo cuadrados.

El constructor de juegos 3D toma esa textura y la pone en un plano que siempre mira a la cámara, así que un personaje de 16x16 se lee como un personaje de 16x16 desde cualquier ángulo en lugar de convertirse en una fina astilla cuando caminas de lado. La colisión, la gravedad y una cámara que sigue al personaje son independientes del sprite, lo que significa que puedes cambiar la ilustración más tarde sin tocar el controlador del personaje. Mini World es el lugar más pequeño para probar el resultado: una pequeña zona transitable, un personaje y unos pocos objetos con los que chocar. The Cyclops' Island es la prueba mayor, donde la altura del terreno y las líneas de visión dejan claro si la escala del sprite es correcta en relación con el entorno.

La escala es donde fallan la mayoría de los primeros intentos. Decide una conversión antes de colocar nada: un píxel equivale a una unidad de mundo es demasiado pequeño en un sprite de 16x16 y demasiado grande en uno de 128x128. Elige un factor para que el personaje acabe aproximadamente a la altura de una puerta y luego mantén ese factor para todos los personajes del proyecto. Un reparto construido con dos proporciones distintas de píxel a mundo nunca se ve bien al ponerse uno al lado del otro.

Escalado y ampliación sin desenfoque

El pixel art tiene bordes duros por construcción. Todos los filtros de suavizado —bilineal, bicúbico, Lanczos— funcionan promediando píxeles vecinos, y promediar dos colores de la paleta produce un tercer color que no está en tu paleta. Ese tercer color es el desenfoque. No es un ajuste de renderizado que puedas deshacer después; una vez que una imagen se ha remuestreado, los bordes duros originales se han ido.

Amplía solo en múltiplos enteros: 2x, 3x, 4x, 8x. Un sprite de 16x16 a 4x es 64x64, y cada píxel de origen se convierte en un bloque limpio de 4x4. A 2.5x, algunos píxeles de origen se vuelven de 2 píxeles de ancho y otros de 3, así que el sprite desarrolla una irregularidad visible en toda la cuadrícula: contornos gruesos en un punto y finos en otro. No hay forma de arreglarlo a posteriori salvo volver a exportar en un múltiplo entero.

El ajuste que arruina silenciosamente un sprite nítido es el filtro de remuestreo, que distintas herramientas etiquetan como Interpolación, Remuestrear, Remuestrear imagen o una casilla Suavizar junto a Escala. De forma predeterminada usa un modo de suavizado en la mayoría de los editores y visores de imágenes, y vuelve a filtrar la imagen cada vez que lo usas. Ponlo en «vecino más cercano» antes de tocar las dimensiones. La misma regla se aplica fuera del editor de imágenes: una textura importada a un motor 3D necesita sus filtros de minificación y magnificación en «vecino más cercano», con los mipmaps desactivados para las texturas de píxeles, o el motor la suavizará cuando la cámara se mueva. En una página web, el equivalente es la propiedad image-rendering puesta en pixelated; de lo contrario, un navegador que escala un PNG de 32x32 a 96 píxeles de ancho aplica su propio suavizado y deshace tu trabajo en el último paso.

Una más: nunca dejes que una interfaz escale tu sprite por porcentaje. Un contenedor que ajusta la imagen al 100 por cien de un ancho flexible acabará en 2.3x o 3.7x según la ventana, y el sprite se verá distinto en cada pantalla. Renderiza al tamaño de píxel nativo y escala por un factor entero, o establece el tamaño de visualización de forma explícita.

Camina por el mundo al que pertenece

Un sprite es un personaje sin ningún sitio donde estar de pie. El último paso es el que nadie más ofrece: toma la hoja que acabas de crear y ponla en un mundo por el que alguien pueda caminar: una pequeña isla, un planeta, una esquina lluviosa. Todos los mundos de este sitio se crearon a partir de una descripción escrita y se publicaron como una página que puedes jugar.

FAQ