Abrir, importar y exportar

pxstud.io guarda tu trabajo en el navegador mientras avanzas (Tu primer sprite). Esta página trata de meter y sacar archivos. Qué puede hacer cada formato está en Formatos de archivo.

Abrir archivos

Archivo > Abrir... (Ctrl+O) abre un archivo .pxstudio o de Aseprite, un archivo de otro editor (Photoshop .psd, OpenRaster .ora, Piskel, Pixilart, Pixelorama, Pyxel Edit) o una imagen (PNG o PNG animado, GIF, JPEG, WebP, AVIF, BMP, TGA, PCX, QOI, ICO, CUR, Netpbm, FLI/FLC), como un sprite nuevo en el proyecto actual, con el nombre del archivo. También puedes soltar archivos sobre el editor:

• Si sueltas varias imágenes a la vez, se pregunta si abrirlas como sprites separados o como una animación (un fotograma por imagen, en orden de nombre de archivo).
• Una imagen grande (de más de 512 píxeles por lado) pregunta si importarla como pixel art o abrirla tal cual.
• Otras imágenes que el navegador puede mostrar (SVG y similares) van a Importar como pixel art.

Cuando algo de un archivo no se puede conservar, un aviso dice qué, por ejemplo el perfil de color de un archivo de Aseprite, un modo de fusión que pxstud.io no tiene o una capa de ajuste de Photoshop. Lo que conserva cada editor en sus archivos está en Formatos de archivo.

Archivo > Guardar como... (Ctrl+Shift+S) descarga el sprite como un archivo .pxstudio, que conserva todo y se vuelve a abrir exactamente como estaba.

Importar

Imagen como pixel art

Archivo > Importar > Importar imagen como pixel art... convierte una foto o un dibujo en pixel art.

1. Elegir imagen... o suelta una. (Las imágenes de más de 4096 píxeles se reducen primero.)
2. Define el tamaño: ancho y alto, o un lado largo de 16, 32, 64 o 128.
3. Elige un algoritmo:
   • Equilibrado (SLIC + k-means), el predeterminado, agrupa los píxeles en regiones de color parecido;
   • Suave con contornos (bilateral) suaviza las zonas y puede oscurecer los bordes entre ellas;
   • Formas nítidas (Kopf-Lischinski) mantiene las formas y los contornos nítidos.
4. Elige una paleta: Automática encuentra los mejores colores (de 2 a 64), o usa la paleta del sprite, una de Mis paletas o una paleta integrada.
5. Pulsa Iniciar para ver el resultado, ajusta y pulsa Reiniciar para actualizarlo.
6. Importar como un sprite nuevo, o como una capa nueva en el sprite actual (centrada), y haz clic en Importar. Añadir los colores a la paleta del sprite deja los colores a mano para retoques.

Secuencia de imágenes

Archivo > Importar > Secuencia de imágenes... elige varias imágenes y crea un sprite con un fotograma por imagen, en el orden natural de los nombres de archivo (run2 antes de run10). El sprite recibe el nombre del primer archivo sin su número. Las imágenes de distinto tamaño quedan en la esquina superior izquierda de la más grande.

Hoja de sprites

Archivo > Importar > Hoja de sprites... corta una hoja en fotogramas. Elige una imagen, o Usar el sprite actual.

• Detectar cuadrícula busca los espacios vacíos entre fotogramas (transparentes, o del color de fondo de la hoja) y ajusta el tipo, el tamaño del fotograma, el desfase y el relleno para que coincidan. Se ejecuta al elegir una imagen, y otra vez cada vez que lo pulsas. Necesita espacios entre los fotogramas, así que una hoja cuyos fotogramas se tocan conserva tus ajustes y lo indica.
• Buscar fotogramas por Detección de cada sprite es para hojas que no están en una cuadrícula. Consulta Detectar sprites más abajo.
• Tipo: Tira horizontal, Tira vertical, Por filas o Por columnas.
• Ancho fot. y Alto fot., Desfase, Relleno, y si incluir celdas parciales y omitir las vacías. Una cuadrícula sobre la hoja muestra dónde caen los cortes.
• JSON de Aseprite... lee los fotogramas, las duraciones y las etiquetas del archivo JSON que Aseprite exporta con una hoja, en lugar de la cuadrícula. Los fotogramas recortados vuelven a su lugar en el lienzo completo, y el relleno interior de Aseprite se deja fuera de cada fotograma.
• Crear un sprite nuevo, o reemplazar los fotogramas del sprite actual (un solo paso de deshacer).

