Slices

Marque regiões nomeadas de um sprite para exportação, engines de jogo e escala 9-slice, com pivô e alterações por quadro.

Um slice é um retângulo nomeado no sprite: a área de um botão, a hitbox de um personagem, a parte de uma sheet que um jogo deve recortar. Slices não guardam pixels, então desenhar nunca os altera. Eles são salvos com o sprite, gravados em arquivos do Aseprite e nos dados do sprite sheet, e uma engine de jogo pode lê-los de lá.

Um slice também pode ter um centro 9-slice, para arte que estica sem distorcer os cantos, e um pivô, um ponto que o jogo trata como a origem do slice.

Um botão verde de jogo na tela com dois slices: Button, selecionado, com oito alças, linhas pontilhadas de 9-slice e uma mira de pivô na borda inferior, e um slice tracejado Icon em volta da estrela no meioUm botão verde de jogo na tela com dois slices: Button, selecionado, com oito alças, linhas pontilhadas de 9-slice e uma mira de pivô na borda inferior, e um slice tracejado Icon em volta da estrela no meio
Um 9-slice selecionado com um pivô, e um segundo slice dentro dele

Criar um slice

Escolha a Slice (Shift+C) e arraste em um ponto vazio da tela, de um canto ao canto oposto; um contorno tracejado o mostra enquanto você arrasta. Segure Shift para fazê-lo quadrado. O novo slice recebe o nome "Slice 1", "Slice 2" e assim por diante, e fica selecionado, pronto para ajustar.

Todo slice é desenhado na tela como um contorno tracejado com o seu nome, seja qual for a ferramenta em uso. Um slice com uma cor nos dados do usuário (abaixo) é contornado com essa cor; os outros recebem cores próprias em sequência, para que os vizinhos sejam fáceis de distinguir.

Com Alinhar à grade (Shift+S) ativado, as bordas do slice se alinham à grade do documento, tanto ao criar um slice quanto ao arrastá-lo. Com Alinhar às guias (Ctrl+Shift+;) ativado, criar, mover e redimensionar slices, e mover suas linhas de 9-slice e pivôs, também se alinha às guias próximas (um slice movido encaixa pela borda mais próxima).

Auto-slice

Para cortar uma sprite sheet ou um conjunto de ícones em slices de uma vez, escolha Sprite > Auto-slice.... Ele adiciona um slice em volta de cada região pintada separada, encontrada nas camadas visíveis do quadro ou só no cel ativo. Pixels que se tocam em um canto contam como uma região. Defina:

  • Distância para mesclar: regiões cujas caixas delimitadoras estão a essa quantidade de pixels de distância ou menos (ou se sobrepõem) viram um só slice. 0 mantém todas as regiões separadas.
  • Largura mín. e Altura mín.: regiões menores são ignoradas.

A caixa de diálogo mostra quantos slices serão adicionados. Eles recebem os nomes "Slice 1", "Slice 2" e assim por diante, de cima para baixo e depois da esquerda para a direita, depois dos slices que você já tem, e toda a execução é um único passo de desfazer. Cada um é exportado como qualquer outro slice.

Selecionar, mover e redimensionar

Com a ferramenta Slice:

ParaFaça
Selecionar um sliceClique nele. Um slice selecionado tem contorno contínuo e oito alças quadradas.
Selecionar mais de umShift+clique ou Ctrl+clique para adicionar um slice à seleção ou tirá-lo dela.
DesmarcarClique em um ponto vazio ou pressione Esc.
MoverArraste dentro de um slice. Todos os slices selecionados se movem juntos.
RedimensionarArraste uma das alças.
Abrir as propriedadesClique duas vezes nele.

Onde slices se sobrepõem, um clique escolhe o que foi criado por último.

Cada arrasto é um passo de desfazer, não importa quantos slices ele tenha movido.

Centro 9-slice

Um slice 9-slice é dividido em uma grade de nove partes pelo retângulo do seu centro. Quando a arte é esticada (um botão ou a moldura de uma caixa de diálogo em um jogo), os cantos ficam como foram desenhados, as bordas esticam em uma direção, e o centro preenche o resto.

  • Ativar: clique com o botão direito no slice e escolha Definir 9-slice. O terço do meio do slice vira o centro, mostrado como quatro linhas pontilhadas cruzando o slice.
  • Ajustar: selecione o slice e arraste qualquer uma das quatro linhas pontilhadas.
  • Definir com exatidão: use 9-slice (centro) na caixa de diálogo Propriedades do slice.
  • Desativar: clique com o botão direito e escolha Remover 9-slice.

