Como seu trabalho é organizado

Projetos, sprites, camadas, quadros e cels, e suas bibliotecas de paletas, pincéis e scripts, e onde cada coisa fica guardada.

Tudo o que você faz no pxstud.io se encaixa em algumas peças aninhadas. Conhecê-las ajuda com quase todo o resto: o que o desfazer consegue reverter, o que um arquivo baixado contém e o que o Sync copia para seus outros dispositivos.

As peças

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 sprites

Projeto. Uma pasta com nome que guarda sprites. Você pode ter quantos quiser e alternar entre eles no menu Projeto. Um projeto contém apenas seus sprites.

Sprite. Uma imagem ou animação: seu tamanho, modo de cor, camadas, quadros e tudo o mais descrito abaixo. Cada sprite abre na sua própria aba. O nome pertence ao projeto, não ao desenho, então um arquivo .pxstudio baixado usa o nome do sprite como nome de arquivo.

Camada. As camadas se empilham de baixo para cima, e cada uma pode ser exibida, ocultada, bloqueada e mesclada individualmente (Camadas). Existem quatro tipos:

  • camadas de imagem, o tipo comum, que guardam pixels;
  • grupos, que guardam outras camadas;
  • camadas de referência, uma imagem para decalcar, que nunca é exportada;
  • camadas de tilemap, pintadas com tiles de um tileset.

A camada Plano de fundo é uma camada de imagem com algumas regras: é opaca, fica na base e não pode ser movida.

Quadro. Um passo da animação, com a duração em que ele aparece (em milissegundos). Uma imagem estática é um sprite com um quadro.

Cel. O ponto de encontro de uma camada com um quadro: o que aquela camada mostra naquele quadro. Um sprite com 3 camadas e 4 quadros tem até 12 cels. Um cel pode estar vazio (nada desenhado ali ainda), e os cels de uma camada podem ser vinculados para que vários quadros compartilhem uma mesma imagem: desenhar em qualquer um deles altera todos. A pixel art costuma ter espaço vazio, então um cel guarda apenas a parte da tela em que já se desenhou.

Tag. Um intervalo de quadros com nome e cor ("andar", "pular") com uma direção de reprodução: para frente, para trás, vai e volta ou vai e volta invertido, e quantas vezes se repete. As exportações podem usar os quadros de uma só tag.

Slice. Um retângulo com nome na tela, sem pixels próprios, usado para marcar hitboxes, regiões de exportação ou guias de escala 9-slice. Um slice pode mudar de um quadro para o seguinte.

Paleta. A lista de cores do sprite. O que ela significa depende do modo de cor do sprite:

  • RGBA: cada pixel tem sua própria cor, com transparência. A paleta é um conjunto de amostras para escolher.
  • Tons de cinza: tons de cinza, com transparência.
  • Indexado: cada pixel é uma entrada da paleta, então recolorir uma entrada recolore todos os pixels que a usam. Uma entrada (a primeira, a menos que você mude) conta como transparente.

Uma paleta também pode mudar no meio de uma animação, a partir de um determinado quadro.

Tileset. Os tiles com que uma camada de tilemap pinta. Repintar um tile atualiza todos os lugares onde ele foi colocado, e várias camadas de tilemap podem compartilhar um mesmo tileset.

Sua biblioteca. As paletas, os pincéis e os scripts que você cria, salva ou faz fork ficam na sua própria biblioteca, fora de qualquer sprite, para que você possa usá-los em todos. O editor também vem com paletas e pincéis integrados. Escolher uma paleta da biblioteca copia as cores dela para o sprite; alterá-la depois não muda os sprites que já a usam.

O contexto de edição

Suas cores de primeiro plano e de fundo, o pincel e as opções de cada ferramenta não fazem parte de nenhum sprite. Um único conjunto é compartilhado por todas as abas, então trocar de sprite mantém seu pincel e suas cores. Eles são redefinidos quando você recarrega a página. (Um layout salvo pode trazer de volta as configurações das suas ferramentas.)