Detectar sprites

Para hojas empaquetadas o con espaciado irregular, elige Detección de cada sprite. Cada grupo de píxeles que no son de fondo se convierte en un fotograma, mostrado como un cuadro numerado sobre la hoja.

• Fondo: Automático usa la transparencia si la hoja la tiene y, si no, su color más común. O elige Transparente, o un color.
• Tolerancia (de 0 a 255): cuánto puede alejarse un píxel del fondo y seguir contando como vacío. Súbela para ignorar ruido débil o la borrosidad de JPEG.
• Distancia de unión: los cuadros con a lo sumo esta cantidad de píxeles vacíos entre ellos se unen en un solo sprite, así una espada o una chispa separada se queda con su personaje. 0 une solo los cuadros que se solapan.
• Píxeles mín.: los sprites con menos píxeles que esto se descartan como motas.
• Unión: si los píxeles que solo se tocan por una esquina pertenecen al mismo sprite.
• Orden: los fotogramas van fila por fila o columna por columna.
• Tamaño del fotograma es el tamaño del sprite más grande, o un tamaño personalizado (los sprites más grandes se recortan). El Anclaje decide dónde se coloca cada sprite en ese lienzo: abajo al centro mantiene los pies en una línea, lo que evita que un ciclo de caminar tiemble.

Para corregir el resultado a mano, haz clic en un cuadro para seleccionarlo. Puedes cambiar su X, Y, An y Al, mover dónde se coloca en el fotograma (Mover X y Mover Y), pasarlo Antes o Después en el orden, ir al cuadro Anterior o Siguiente, o Eliminarlo. Arrastra en una parte vacía de la hoja para dibujar un cuadro nuevo, que se añade al final. Cambiar un ajuste de detección o pulsar Volver a detectar ejecuta la detección de nuevo y descarta estas ediciones.

Los sprites que se tocan no se pueden distinguir y salen como un solo cuadro; sepáralos a mano, o usa la cuadrícula.

Exportar

Archivo > Exportar... (Ctrl+Alt+Shift+S) abre un único diálogo para todos los formatos, con una vista previa del archivo real. Las capas ocultas, las capas de referencia y las capas de borrador nunca se exportan (un archivo de Aseprite conserva todas las capas).

Para todos los tipos:

• Redimensionar (%) escala en pasos enteros, de 100% a 1600%, para que los píxeles sigan siendo cuadrados nítidos.
• Aplicar proporción de píxel estira los píxeles no cuadrados a su forma.
• Fotogramas: todos, el fotograma activo o los fotogramas de una etiqueta. Dirección de la animación: hacia delante, hacia atrás o ping-pong (en una etiqueta, hacia delante conserva la dirección propia de la etiqueta).
• Reproducir subetiquetas y repeticiones (cuando el sprite tiene etiquetas, activado por defecto como en Aseprite): los fotogramas se exportan como los reproduce la reproducción, recorriendo cada etiqueta en su dirección, con las etiquetas anidadas y las repeticiones incluidas, así que un fotograma puede aparecer más de una vez. Desactívalo para exportar cada fotograma una sola vez, en orden (un archivo por fotograma en una secuencia PNG).
• Área (cuando el sprite tiene slices): el lienzo completo, un slice o Cada slice, que escribe una exportación por slice. Un slice que se mueve o cambia de tamaño entre fotogramas se exporta con el cuadro que lo cubre en todos los fotogramas exportados, así que todos sus fotogramas tienen el mismo tamaño. Con cada slice, {slice} en el nombre de archivo se convierte en el nombre del slice ({slice}.png da head.png); sin él, el nombre va antes de la extensión (sprite-head.png, walk-head001.png). No disponible para hojas de sprites ni para los tipos de archivo completo.
• Nombre de archivo. En una secuencia PNG, un número en el nombre define la numeración: walk001.png da walk001.png, walk002.png y así sucesivamente; sin número, los fotogramas se numeran sprite-001.png.

