Editor de arte pixelado

El pixel art nació en el hardware, y luego eligió quedarse

El pixel art no fue, en sus primeras décadas, una estética: era una restricción. La Atari 2600 (Summer CES, 4 de junio de 1977) dibujaba su imagen con un Television Interface Adaptor que exponía dos sprites «player» de 8 píxeles de ancho y los reutilizaba línea a línea; los programadores aprendieron a «correr el haz» (race the beam) para tener más colores visibles a la vez. La Commodore 64 (enero de 1982) ofrecía ocho sprites de hardware de 24×21 y una paleta VIC-II de 16 colores que se convirtió en la firma visual de toda una década de juegos europeos. La NES (1985) usaba un PPU Ricoh 2C02 con una paleta maestra de unos 54 colores distinguibles, de los cuales 25 podían estar en pantalla a la vez, particionados en una paleta de fondo de 13 colores y cuatro subpaletas de sprite de 3 colores: la tesela de sprite 8×8 se convirtió en la unidad de diseño que aún se siente en el pixel art de hoy. La Game Boy DMG-01 (1989) llevó el límite más allá: cuatro tonos de un solo color en una LCD reflectiva de 160×144 que a la luz del día se leía verde oliva. Ninguna de estas paletas se eligió por belleza; se eligieron por lo que el chip podía hacer por unos pocos centavos.

En algún momento de los años 90, la ecuación se invirtió. El hardware se puso al día; primero el prerenderizado y luego el 3D en tiempo real se volvieron lo predeterminado para producciones de gran presupuesto. El pixel art podría haber muerto allí. En su lugar, se convirtió en algo más raro: una elección estética deliberada. Daisuke Amaya -que firma su trabajo simplemente como «Pixel»- pasó cinco años entre la universidad y un trabajo diurno ensamblando Cave Story, lanzado como freeware el 20 de diciembre de 2004. Markus «Notch» Persson publicó la primera versión de Minecraft en TIGSource el 17 de mayo de 2009, con texturas de bloque por defecto de 16×16 píxeles -todavía el formato canónico de los packs de recursos. Eric «ConcernedApe» Barone publicó Stardew Valley el 26 de febrero de 2016 tras unos cuatro años y medio de desarrollo en solitario, dibujando él mismo cada sprite en Paint.NET. Heart Machine lanzó Hyper Light Drifter (marzo de 2016); Maddy Thorson y Noel Berry lanzaron Celeste (enero de 2018), construido originalmente como un prototipo de cuatro días en la consola fantasía PICO-8 de Joseph White. Motion Twin lanzó Dead Cells en agosto de 2018, cuyo «pixel art» son en realidad modelos 3D rerenderizados a baja resolución. Juntos, estos juegos hicieron imposible argumentar que el pixel art era nostalgia: era un medio contemporáneo con sus propias convenciones, herramientas y superestrellas.

Por qué cuadrículas con potencias de dos y cómo elegir la tuya

Los tamaños estándar de lienzo de pixel art -8×8, 16×16, 32×32, 64×64- se remontan directamente al hardware de las consolas. La tesela 8×8 de la NES, el sprite 24×21 del C64, el OBJ 8×8 de la Game Boy: datos de bitmap que podían direccionarse con aritmética barata en potencias de dos y empaquetarse eficientemente en memoria. Un sprite de personaje 16×16 son dos teselas NES apiladas; un 32×32 son cuatro. La convención persistió más allá de la era en que el direccionamiento de memoria importaba, porque para entonces los artistas ya habían interiorizado el ritmo de trabajo «una tesela mide 8 o 16 píxeles y contiene una única forma legible». Uso práctico de cada tamaño en este editor: 8×8 para iconos, bocetos de emotes de Twitch y elementos pequeños de tesela; 16×16 para el sprite de personaje de batalla, iconos de objetos y el formato canónico de textura de Minecraft; 32×32 para retratos detallados o utilería más grande; 48×48 para tilesets que incluyen sombreado; 64×64 para sprites a escala de héroe y escenas pequeñas. Empieza pequeño: el pixel art se define por su baja resolución, y la disciplina de trabajar a 16×16 o 32×32 es lo que produce arte que se lee con limpieza al tamaño de miniatura.

Paletas: la disciplina que hace que el pixel art se lea

Los límites de paleta del hardware le dieron al pixel art su segundo rasgo definitorio: disciplina de color forzada. La NES permitía como máximo cuatro colores por tesela de fondo 8×8 (contando el fondo universal); la Game Boy DMG solo podía expresar cuatro tonos de verde-gris a la vez. El hardware moderno no impone nada de esto: cualquier artista de pixel art en 2026 dispone de todo el espacio de color RGB de 24 bits y alfa completo de 8 bits. Sin embargo, la comunidad elige en gran medida trabajar dentro de paletas de 16, 32 o 64 colores de todos modos, y no por afectación retro. Una paleta pequeña obliga a que cada decisión de color cuente: impone una estructura de valor coherente, tonos complementarios con intención, colores reutilizados a lo largo de varios sprites para que una escena se lea unificada en lugar de caótica. Por eso tanto pixel art moderno parece intencional de un modo en que la mayoría del arte digital amateur no lo parece. La paleta es una disciplina, como la restricción de 14 versos de un soneto.

