Cómo se organiza tu trabajo
Proyectos, sprites, capas, fotogramas y celdas, y tus bibliotecas de paletas, pinceles y scripts, y dónde se guarda cada cosa.
Todo lo que haces en pxstud.io encaja en unas pocas piezas anidadas. Conocerlas ayuda con casi todo lo demás: qué puede revertir deshacer, qué contiene un archivo descargado y qué copia Sync a tus otros dispositivos.
Las piezas
Project
└── Sprite one image or animation (a .pxstudio file)
├── Layers stacked drawings; groups hold other layers
├── Frames the steps of the animation
│ └── Cels what one layer shows on one frame
├── Tags named ranges of frames
├── Slices named rectangles (hitboxes, 9-slices, export areas)
├── Palette the sprite's colors
└── Tilesets the tiles of tilemap layers
Your library: palettes, brushes and scripts, used across all your spritesProyecto. Una carpeta con nombre de sprites. Puedes tener tantos como quieras y cambiar entre ellos en el menú Proyecto. Un proyecto no contiene nada más que sus sprites.
Sprite. Una imagen o animación: su tamaño, modo de color, capas, fotogramas y todo lo demás
que aparece abajo. Cada sprite se abre en su propia pestaña. Su nombre pertenece al proyecto, no al dibujo, así que un
archivo .pxstudio descargado toma el nombre del sprite como nombre de archivo.
Capa. Las capas se apilan de abajo hacia arriba, y cada una se puede mostrar, ocultar, bloquear y mezclar por separado (Capas). Hay cuatro tipos:
- capas de imagen, el tipo habitual, que contienen píxeles;
- grupos, que contienen otras capas;
- capas de referencia, una imagen para calcar, que nunca se exporta;
- capas de tilemap, pintadas con tiles de un tileset.
La capa Fondo es una capa de imagen con algunas reglas: es opaca, está abajo del todo y no se puede mover.
Fotograma. Un paso de la animación, con cuánto tiempo se muestra (en milisegundos). Una imagen fija es un sprite con un solo fotograma.
Celda. El punto de encuentro de una capa y un fotograma: lo que esa capa muestra en ese fotograma. Un sprite con 3 capas y 4 fotogramas tiene hasta 12 celdas. Una celda puede estar vacía (sin nada dibujado todavía), y las celdas de una misma capa pueden estar vinculadas para que varios fotogramas compartan una imagen: dibujar en cualquiera de ellas cambia todas. El pixel art suele tener espacio vacío, así que una celda solo guarda la parte del lienzo en la que se ha dibujado.
Etiqueta. Un rango de fotogramas con nombre y color ("walk", "jump") con una dirección de reproducción: hacia delante, inversa, ping-pong o ping-pong inverso, y cuántas veces se repite. Las exportaciones pueden usar los fotogramas de una etiqueta.
Slice. Un rectángulo con nombre sobre el lienzo sin píxeles propios, usado para marcar hitboxes, regiones de exportación o guías de escalado 9-slice. Un slice puede cambiar de un fotograma al siguiente.
Paleta. La lista de colores del sprite. Lo que significa depende del modo de color del sprite:
- RGBA: cada píxel tiene su propio color, con transparencia. La paleta es un conjunto de muestras entre las que elegir.
- Escala de grises: tonos de gris, con transparencia.
- Indexado: cada píxel es una entrada de la paleta, así que recolorear una entrada recolorea cada píxel que la usa. Una entrada (la primera, a menos que la cambies) cuenta como transparente.
Una paleta también puede cambiar a mitad de una animación, a partir de un fotograma dado.
Tileset. Los tiles con los que pinta una capa de tilemap. Repintar un tile lo actualiza en todos los sitios donde está colocado, y varias capas de tilemap pueden compartir un tileset.
Tu biblioteca. Las paletas, pinceles y scripts que creas, guardas o bifurcas viven en tu propia biblioteca, fuera de cualquier sprite, para que puedas usarlos en todos. El editor también trae paletas y pinceles integrados. Elegir una paleta de la biblioteca copia sus colores en el sprite; cambiarla después no cambia los sprites que ya la usan.
El contexto de edición
Tus colores de primer plano y de fondo, el pincel y las opciones de cada herramienta no forman parte de ningún sprite. Un único conjunto se comparte entre todas las pestañas, así que al cambiar de sprite conservas tu pincel y tus colores. Se restablecen al recargar la página. (Una disposición guardada puede recuperar los ajustes de tus herramientas.)
Qué cubre deshacer
Cada sprite tiene su propio historial de deshacer. Todo lo que cambia el sprite se puede deshacer: dibujar, capas, fotogramas, celdas, etiquetas, slices, la paleta, redimensionar, y también la selección.
Esto no se puede deshacer:
- renombrar un proyecto o un sprite;
- cambios en las paletas, pinceles y scripts de tu biblioteca;
- tus colores, pincel y opciones de herramienta;
- qué capa o fotograma está activo, y cómo está organizado el espacio de trabajo;
- los nombres que les pones a los pasos de deshacer.
El historial se guarda con el sprite, así que sigue ahí después de cerrar su pestaña o recargar la página, y con Sync también en tus otros dispositivos. Los pasos más antiguos se descartan después de 1000.
Versiones
Deshacer retrocede paso a paso, y sus pasos más antiguos se descartan. Para conservar un estado de un sprite para siempre,
ponle nombre: Sprite > Historial de versiones... > Nombrar esta versión... conserva el sprite como está ahora
en este dispositivo, hasta que elimines la versión. Desde la misma lista puedes Comparar una versión con
el sprite tal como está ahora (lado a lado, o con cada píxel cambiado marcado), Restaurarla (un paso
que puedes deshacer) o descargarla como archivo .pxstudio (sin historial de deshacer: una versión no tiene).
Ponerle nombre a un paso en el panel Historial de deshacer también conserva
una versión: el sprite tal como estaba en ese paso.
Con Sync, la nube también conserva versiones anteriores de cada sprite: cada guardado del último día, luego uno al día durante 30 días, luego uno a la semana durante un año. Ponle nombre a una de esas (el botón de la chincheta) y se conserva para siempre en todos los dispositivos; su almacenamiento cuenta para tu plan hasta que quites el nombre.
El mismo sprite en dos pestañas
Un sprite solo se puede editar en una pestaña del navegador a la vez. Ábrelo en una segunda pestaña y estará en solo lectura ahí, con una nota en la parte superior; lo que guarde la primera pestaña aparece en ella. Elige Editar aquí para pasar la edición a la segunda pestaña: la primera guarda y pasa a ser de solo lectura. Cuando la pestaña de edición cierra el sprite, otra pestaña que lo tenga abierto toma el relevo.
Dónde se guardan las cosas
| Qué | Dónde se guarda |
|---|---|
| Proyectos y sprites | En este navegador, guardados a medida que trabajas. Con Sync, también en tu cuenta. |
| Tus paletas, pinceles y scripts | En este navegador. Con Sync, también en tu cuenta; las versiones publicadas de scripts están en la biblioteca de scripts. |
| Paletas y pinceles integrados | En el propio editor. |
| Scripts marcados con corazón | En tu cuenta, con una copia en este navegador para que funcionen sin conexión. |
| Disposiciones, preferencias y atajos | Solo en este navegador. |
| Colores, pincel y opciones de herramienta | Solo mientras la página está abierta. |
| Historial de deshacer | Con el sprite: en este navegador, con Sync en tu cuenta, y en los archivos .pxstudio que descargas. |
| Versiones con nombre | En este navegador. Las versiones de la nube a las que pongas nombre están en tu cuenta. |
Archivos que puedes descargar
- Un archivo
.pxstudio(Archivo > Guardar como...) es un sprite: su tamaño y modo de color, paleta, capas, fotogramas, celdas, etiquetas, slices, tilesets, cuadrícula e imágenes de referencia, y su historial de deshacer. No incluye las versiones con nombre, la selección ni nada que esté fuera del sprite. Vuelve a abrirlo con Archivo > Abrir..., y deshacer sigue donde estaba. - Todo de una vez: en la página de tu cuenta, Este navegador > Exportar todo (.zip)
descarga un zip con los sprites de cada proyecto (como archivos
.pxstudio, con su historial de deshacer) y tus paletas (.gpl), pinceles y scripts. Funciona sin conexión y sin iniciar sesión.