Por tipo:

Preajustes y cola

Preajustes y cola, al final del diálogo Exportar, guarda y agrupa exportaciones. Nada de lo que hay en él pide confirmación.

• Los Preajustes conservan el tipo y todas las opciones de esa pestaña (redimensionado, fotogramas, área, nombre de archivo y las opciones propias de cada tipo, como calidad, fondo, punto activo, tamaño de celda o los ajustes de la hoja de sprites) bajo un nombre que eliges. Guardar preajuste con un nombre existente lo reemplaza. Aplicar rellena el diálogo con un preajuste, y Renombrar y Eliminar hacen lo que dicen. Los preajustes se quedan en este dispositivo y no necesitan cuenta. Si un preajuste elige una etiqueta, un slice o un fotograma que el sprite actual no tiene, vuelve a todos los fotogramas o al lienzo completo.
• Cola: Añadir actual a la cola (o Añadir a la cola de un preajuste) pone en fila una exportación con los ajustes tal como están ahora. Ejecutar cola crea todos los archivos de una vez: una descarga, o un solo pxstudio-export.zip cuando los elementos generan varios archivos. Cada elemento muestra En espera, Listo o el error que lo detuvo; un elemento fallido no detiene a los demás, y volver a pulsar Ejecutar cola reintenta los fallidos. Quitar saca un elemento. La cola es para el sprite y el diálogo que tienes abiertos, y vuelve a quedar vacía cuando el diálogo se cierra.

Hojas de sprites

El tipo Hoja de sprites tiene cuatro pestañas, dispuestas como las de Aseprite:

• Disposición: tira, filas, columnas o Empaquetada; un número fijo de columnas o filas, o un ancho o alto fijo; mejor ajuste; fusionar fotogramas duplicados; ignorar los vacíos.
• Sprite: qué capas y fotogramas, si dividir capas o etiquetas, y el recorte.
• Bordes: margen del borde, espacio entre formas y margen interior, y Extruir (repite los píxeles del borde, para evitar costuras en los juegos).
• Salida: un Preajuste de motor, el Archivo de datos (JSON de Aseprite como Hash o como Array, o un SpriteFrames .tres de Godot 4) y, para JSON, cómo se nombra cada fotograma.

Las disposiciones funcionan como las de Aseprite, así que las mismas opciones dan la misma hoja:

• Las tiras, filas y columnas colocan cada fotograma con su propio tamaño, así que los fotogramas recortados no ocupan el espacio del más grande. Sin restricción, Por filas y Por columnas forman una cuadrícula casi cuadrada.
• Dividir capas pone los fotogramas de cada capa uno tras otro, y Dividir etiquetas los de cada etiqueta. Por filas empieza una fila nueva para cada capa y etiqueta (Por columnas, una columna nueva), a menos que un ancho (alto) fijo las envuelva.
• Empaquetada coloca los fotogramas, el más grande primero, en la hoja más pequeña posible, cerca de ser cuadrada (100 fotogramas recortados de 4 a 43 px dan 258×236 px, como en Aseprite). Mejor ajuste: Área más pequeña prueba algunos tamaños más, y Potencia de dos más pequeña da una hoja de potencia de dos.
• Un ancho o alto fijo es el ancho o alto de la hoja, aunque los fotogramas usen menos.
• La vista previa avisa cuando la hoja supera los 16384 px por lado, algo que muchas GPU y motores no pueden cargar.

Recorte:

• Recortar sprite recorta todos los fotogramas al área que usa cualquiera de ellos. Recortar celdas recorta cada fotograma a su propio contenido. Con una capa Fondo visible, ambos recortan el color de fondo (el color del píxel superior izquierdo) en lugar de la transparencia.
• Recortar por cuadrícula amplía el área recortada hasta las líneas de la cuadrícula, para cualquiera de los dos tipos de recorte.
• El JSON conserva los fotogramas en coordenadas del lienzo: sourceSize es el tamaño del lienzo y spriteSourceSize es dónde están los píxeles del fotograma en él, de modo que los motores y las reimportaciones mantienen cada fotograma en su sitio.