Cuatro paletas curadas por artistas dominan la escena moderna. PICO-8 (Joseph «zep» White, presentada el 9 de mayo de 2014 en el Pico Pico Cafe con lanzamiento público en 2015), dieciséis colores cuyo linaje White rastrea hasta el Commodore 64, los trackers del Amiga 500 y «la estética global de otros hardwares de los 80». El prototipo de Celeste de 2015 se escribió en PICO-8 en cuatro días. DawnBringer DB16 y DB32 (Richard Fhager, 2007 y después), diseñadas para trabajo pixel pintado a mano y expresivo, no para imitar ningún hardware. Ahora vienen por defecto con Aseprite y GIMP. Endesga 32 y 64 (Seth «ENDESGA»), construidas para «pixel art y diseño materialista» con alto contraste y alta saturación. Por número bruto de descargas (192 000+ para Endesga 32, 91 000+ para Endesga 64 en Lospec), están entre las paletas hechas por artistas más usadas de internet. Sweetie 16 (GrafxKid), se convirtió en la paleta por defecto de la consola fantasía TIC-80. Lospec.com en sí, fundada en 2017 por un artista que se hace llamar skeddles, es el centro comunitario por excelencia: base de datos de paletas, tutoriales, galería (lanzada en enero de 2023), torneos -y un archivo descargable de toda paleta de hardware en formatos compatibles con Aseprite, Photoshop, Paint.NET y GIMP.

Cómo funciona realmente un editor de píxeles en el navegador

Un editor web de pixel art tiene que pelear con los valores predeterminados serviciales del navegador: cualquier navegador moderno aplica interpolación bilineal o bicúbica al escalar imágenes, lo cual está bien para fotos pero es ruinoso para el pixel art (convierte píxeles nítidos en manchas borrosas). El arreglo son dos ajustes complementarios aplicados en distintas capas. CSS image-rendering: pixelated en el elemento canvas obliga al compositor del navegador a usar escalado por vecino más cercano cuando el canvas se muestra a un tamaño distinto al de su backing store: cuando un canvas 16×16 se estira a 512×512 vía CSS, cada píxel original se vuelve un bloque 32×32 de píxeles idénticos con bordes nítidos. ctx.imageSmoothingEnabled = false en el contexto de renderizado 2D obliga a que las propias operaciones de dibujo usen vecino más cercano al escalar datos de entrada. Sin ambas, te queda borroso. El modelo de dibujo: un array 2D en memoria de valores de color, un canvas cuyo tamaño CSS es mucho mayor que el de su backing store, y herramientas que mutan el array y redibujan las celdas afectadas con ctx.fillRect. La superposición de la cuadrícula se coloca encima como líneas de un píxel de ancho que se desactivan para una previsualización sin obstrucciones. La exportación a PNG usa canvas.toBlob(callback, 'image/png'): asíncrona, codificada fuera del hilo principal. PNG es el formato correcto por dos razones: sin pérdidas (cada píxel sobrevive bit a bit) y soporta alfa (fondos transparentes para sprites de juego). JPEG es incorrecto: su compresión DCT emborrona los bordes de bloque e introduce artefactos de oscilación.

Las seis herramientas y lo que realmente hacen

• Lápiz (D): escribe un único píxel en la posición del cursor. Para evitar huecos cuando el cursor se mueve rápido entre eventos del ratón, la herramienta dibuja en cada cuadro una línea de Bresenham desde la posición previa del cursor hasta la actual.
• Borrador (E): estructuralmente idéntico al lápiz, pero escribe el color de fondo, devolviendo los píxeles a su estado por defecto.
• Cubo de pintura (F): sustituye cada píxel conectado del mismo color que el objetivo del clic. Usa relleno por inundación con 4-conectividad (vecinos norte/sur/este/oeste, sin diagonales) para que una línea diagonal fina impida que el cubo se filtre: la convención que coincide con la intuición del usuario. Implementado de forma iterativa con una pila en lugar de recursivamente, porque el flood fill recursivo en un canvas grande desborda la pila de llamadas de JavaScript.
• Cuentagotas / Pick (I): lee el color del píxel bajo el cursor y lo establece como color actual de dibujo. Una de las herramientas más usadas en los flujos de trabajo de pixel art una vez establecida la paleta.
• Línea (L): usa el algoritmo de trazado de líneas de Bresenham (Jack Bresenham en IBM, 1965) -solo sumas enteras y desplazamientos de bits, sin división- para avanzar entre dos coordenadas enteras de píxel manteniendo un acumulador de error. El aspecto deliberadamente escalonado de Bresenham es aquí una característica estética positiva, no un artefacto que suavizar.
• Rectángulo (R): dibuja el contorno de un rectángulo alineado con los ejes. Dos clics: el primero fija la esquina, el segundo completa la esquina opuesta.
• Deshacer (Ctrl+Z): historial completo paso a paso.

Adónde va el pixel art: tamaños de salida en el mundo real

