Editor de sprites

Pyxen incluye un editor de sprites completo para crear y editar pixel art directamente dentro de tu proyecto en iPad y Mac. No necesitas herramientas externas — diseña tus sprites y observa los cambios aplicados al instante en tu juego en ejecución.

Abrir el editor de sprites

Toca cualquier recurso de imagen en la barra lateral, luego toca el botón Edit para cambiar del visor de imágenes al editor de sprites.

Herramientas de dibujo

La barra de herramientas en la parte superior ofrece:

• Pencil — dibuja píxeles individuales
• Eraser — elimina píxeles
• Fill — rellena por inundación un área conectada con el color seleccionado
• Line — dibuja líneas rectas entre dos puntos
• Rectangle — dibuja rectángulos (contorno o relleno)
• Ellipse — dibuja elipses (contorno o relleno)

Selecciona una herramienta, elige un color de la paleta y dibuja en el lienzo. Amplía con pellizco (iPad) o desplazamiento (Mac) para trabajo preciso a nivel de píxel.

Paleta de colores

La paleta se encuentra en la parte inferior del editor. Toca cualquier color para seleccionarlo. Usa el cuentagotas para seleccionar un color del lienzo.

La paleta es por imagen — cada hoja de sprites puede tener su propio conjunto de colores.

Herramientas de selección

• Selección rectangular — arrastra para seleccionar una región rectangular
• Varita mágica — toca para seleccionar una región conectada de color similar. Mantén Shift para añadir a la selección, o Shift+Option para restar.
• Mover — arrastra la selección para reposicionarla

Las regiones seleccionadas muestran hormigas marchantes (contorno punteado animado). Con una selección activa, puedes:

• Cortar (Cmd+X) — elimina la selección y la copia al portapapeles
• Copiar (Cmd+C) — copia la selección al portapapeles
• Pegar (Cmd+V) — pega el portapapeles como una nueva selección flotante
• Eliminar — borra la región seleccionada

Capas

El panel de capas a la derecha muestra todas las capas en la imagen actual. Puedes:

• Añadir capas — crear nuevas capas arriba o abajo
• Reordenar capas — arrastra para cambiar el orden de apilamiento
• Alternar visibilidad — oculta capas temporalmente mientras trabajas
• Fusionar capas — combina capas en una sola

Cada capa se dibuja de forma independiente. Esto te permite separar fondos, personajes y efectos en diferentes capas y editarlos sin afectar los demás.

Redimensionar y lienzo

• Redimensionar — cambia las dimensiones de la imagen (escala el contenido existente)
• Tamaño del lienzo — cambia el tamaño del lienzo sin escalar (añade o elimina espacio alrededor de los bordes)

Línea de tiempo de animación

El editor de sprites incluye una línea de tiempo de animación integrada para crear animaciones de sprites fotograma a fotograma.

Abrir la línea de tiempo

Toca el botón de pila de película (abajo a la derecha del lienzo) para activar el modo de animación. La tira de la línea de tiempo aparece debajo del lienzo.

Crear animaciones

1. Abre el selector de animaciones (lado izquierdo de la línea de tiempo) y toca New Animation
2. Dale un nombre (por ejemplo, “walk”, “idle”, “attack”)
3. Selecciona tiles en tu hoja de sprites usando la herramienta de selección de tiles, luego toca Add to Animation
4. O toca el botón + en la línea de tiempo para añadir el siguiente tile en orden de lectura

Editar fotogramas

• Toca un fotograma para seleccionarlo — el lienzo hace zoom a ese tile para editarlo
• Clic derecho en un fotograma para eliminarlo o reordenarlo
• Controles de reproducción — reproducir/detener, control de FPS (1-60), contador de fotogramas

Piel de cebolla

Activa el botón de piel de cebolla para ver una superposición fantasma del fotograma anterior mientras editas. Esto ayuda a mantener la consistencia entre fotogramas de animación.

Aislamiento de tile

Al editar un fotograma, activa el botón de aislamiento para ocultar o atenuar los tiles circundantes, permitiéndote concentrarte en el fotograma actual.

Usar animaciones en código

Las animaciones se guardan en los metadatos del sprite. Reprodúcelas en tu juego con el parámetro animation:

player.sprite = Sprite("hero", animation="walk")

Consulta Sprites y renderizado y la referencia de Sprite para la API completa.

Deshacer y rehacer

Cada operación en el editor de sprites soporta deshacer (Cmd+Z) y rehacer (Cmd+Shift+Z). La pila de deshacer es por imagen y persiste mientras el proyecto está abierto.

Vista previa en vivo

Cuando tu juego está en ejecución, cualquier cambio que hagas en el editor de sprites se aplica al instante — pinta un píxel y míralo aparecer en la vista previa del juego. Esto facilita iterar en tu arte mientras pruebas la jugabilidad.

Consejos

• Usa la superposición de cuadrícula para alinear mosaicos con precisión en una hoja de mosaicos
• Trabaja ampliado para detalle a nivel de píxel, aleja para ver la imagen completa
• Las capas son ideales para separar fotogramas de animación en la misma hoja
• El editor de sprites guarda automáticamente — los cambios se escriben en el archivo del proyecto mientras trabajas
• En iPad con Apple Pencil, activa Pencil Only Drawing en Preferencias para dibujar con el lápiz y desplazarte con el dedo