Nombres de fotograma: deja Nombre de archivo de cada elemento vacío para usar los nombres de Aseprite, {title} {frame}.{extension}, con ({layer}) añadido para una capa y #{tag} para una etiqueta (hero (Body) #walk 0.aseprite). {frame} cuenta desde 0 para cada capa y etiqueta. Los tokens son los de Aseprite:

Obtienes el PNG de la hoja y un archivo de datos con el mismo nombre. El JSON lista la posición y la duración de cada fotograma, las etiquetas, las capas exportadas y los slices, y lo pueden leer los motores de juegos y las herramientas que leen el JSON de Aseprite. A diferencia de Aseprite, el rectángulo frame de un fotograma no incluye el relleno interior, y los rangos de las etiquetas cuentan los fotogramas de la hoja. Como en Aseprite, los fotogramas de una etiqueta están en el orden de la línea de tiempo en la hoja, y su dirección y su número de repeticiones están en el JSON para que los aplique el motor de juegos.

Los preajustes de motor definen la disposición para un motor de juegos con un clic: Godot 4 y Phaser / PixiJS empaquetan los fotogramas, recortan cada uno a su contenido, fusionan duplicados y añaden 1 px de extrusión, para que los fotogramas no tomen los bordes de sus vecinos cuando la cámara se mueve o la textura se filtra. Godot 4 también elige el archivo de datos .tres. Valores predeterminados de Aseprite devuelve la disposición a una tira simple. Después puedes cambiar cualquier opción.

Godot 4

Con el archivo de datos Godot 4 SpriteFrames (.tres):

• Cada etiqueta se convierte en una animación con el nombre de la etiqueta. Un sprite sin etiquetas recibe una animación llamada default. Con Dividir capas, las animaciones se llaman layer/tag.
• Las duraciones de los fotogramas se trasladan con exactitud: la velocidad de la animación sale de la duración de fotograma más común, y los fotogramas más largos o más cortos reciben una duración relativa equivalente.
• Godot no tiene ajuste de inverso, ping-pong ni repetición, así que los fotogramas se escriben en el orden de reproducción. Una etiqueta con un número de repeticiones se reproduce esa cantidad de veces (cada sentido de un ping-pong cuenta una vez) y no se repite en bucle; las demás etiquetas sí.
• Los fotogramas recortados conservan su tamaño y posición completos, así que el sprite no salta entre fotogramas.

Pon el PNG y el .tres en la misma carpeta de tu proyecto de Godot, y luego elige el .tres como Sprite Frames de un AnimatedSprite2D. Para píxeles nítidos, establece Project Settings > Rendering > Textures > Default Texture Filter en Nearest.

Exportar timelapse

Archivo > Exportar timelapse... crea un GIF o MP4 corto de tu sprite mientras se dibuja, para compartir.

• Animar: Dibujar el sprite terminado (los píxeles aparecen en un orden que eliges: un barrido, disolución aleatoria, barrido diagonal, espiral, desde el centro o color por color), o Reproducir mis ediciones (tu historial de deshacer real de esta sesión, trazo a trazo: los pasos que llevaron a donde estás ahora, sin los pasos deshechos ni otras ramas). Elige un rango de ediciones (Desde la edición / Hasta la edición) y Mostrar cada N ediciones para acelerar los procesos largos.
• Con varias capas o fotogramas, elige si se dibujan juntos o de uno en uno.
• Tiempo: tiempo de dibujo, velocidad de fotogramas, ritmo (suave al inicio y al final, constante, acelerar, desacelerar), una pausa entre fotogramas, una pausa al final y cuántas veces se reproduce después la animación terminada.
• Salida: GIF o MP4, escala (por defecto apunta a 1080 píxeles), margen, un lienzo cuadrado y el color de fondo (o transparente, para GIF).