Editor de sprites

Pyxen incluye un editor de sprites completo para crear y editar pixel art directamente en tu proyecto, en el iPad y en el Mac. No necesitas herramientas externas.

Abrir el editor de sprites

Elige una imagen en Archivos: se abre directamente en el editor de sprites. Para crear una nueva, elige Archivo › Nuevo asset… y luego Imagen.

En una ventana de iPad estrecha, el lienzo ocupa todo el ancho del panel y sus paneles son las herramientas de la bandeja, al pie de la ventana: Herramientas, Color, Capas y Fotogramas. Las de un tilemap son Herramientas y Mosaicos.

Herramientas de dibujo

Las herramientas están en el borde del lienzo, cada una con su tecla:

• Lápiz (B) — dibujar píxeles. Lápiz de píxel perfecto, en el menú ⋯, mantiene la línea de un píxel de grosor.
• Borrador (E) — borrar píxeles
• Relleno (G) — rellenar un área conectada con el color
• Línea (L) — trazar líneas rectas entre dos puntos
• Rectángulo (U) y Círculo (O) — dibujar formas
• Cuentagotas (I) — tomar un color del lienzo

Elige un color y dibuja en el lienzo. Haz zoom pellizcando o desplazándote para trabajar píxel a píxel; Ajustar a la ventana (Cmd+0) muestra la imagen entera. La Simetría, en la barra del editor, refleja lo que dibujas en horizontal, en vertical o en ambos.

Colores

La columna lateral tiene el color con el que dibujas y el color de fondo (X los intercambia), el color en hexadecimal, la paleta y los últimos colores usados. Elige otra paleta en el menú ⋯.

Herramientas de selección

• Seleccionar (M) — arrastra para seleccionar una zona rectangular
• Varita mágica (W) — seleccionar una zona conectada del mismo color
• Mover (V) — arrastra la selección para colocarla; Retorno aplica el movimiento y Escape lo cancela

Con una selección, el menú del lienzo (clic derecho, o mantener pulsado) permite:

• Cortar (Cmd+X), Copiar (Cmd+C) y Pegar (Cmd+V)
• Eliminar — borrar la zona seleccionada
• Deseleccionar (Cmd+D) e Invertir selección (Mayús+Cmd+I)
• Rellenar con color (Cmd+Suprimir) y Recortar a la selección (Mayús+Cmd+C)

En el iPad, los botones de edición sobre el lienzo deshacen, rehacen, cortan, copian y pegan.

Capas

Las capas están bajo la paleta. Añadir capa añade una; cada capa tiene un interruptor Visible y Bloqueado. El menú de una capa la renombra, la sube o la baja, ajusta su Opacidad; Combinar hacia abajo la une con la de debajo, Acoplar hace una sola capa con todas, y Eliminar capa la quita.

Cada capa se dibuja de forma independiente. Así puedes separar fondos, personajes y efectos en capas distintas y editarlos sin afectar a los demás.

Redimensionar, voltear y girar

Redimensionar imagen… cambia el tamaño de la imagen:

• Escala — escala los píxeles por vecino más cercano, sin mezclar
• Lienzo — deja los píxeles donde indica el ancla y añade o quita espacio alrededor; el espacio nuevo es transparente

El menú del lienzo también tiene Recortar al contenido, Voltear horizontalmente, Voltear verticalmente y giros de 90° y 180°.

La cuadrícula (Cuadrícula en la barra) ayuda a alinear mosaicos en una hoja; su tamaño, sus líneas principales y su color están en el menú ⋯.

Animación

El pie del editor contiene las animaciones de la imagen, para animaciones de sprites fotograma a fotograma.

Crear animaciones

1. Elige Nueva animación y ponle un nombre (p. ej., “walk”, “idle”, “attack”)
2. Selecciona mosaicos en tu hoja con la herramienta Selección de mosaicos (T) y elige Añadir a la animación
3. O elige Añadir fotograma para añadir el siguiente mosaico en orden de lectura

Hoja completa vuelve a mostrar toda la imagen; el menú de una animación la renombra o la elimina.

Editar fotogramas

• Elige un fotograma para editarlo en el lienzo
• El menú de un fotograma lo mueve a la izquierda o a la derecha, o lo quita
• Reproducir reproduce la animación, a la velocidad que fijas en fotogramas por segundo (de 1 a 30)

Papel cebolla

Activa Papel cebolla para ver un fantasma del fotograma anterior mientras editas. Ayuda a mantener los fotogramas coherentes.

Aislar el fotograma

Activa Aislar el fotograma para ocultar los mosaicos alrededor del fotograma que editas y centrarte en él.

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.

Usado en el código, en la barra del panel, dice cuántas líneas de tus scripts nombran esta imagen; elige una para ir a ella. En el código, Cmd+clic en el nombre de una imagen te trae de vuelta aquí, en la animación o el tile que nombra la llamada.

Exportar un sprite

Exportar… al final del menú ⋯, Exportar animación… en el menú de una animación, o Archivo › Exportar sprite… (Option+Cmd+E) abre Exportar sprite. Elige qué quieres obtener:

• Fotograma — un fotograma de una animación, en PNG
• Hoja — la imagen entera, con sus capas combinadas, en PNG
• Tira — los fotogramas de una animación uno junto a otro, en PNG
• GIF animado — una animación, en bucle a su velocidad

Elige la Animación y, para Fotograma, el fotograma. Escala hace el archivo 1×, 2×, 4× u 8× más grande, cada píxel un cuadrado nítido. La vista previa es el archivo, con su nombre y tamaño debajo: hero-walk@4x.gif, hero-walk-2.png para el fotograma 2, hero-walk-strip.png, hero.png para la hoja.

Guardar… guarda el archivo donde elijas; en iPad, Compartir… abre la hoja de compartir (Guardar en Archivos, Guardar imagen, AirDrop); en la web, Descargar lo descarga. Copiar pone un PNG en el portapapeles. En Mac y iPad, arrastra la vista previa para soltar el archivo donde quieras.

Un GIF no tiene píxeles semitransparentes: un píxel al menos medio opaco se dibuja sólido y el resto queda transparente. Un fotograma de GIF dura un número entero de centésimas de segundo, así que a 8 fps cada fotograma dura 0,13 s, y nada va más rápido que 50 fps.

Deshacer y rehacer

Cada cambio en el editor de sprites se puede deshacer (Cmd+Z) y rehacer (Cmd+Mayús+Z) mientras el proyecto está abierto.

Ver tu arte en el juego

Tu juego lee sus imágenes cada vez que se inicia: después de pintar, vuelve a ejecutar el juego para ver los nuevos píxeles en la vista previa del juego. Un juego en ejecución conserva las imágenes con las que empezó.

Consejos

• Trabaja con zoom para el detalle a nivel de píxel y aléjate para ver la imagen entera
• La imagen de un pack se abre en solo lectura: elige Editar una copia para hacerla de tu proyecto
• El editor de sprites guarda automáticamente — los cambios se escriben en el archivo del proyecto mientras trabajas
• En el iPad con Apple Pencil, activa Ajustes › Pixel art › Dibujar solo con el Apple Pencil para dibujar con el lápiz y desplazarte con el dedo