Abrir, importar e exportar

O pxstud.io guarda seu trabalho no navegador conforme você avança (Seu primeiro sprite). Esta página trata de colocar arquivos para dentro e para fora. O que cada formato consegue fazer está em Formatos de arquivo.

Abrir arquivos

Arquivo > Abrir... (Ctrl+O) abre um arquivo .pxstudio ou do Aseprite, um arquivo de outro editor (Photoshop .psd, OpenRaster .ora, Piskel, Pixilart, Pixelorama, Pyxel Edit), ou uma imagem (PNG ou PNG animado, GIF, JPEG, WebP, AVIF, BMP, TGA, PCX, QOI, ICO, CUR, Netpbm, FLI/FLC), como um novo sprite no projeto atual, com o nome do arquivo. Você também pode soltar arquivos sobre o editor:

• Várias imagens de uma vez perguntam se devem ser abertas como sprites separados ou como uma animação (um quadro por imagem, na ordem do nome de arquivo).
• Uma imagem grande (com mais de 512 pixels de lado) pergunta se deve importá-la como pixel art ou abri-la como está.
• Outras imagens que o navegador consegue mostrar (SVG e assim por diante) vão para Importar como pixel art.

Quando algo em um arquivo não pode ser mantido, um aviso diz o quê, por exemplo o perfil de cor de um arquivo do Aseprite, um modo de mesclagem que o pxstud.io não tem ou uma camada de ajuste do Photoshop. O que os arquivos de cada editor mantêm está em Formatos de arquivo.

Arquivo > Salvar como... (Ctrl+Shift+S) baixa o sprite como um arquivo .pxstudio, que mantém tudo e abre de novo exatamente como estava.

Importar

Imagem como pixel art

Arquivo > Importar > Importar imagem como pixel art... transforma uma foto ou um desenho em pixel art.

1. Escolher imagem... ou solte uma aqui. (Imagens maiores que 4096 pixels são reduzidas antes.)
2. Defina o tamanho: largura e altura, ou um lado maior de 16, 32, 64 ou 128.
3. Escolha um algoritmo:
   • Equilibrado (SLIC + k-means), o padrão, agrupa pixels em regiões de cor parecida;
   • Suave com contornos (bilateral) suaviza áreas e pode escurecer as bordas entre elas;
   • Formas nítidas (Kopf-Lischinski) mantém formas e contornos nítidos.
4. Escolha uma paleta: Auto encontra as melhores cores (de 2 a 64), ou use a paleta do sprite, uma de Minhas paletas ou uma paleta integrada.
5. Clique em Iniciar para ver o resultado, ajuste e clique em Iniciar de novo para atualizá-lo.
6. Importar como um novo sprite, ou como uma nova camada no sprite atual (centralizada), e clique em Importar. Adicionar as cores da paleta à paleta do sprite deixa as cores à mão para retoques.

Sequência de imagens

Arquivo > Importar > Sequência de imagens... escolhe várias imagens e cria um sprite com um quadro por imagem, em ordem natural de nome de arquivo (run2 antes de run10). O sprite recebe o nome do primeiro arquivo sem o número. Imagens de tamanhos diferentes ficam no canto superior esquerdo da maior.

Sprite sheet

Arquivo > Importar > Sprite sheet... corta uma sheet em quadros. Escolha uma imagem, ou Usar o sprite atual.