O centro precisa ficar dentro do slice.

Pivô

O pivô é um ponto que seu jogo pode usar como âncora do slice: os pés de um personagem, o ponto em torno do qual um sprite gira. Ele aparece como uma pequena mira.

  • Definir: clique com o botão direito no slice onde quer o pivô e escolha Definir pivô. O pivô vai para o pixel em que você clicou.
  • Mover: selecione o slice e arraste a mira.
  • Remover: clique com o botão direito e escolha Remover pivô.

O pivô pode ficar fora do slice.

Slices que mudam ao longo da animação

A posição, o tamanho, o centro e o pivô de um slice podem mudar de um quadro para outro, enquanto o nome continua o mesmo. Vá até o quadro em que ele deve mudar e edite o slice ali (arrastando, ou mudando em Propriedades do slice). Esse quadro ganha sua própria key: a nova geometria vale a partir desse quadro, até o próximo quadro com uma key própria. Editar no primeiro quadro muda a geometria do próprio slice.

Para desfazer uma mudança a partir de um quadro, vá até ele, clique com o botão direito no slice e escolha Remover key do slice (mostrado apenas em quadros que têm key própria), ou exclua a key na caixa de diálogo Propriedades do slice. A geometria anterior a ela então continua.

Propriedades do slice

Clique duas vezes em um slice com a ferramenta Slice, escolha Propriedades do slice... no menu de clique com o botão direito dele, ou escolha Sprite > Propriedades do slice... (que abre o último slice criado; a caixa de diálogo pode alternar para qualquer outro). Ela tem:

  • Slice: qual slice você está editando, quando o sprite tem mais de um.
  • Nome, e os limites: X, Y, Largura e Altura, em pixels do sprite.
  • 9-slice (centro), com Centro X, Centro Y, Centro L e Centro A.
  • Pivô, com Pivô X e Pivô Y.
  • Keys, quando o slice muda ao longo do tempo: cada quadro com geometria própria, com Ir para e Excluir key.
  • Dados do usuário: uma cor e uma nota, gravadas nos dados do sprite sheet junto com o slice.
  • Excluir slice.

O centro e o pivô são medidos a partir do canto superior esquerdo do slice, como no Aseprite. A caixa de diálogo edita o slice como ele está no quadro atual; salvar uma mudança em um quadro posterior dá a esse quadro uma key.

O menu de clique com o botão direito

Clique com o botão direito em um slice com a ferramenta Slice para:

ItemO que faz
Propriedades do slice...Abre a caixa de diálogo acima.
Duplicar sliceAdiciona uma cópia chamada "nome copy", com todas as suas keys, e a seleciona.
ExcluirExclui o slice.
Definir 9-slice / Remover 9-sliceAdiciona um centro ou o remove.
Definir pivô / Remover pivôColoca o pivô onde você clicou, ou o remove.
Remover key do sliceRemove a key deste quadro (apenas em quadros que têm uma).

Cada um deles é um passo de desfazer.

Excluir slices

Selecione slices com a ferramenta Slice e pressione Del ou Backspace, use Excluir no menu de clique com o botão direito, ou Excluir slice em Propriedades do slice. Com a ferramenta Slice ativa e slices selecionados, Editar > Excluir exclui os slices em vez de pixels.

Slices quando a tela muda

Redimensionar, recortar, aparar, girar e inverter o sprite move e redimensiona os slices junto com a arte (Redimensionar, recortar e efeitos).

Para onde os slices vão

  • Exportar pode salvar apenas um slice, ou cada slice como seu próprio arquivo: escolha em Área em Arquivo > Exportar... (Abrir, importar e exportar).
  • Arquivos do Aseprite mantêm todos os slices, com suas keys, centro, pivô e dados do usuário, nos dois sentidos (Abrir, importar e exportar).
  • Sprite sheets: os dados JSON listam cada slice no formato do Aseprite: o nome, a cor e a nota dos dados do usuário, e uma key por quadro em que ele muda, com os limites, o centro e o pivô, escalados junto com a sheet.
  • Scripts podem adicionar, ler, alterar e remover slices (Slices na referência de scripting).