O que o desfazer cobre

Cada sprite tem seu próprio histórico de desfazer. Tudo o que altera o sprite pode ser desfeito: desenho, camadas, quadros, cels, tags, slices, a paleta, o redimensionamento e também a seleção.

Estas coisas não podem ser desfeitas:

  • renomear um projeto ou um sprite;
  • alterações em paletas, pincéis e scripts da sua biblioteca;
  • suas cores, seu pincel e as opções de ferramenta;
  • qual camada ou quadro está ativo e como o espaço de trabalho está organizado;
  • os nomes que você dá às etapas do desfazer.

O histórico é salvo junto com o sprite, então continua lá depois que você fecha a aba ou recarrega a página, e, com o Sync, também nos seus outros dispositivos. As etapas mais antigas são descartadas depois de 1.000.

Versões

O desfazer volta passo a passo, e suas etapas mais antigas são descartadas. Para guardar um estado do sprite de forma permanente, dê um nome a ele: Sprite > Histórico de versões... > Nomear esta versão... guarda o sprite como está agora neste dispositivo, até você excluir a versão. Na mesma lista, você pode Comparar uma versão com o sprite como ele está agora (lado a lado, ou com cada pixel alterado marcado), Restaurar a versão (um único passo que você pode desfazer) ou baixá-la como um arquivo .pxstudio (sem histórico de desfazer: uma versão não tem). Dar nome a uma etapa no painel Histórico de desfazer também guarda uma versão: o sprite como estava nessa etapa.

Com o Sync, a nuvem também guarda versões anteriores de cada sprite: cada salvamento do último dia, depois um por dia durante 30 dias, depois um por semana durante um ano. Dê um nome a uma delas (o botão de fixar) e ela é mantida para sempre em todos os dispositivos; o armazenamento dela conta no seu plano até você remover o nome.

O mesmo sprite em duas abas

Um sprite só pode ser editado em uma aba do navegador por vez. Abra-o em uma segunda aba e ele fica somente leitura ali, com um aviso no topo; tudo o que a primeira aba salvar aparece nela. Escolha Editar aqui para passar a edição para a segunda aba: a primeira salva e fica somente leitura. Quando a aba que está editando fecha o sprite, outra aba que o tenha aberto assume a edição.

Onde as coisas ficam guardadas

O quêOnde fica
Projetos e spritesNeste navegador, salvos enquanto você trabalha. Com o Sync, também na sua conta.
Suas paletas, pincéis e scriptsNeste navegador. Com o Sync, também na sua conta; as versões publicadas dos scripts ficam na biblioteca de scripts.
Paletas e pincéis integradosNo próprio editor.
Scripts favoritadosNa sua conta, com uma cópia neste navegador para funcionarem offline.
Layouts, preferências e atalhosSomente neste navegador.
Cores, pincel e opções de ferramentaApenas enquanto a página está aberta.
Histórico de desfazerJunto com o sprite: neste navegador, com o Sync na sua conta, e nos arquivos .pxstudio que você baixa.
Versões nomeadasNeste navegador. As versões da nuvem que você nomeia ficam na sua conta.

Arquivos que você pode baixar

  • Um arquivo .pxstudio (Arquivo > Salvar como...) é um sprite: seu tamanho e modo de cor, paleta, camadas, quadros, cels, tags, slices, tilesets, grade e imagens de referência, e seu histórico de desfazer. Ele não inclui as versões nomeadas, a seleção nem nada fora do sprite. Abra-o novamente com Arquivo > Abrir..., e o desfazer continua de onde parou.
  • Tudo de uma vez: na página da sua conta, Este navegador > Exportar tudo (.zip) baixa um zip com os sprites de todos os projetos (como arquivos .pxstudio, com seu histórico de desfazer) e suas paletas (.gpl), pincéis e scripts. Funciona offline e sem ter entrado na conta.