• Detectar grade automaticamente procura os espaços vazios entre os quadros (transparentes, ou da cor de fundo da sheet) e ajusta o tipo, o tamanho do quadro, o deslocamento e o espaçamento de acordo. Ele roda quando você escolhe uma imagem, e de novo sempre que você clica nele. Precisa de espaços entre os quadros, então uma sheet cujos quadros se tocam mantém suas configurações e avisa.
• Encontrar quadros por Detecção de cada sprite serve para sheets que não estão em uma grade. Veja Detectar sprites abaixo.
• Tipo: Faixa horizontal, Faixa vertical, Por linhas ou Por colunas.
• Larg. quadro e Alt. quadro, Deslocamento, Espaçamento, e se devem ser incluídas células parciais e ignoradas as vazias. Uma grade sobre a sheet mostra onde os cortes caem.
• JSON do Aseprite... lê os quadros, durações e tags do arquivo JSON que o Aseprite exporta com uma sheet, em vez da grade. Quadros recortados voltam ao seu lugar na tela completa, e o espaçamento interno do Aseprite fica de fora de cada quadro.
• Criar um novo sprite, ou substituir os quadros do sprite atual (um passo de desfazer).

Detectar sprites

Para sheets compactadas ou com espaçamento irregular, escolha Detecção de cada sprite. Cada grupo de pixels que não são de fundo vira um quadro, mostrado como uma caixa numerada sobre a sheet.

• Fundo: Automático usa a transparência se a sheet tiver alguma, senão a cor mais comum dela. Ou escolha Transparente, ou uma cor.
• Tolerância (0 a 255): quão longe do fundo um pixel pode estar e ainda contar como vazio. Aumente para ignorar ruído leve ou a granulação de JPEG.
• Distância de união: caixas com no máximo essa quantidade de pixels vazios entre elas viram um só sprite, então uma espada ou faísca solta fica com seu personagem. 0 junta apenas caixas que se sobrepõem.
• Pixels mín.: sprites com menos pixels que isso são descartados como manchas.
• Conexão: se pixels que se tocam apenas em um canto pertencem ao mesmo sprite.
• Ordem: os quadros seguem linha por linha ou coluna por coluna.
• Tamanho do quadro é o tamanho do maior sprite, ou um tamanho personalizado (sprites maiores são cortados). A Âncora decide onde cada sprite fica nessa tela: embaixo no centro mantém os pés em uma linha, o que evita que um ciclo de caminhada trema.

Para corrigir o resultado à mão, clique em uma caixa para selecioná-la. Você pode mudar seu X, Y, L e A, deslocar onde ela fica no quadro (Deslocar X e Deslocar Y), movê-la para Antes ou Depois na ordem, ir para a caixa Anterior ou Próxima, ou Excluí-la. Arraste em uma parte vazia da sheet para desenhar uma nova caixa, que é adicionada por último. Mudar uma configuração de detecção ou clicar em Detectar de novo executa a detecção outra vez e descarta essas edições.

Sprites que se tocam não podem ser distinguidos e saem como uma só caixa; separe-os à mão, ou use a grade.

Exportar

Arquivo > Exportar... (Ctrl+Alt+Shift+S) abre uma caixa de diálogo para todos os formatos, com uma prévia do arquivo real. Camadas ocultas, camadas de referência e camadas de rascunho nunca são exportadas (um arquivo do Aseprite mantém todas as camadas).

Para todos os tipos:

• Redimensionar (%) escala em passos inteiros, de 100% a 1600%, para os pixels continuarem quadrados nítidos.
• Aplicar proporção de pixel estica pixels não quadrados ao seu formato.
• Quadros: todos, o quadro ativo ou os quadros de uma tag. Direção da animação: para frente, para trás ou ping-pong (para uma tag, para frente mantém a direção da própria tag).
• Reproduzir subtags e repetições (quando o sprite tem tags, ativado por padrão como no Aseprite): os quadros são exportados do jeito que a reprodução os toca, por cada tag na sua direção, incluindo tags aninhadas e contagens de repetição, então um quadro pode aparecer mais de uma vez. Desative para exportar cada quadro uma vez, em ordem (um arquivo por quadro em uma sequência de PNG).
• Área (quando o sprite tem slices): a tela inteira, um slice ou Cada slice, que grava uma exportação por slice. Um slice que se move ou muda de tamanho entre quadros é exportado na caixa que o cobre em todos os quadros exportados, para que todos os seus quadros tenham o mesmo tamanho. Com cada slice, {slice} no nome do arquivo vira o nome do slice ({slice}.png dá head.png); sem ele, o nome vai antes da extensão (sprite-head.png, walk-head001.png). Não vale para sprite sheets nem para os tipos de arquivo completo.
• Nome do arquivo. Para uma sequência de PNG, um número no nome define a numeração: walk001.png dá walk001.png, walk002.png e assim por diante; sem um número, os quadros são numerados como sprite-001.png.