• Sprites de juego. El caso de uso original y aún principal: un enemigo 16×16, un personaje jugador 32×32, un jefe 48×48, una tesela de hierba 16×16, todo ensamblado en una hoja de sprites para tiempo de ejecución. Toda la economía indie 2D descansa en este flujo de trabajo.
• Emotes de Twitch. Twitch exige cada emote personalizado en tres tamaños exactos: 28×28 (usado en el chat estándar), 56×56 (pantallas de alta DPI -ya la mayoría de espectadores), 112×112 (selectores de emotes). Emotes estáticos por debajo de 25 KB por tamaño; animados hasta 1 MB y 60 fotogramas. El flujo en pixel art es diseñar a 28×28 con formas duras y legibles, y luego escalar por múltiplos enteros sin pérdidas con vecino más cercano.
• Emoji personalizados de Discord. El tamaño recomendado por Discord es 128×128 con un tope de 256 KB; los emoji se muestran reducidos a 32×32 en los mensajes y 48×48 en las reacciones. Se requiere proporción cuadrada; PNG y GIF soportados.
• Favicons. Los favicons 16×16 / 32×32 / 48×48 que los navegadores muestran en pestañas y marcadores son pixel art, lo quisiera el diseñador o no. Dibujar a tamaño nativo en este editor y exportar a PNG produce favicons que se leen limpios sin halo de antialiasing.
• Redes sociales. El pixel art es ya una forma artística autónoma en Instagram, TikTok y Tumblr. La contención del medio funciona bien al tamaño de miniatura, y una pieza bien hecha es reconocible en un feed dominado por fotografía y renders 3D. Muchos artistas publican a diario trabajos pequeños construidos en torno a una paleta fija como Endesga 32 o DawnBringer 16.
• Linaje de las colecciones NFT. La colección CryptoPunks (Matt Hall y John Watkinson de Larva Labs, junio de 2017) estableció la plantilla: 10 000 personajes 24×24 generados algorítmicamente que beben del punk de los 80 y el cyberpunk de los 90. Cientos de colecciones derivadas siguieron entre 2017 y 2022, todas apoyadas en la misma plantilla de baja resolución + paleta atrevida.

Alcance honesto frente a las herramientas dedicadas

Tres herramientas dedicadas dominan el espacio del pixel art. Aseprite es la opción profesional de facto: nació como proyecto hobby de David Capello en 1998 (primera versión de 2001 como Allegro Sprite Editor), ahora desarrollada por Igara Studio S.A. liderada por David, Gaspar y Martín Capello, vendida en Steam por US$19,99 (fue GPLv2 gratuita hasta agosto de 2016, cuando la licencia pasó a ser propietaria, aunque el código sigue visible en GitHub). Capas, fotogramas, timeline, tilemaps, exportación de animación, scripting Lua, herramientas de línea de comandos: mejor herramienta de pago según el consenso de la comunidad. Piskel es el principal competidor gratuito, un editor web de código abierto creado por Julian Descottes con versión alojada en piskelapp.com y builds de escritorio descargables. Fortaleza: timeline de animación fotograma a fotograma, vista previa en vivo, exportación a GIF y a hoja de sprites. Pixilart es un editor en línea gratuito con una fuerte capa social/comunidad: más de un millón de usuarios, galerías públicas, comentarios, seguimientos. El alcance honesto de este editor es más estrecho que cualquiera de los tres: una herramienta de un solo fotograma, solo en el navegador, para un sprite rápido, un icono, un avatar. Seis herramientas básicas (lápiz, borrador, cubo de pintura, cuentagotas, línea, rectángulo), selector de color, paleta, deshacer, superposición de cuadrícula opcional y exportación a PNG al tamaño nativo del canvas. Sin capas, sin fotogramas, sin timeline de animación, sin onion-skin, sin modo tilemap, sin scripting. Para dibujar tu primer sprite, esbozar un emote de Twitch o sacar un retrato 32×32 al vuelo, este es el nivel de fricción adecuado: cero instalación, cero cuenta, cero curva de aprendizaje. Para todo un juego de sprites animados con efectos por capas, instala Aseprite o abre Piskel.

Privacidad: por qué importa que sea solo en el navegador

El pixel art a menudo es trabajo en curso para proyectos de juego indie no anunciados, encargos comisionados o diseños de personaje de marca aún no públicos. Los editores del lado servidor suben cada pincelada a un servicio de terceros donde queda en registros y puede ser inspeccionada por cualquiera con acceso al backend. Este editor se ejecuta enteramente en tu navegador vía JavaScript: cada píxel que colocas, cada deshacer, cada selección de color se queda en tu dispositivo. Verifícalo en la pestaña Red de DevTools: no se disparan peticiones mientras dibujas. La exportación a PNG usa la API integrada del navegador canvas.toBlob y una URL blob; sin paso de subida. Pon la página fuera de línea (modo avión) después de cargarla y el editor sigue funcionando. Seguro para proyectos no anunciados, trabajos bajo NDA, diseño de assets de marca o cualquier sprite que no quieras ver copiado en el disco duro de un desconocido.

Herramientas relacionadas