Pixel Editor
Sprites y tilemaps, píxel a píxel: fotogramas, onion skinning, paletas, colisiones por tile, mapas de normales, 9-slice, y exportación a GIF o Aseprite.
En una frase#
Un editor de sprites y tilemaps hecho para trabajar en 32×32 con la misma comodidad que en 1024×1024, con fotogramas de animación y herramientas de color que entienden las paletas.
Diseño#
| Barra de menú | File · Edit · View · Plugins |
| Pestañas de modo | Sprite y Tilemap |
| Barra de herramientas | New, deshacer/rehacer, tamaño de lienzo, recorte, aplanar capas, voltear horizontal y vertical, cuadrícula, importar, exportar, Save |
| Fila de opciones | tamaño de pincel, forma de pincel, opacidad, vista dividida, y presets |
| Barra izquierda | lápiz, formas, relleno, degradado, texto, selección, cuentagotas, par de colores, paleta |
| Centro | el lienzo, con una pequeña lectura de la herramienta y los colores activos, y una Preview a 1:1 |
| Derecha | Layers, luego Effects, Normal map, Reference y Modes |
| Abajo | la timeline de fotogramas, luego la barra de paleta |
| Barra de estado | tamaño del lienzo, capa activa, zoom |
Qué haces aquí#
Dibujar#
Space + arrastrar desplaza la vista, la rueda del ratón hace zoom, 0
restablece la vista. El pincel tiene un tamaño y una forma (cuadrada por
defecto), y una opacidad. El panel Preview muestra el sprite a 1:1 mientras
trabajas con zoom, que es la única vista honesta de un sprite de píxeles.
Capas#
Con nombre, reordenables, cada una con su modo de fusión y su opacidad, más una etiqueta de color y un cuadro de filtro para cuando hay muchas. Effects se aplica de forma no destructiva.
Animar#
La timeline de abajo es una tira de fotogramas. Añadir, duplicar, eliminar, reordenar; fijar una duración en milisegundos por fotograma; reproducir hacia delante, hacia atrás o en ping-pong. La lectura te dice a cuánto equivale eso: 1 frame • 100 ms • ~10 fps.
Onion muestra tenuemente los fotogramas vecinos bajo el actual, que es cómo evitas que un ciclo de caminar se desvíe.
Color#
La barra de paleta es la parte que compensa aprender:
| Palette | el conjunto de trabajo, con un contador y + Add |
| Recent | lo que has elegido últimamente |
| Shades | una rampa de claro a oscuro generada a partir del color actual |
| Harmony | sugerencias complementarias, triádicas y análogas |
| Ramp | una rampa que construyes y conservas |
El color actual es editable como hex.
Tilemaps#
La pestaña Tilemap cambia de dibujar un sprite a maquetarlo como tiles. El resultado va a Engine, que tiene su propio editor de tilemap para el nivel en sí.
Mapas de normales#
La sección Normal map deriva un mapa de normales a partir del sprite, así que un sprite 2D se puede iluminar en Engine en lugar de quedarse plano.
Referencia#
Suelta una imagen en la sección Reference y se queda detrás del lienzo mientras dibujas encima.
Los paneles#
Nueve en total, y los últimos cuatro son los que convierten un sprite en un asset de juego:
| Tool Palette | las herramientas |
| Layers | la pila |
| Timeline | los fotogramas de animación |
| Reference | una imagen detrás del lienzo |
| Effects | efectos no destructivos sobre una capa |
| Tileset | construye un tileset a partir del lienzo, a un tamaño de tile elegido |
| Tilemap | maqueta esos tiles en un mapa |
| Collisions | formas de colisión por tile |
| Normal Map | deriva y edita un mapa de normales |
Tilesets y tilemaps#
El panel Tileset corta el lienzo en tiles (16 px por defecto); el panel Tilemap los maqueta en un mapa con capas, y lo puede redimensionar.
Los tilemaps se guardan como .tilemap, y se exportan de dos formas: como
un solo archivo, o por separado: el mapa como JSON y cada tileset como
su propia imagen, que es lo que suele querer un motor externo.
Colisiones#
Cada tile lleva una forma de colisión, dibujada encima del tileset en lugar de declarada en código:
| Full | todo el tile colisiona |
| None | atravesable |
| Top / Bottom / Left / Right half | colisión parcial |
| Slope up / Slope down | colisión en ángulo |
Show Collisions las superpone, y todo el conjunto se exporta como JSON. Hacer esto aquí hace que Engine reciba un tilemap que ya sabe por dónde puede caminar el jugador.
Mapas de normales#
Generate Normal Map deriva uno a partir del sprite, con una
intensidad; el Normal Map Editor luego te deja pintar la dirección de
la normal a mano (P), que es la única forma de corregir los sitios donde el
paso automático se equivoca.
9-slice y pivote#
Las guías 9-Slice marcan las regiones estirables de un sprite de interfaz, y Pivot / Origin fija el punto sobre el que el sprite rota y se ancla. Ambos viajan con el sprite hasta Engine.
Simetría#
Mirror X y Mirror Y pintan los dos lados a la vez: horizontal, vertical, ambos, o radial.
Rampas de color y paletas#
El modal Color Ramp construye una rampa de forma correcta en lugar de a
ojo, y las paletas se importan desde .gpl (el formato de paleta de GIMP
en el que vienen la mayoría de las paletas de pixel art).
Exportar#
| Formato | Para |
|---|---|
| PNG | un solo fotograma |
| GIF | una animación, en todas partes |
| APNG | una animación, con alfa real |
| Aseprite | de vuelta a Aseprite, con las capas intactas |
| Atlas / sprite sheet | un motor de juego |
.tilemap | el mapa, junto o separado en JSON + imágenes |
Archivos que lee y escribe#
| Formato nativo | .editor |
| Importa | .png, .jpg, .aseprite, .tilemap, .gpl (paletas) |
| Exporta | .png, .gif, APNG, .aseprite, atlas de sprites, .tilemap (junto o separado), JSON de colisiones |
Enviar trabajo a otros módulos#
Produce pixel art. Acepta pixel art e imágenes.
El pixel art lo aceptan Inkwell, Composer, Animator, Matter y Engine: un sprite sheet puede entrar directo en un juego sin pasar por un archivo intermedio.
Trabajar con otra persona#
Pixel Editor sincroniza operación por operación: datos de la escena, assets, animaciones y scripts.
Límites y problemas habituales#
- El zoom no es resolución. La barra de estado muestra el tamaño real del lienzo; la Preview lo muestra a 1:1.
- Un pincel suave no es un pincel de píxel. Una opacidad por debajo del 100% suaviza los bordes con antialiasing, que normalmente no es lo que quieres en un sprite.
- La duración del fotograma es por fotograma, no por animación. Un ciclo de 12 fotogramas a 100 ms cada uno corre a ~10 fps, hagan lo que hagan los demás.