Por tipo:

Predefinições e fila

Predefinições e fila, na parte de baixo da caixa de diálogo Exportar, salva e agrupa exportações. Nada nela pede confirmação.

• Predefinições guardam o tipo e todas as opções dessa aba (redimensionamento, quadros, área, nome do arquivo e as opções por tipo, como qualidade, fundo, hotspot, tamanho da célula ou as configurações da sprite sheet) sob um nome que você escolhe. Salvar predefinição com um nome existente a substitui. Aplicar preenche a caixa de diálogo com uma predefinição, e Renomear e Excluir fazem o que dizem. As predefinições ficam neste dispositivo e não exigem conta. Uma escolha de tag, slice ou quadro de uma predefinição que o sprite atual não tem volta para todos os quadros ou a tela inteira.
• Fila: Adicionar atual à fila (ou Adicionar à fila de uma predefinição) coloca na fila uma exportação com as configurações como estão agora. Executar fila cria todos os arquivos de uma vez: um download, ou um único pxstudio-export.zip quando os itens geram vários arquivos. Cada item mostra Aguardando, Concluído ou o erro que o interrompeu; um item que falha não interrompe os outros, e Executar fila de novo tenta os que falharam de novo. Remover tira um item. A fila é para o sprite e a caixa de diálogo que você tem abertos, e fica vazia de novo quando a caixa de diálogo é fechada.

Sprite sheets

O tipo Sprite sheet tem quatro abas, organizadas como as do Aseprite:

• Layout: faixa, linhas, colunas ou Compactado; um número fixo de colunas ou linhas, ou uma largura ou altura fixa; melhor ajuste; mesclar quadros duplicados; ignorar os vazios.
• Sprite: quais camadas e quadros, se camadas ou tags devem ser separadas, e o recorte.
• Bordas: margem da borda, espaço entre formas e margem interna, e Extrusão (repete os pixels da borda, para evitar emendas em jogos).
• Saída: uma Predefinição de engine, o Arquivo de dados (JSON do Aseprite como Hash ou Array, ou um SpriteFrames .tres do Godot 4) e, para JSON, como cada quadro é nomeado.

Os layouts funcionam como os do Aseprite, então as mesmas opções dão a mesma sheet:

• Faixas, linhas e colunas colocam cada quadro no seu próprio tamanho, então quadros recortados não ocupam o espaço do maior. Sem restrição, Por linhas e Por colunas fazem uma grade quase quadrada.
• Separar camadas coloca os quadros de cada camada um depois do outro, e Separar tags os de cada tag. Por linhas começa uma nova linha para cada camada e tag (Por colunas, uma nova coluna), a menos que uma largura (altura) fixa as quebre.
• Compactado encaixa os quadros, do maior ao menor, na menor sheet possível, perto de um quadrado (100 quadros recortados de 4 a 43 px dão 258×236 px, como no Aseprite). Melhor ajuste: Menor área tenta mais alguns tamanhos, e Menor potência de dois dá uma sheet com potência de dois.
• Uma largura ou altura fixa é a largura ou altura da sheet, mesmo que os quadros usem menos.
• A prévia avisa quando a sheet passa de 16384 px de lado, o que muitas GPUs e engines não conseguem carregar.

Recorte:

• Recortar sprite corta todos os quadros na área que qualquer quadro usa. Recortar cels corta cada quadro no seu próprio conteúdo. Com uma camada Plano de fundo visível, os dois removem a cor de fundo (a cor do pixel do canto superior esquerdo) em vez da transparência.
• Recortar pela grade expande a área recortada até as linhas da grade, para qualquer um dos dois recortes.
• O JSON mantém os quadros em coordenadas da tela: sourceSize é o tamanho da tela e spriteSourceSize é onde os pixels do quadro ficam nela, então engines e reimportações mantêm cada quadro no lugar.

Nomes de quadro: deixe Nome do arquivo do item vazio para os nomes do Aseprite, {title} {frame}.{extension}, com ({layer}) acrescentado para uma camada e #{tag} para uma tag (hero (Body) #walk 0.aseprite). {frame} conta a partir de 0 para cada camada e tag. Os tokens são os do Aseprite:

Você recebe o PNG da sheet e um arquivo de dados com o mesmo nome. O JSON lista a posição e a duração de cada quadro, as tags, as camadas exportadas e os slices, e pode ser lido por engines de jogo e ferramentas que leem o JSON do Aseprite. Diferente do Aseprite, o retângulo frame de um quadro não inclui a margem interna, e os intervalos das tags contam os quadros da sheet. Como no Aseprite, os quadros de uma tag ficam na ordem da linha do tempo na sheet, e a direção e a contagem de repetição dela estão no JSON para a engine de jogo aplicar.

As predefinições de engine configuram o layout para uma engine de jogo em um clique: Godot 4 e Phaser / PixiJS compactam os quadros, recortam cada um no seu conteúdo, mesclam duplicados e adicionam 1 px de extrusão, para que os quadros não peguem as bordas dos vizinhos quando a câmera se move ou a textura é filtrada. O Godot 4 também escolhe o arquivo de dados .tres. Padrões do Aseprite devolve o layout a uma faixa simples. Você pode mudar qualquer opção depois.

Godot 4

Com o arquivo de dados Godot 4 SpriteFrames (.tres):

• Cada tag vira uma animação com o nome da tag. Um sprite sem tags recebe uma animação chamada default. Com Separar camadas, as animações se chamam layer/tag.
• As durações dos quadros passam exatamente: a velocidade da animação vem da duração de quadro mais comum, e quadros mais longos ou mais curtos recebem uma duração relativa correspondente.
• O Godot não tem configuração de reverso, ping-pong ou repetição, então os quadros são escritos na ordem de reprodução. Uma tag com contagem de repetição é reproduzida essa quantidade de vezes (cada sentido de um ping-pong conta uma vez) e não fica em loop; as outras tags ficam em loop.
• Quadros recortados mantêm o tamanho e a posição completos, então o sprite não pula entre quadros.

Coloque o PNG e o .tres na mesma pasta do seu projeto Godot, depois escolha o .tres como os Sprite Frames de um AnimatedSprite2D. Para pixels nítidos, defina Project Settings > Rendering > Textures > Default Texture Filter como Nearest.

Exportar timelapse

Arquivo > Exportar timelapse... cria um pequeno GIF ou MP4 do seu sprite sendo desenhado, para compartilhar.

• Animar: Desenhar o sprite pronto (os pixels aparecem em uma ordem que você escolhe: uma varredura, dissolução aleatória, varredura diagonal, espiral, a partir do centro ou cor por cor), ou Reproduzir minhas edições (seu histórico de desfazer real desta sessão, traço por traço: os passos que levaram até onde você está agora, sem passos desfeitos nem outras ramificações). Escolha um intervalo de edições (Da edição / Até a edição) e Mostrar a cada N edições para acelerar construções longas.
• Com várias camadas ou quadros, escolha se são desenhados juntos ou um por vez.
• Tempo: tempo de desenho, taxa de quadros, ritmo (suave no início e no fim, constante, acelerar, desacelerar), uma pausa entre quadros, uma pausa no final e quantas vezes a animação pronta é então reproduzida.
• Saída: GIF ou MP4, escala (o padrão mira 1080 pixels), margem, uma tela quadrada e a cor de fundo (ou transparente, para GIF).