Para incluir um traço externo mantendo as dimensões PNG de um asset de jogo inalteradas, reserve espaço para o traço dentro de uma prancheta de tamanho fixo. No Affinity no Mac, ajuste a arte vetorizada completa com contorno dentro desse limite e, em seguida, exporte a prancheta nomeada no tamanho de pixel necessário.

Este fluxo de trabalho é para alguém que está preparando um asset vetorial pequeno para jogo, como um ícone geométrico de 32 × 32 px. Ele usa os controles da Central de Ajuda atual do Affinity para desktop. O Affinity Designer 2 tem um espaço de trabalho de exportação separado chamado Export Persona; a documentação atual do Affinity chama-o de Slice Studio. O fluxo de trabalho principal abaixo usa a caixa de diálogo Exportar atual do desktop. Documentação de exportação atual do Affinity, Documentação da Export Persona do Designer 2.

O que pode permanecer inalterado ao adicionar um traço externo?

Separe três medições antes de editar: as dimensões da forma, a arte visível incluindo seu traço e as dimensões em pixels da imagem exportada. O painel Traço do Affinity posiciona um traço centrado, interno ou externo à borda do objeto. Essas escolhas de alinhamento determinam onde o contorno ocupa espaço. Painel Traço.

Um traço externo precisa de espaço além da forma original. Se a forma já preenche o limite de saída, manter o traço completo requer uma alteração em algum lugar: reduzir ou remodelar a arte, usar espaço transparente disponível ou escalar a composição completa para o tamanho de saída necessário. Manter as posições originais das bordas, o traço externo completo e os limites de saída idênticos é geometricamente impossível quando o traço cruza esses limites.

A documentação do Affinity define um limite firme para pranchetas: objetos que se estendem além de uma prancheta são cortados em sua borda. Uma prancheta pode, portanto, manter o tamanho de exportação estável, mas não pode preservar o conteúdo do traço deixado fora desse limite. Sobre pranchetas.

A documentação oficial de exportação descreve a escolha de uma área de exportação e a alteração da largura e altura de saída. Ela não documenta um seletor que inclua traços externos transbordando enquanto preserva tanto a escala original da arte quanto um limite de imagem fixo. A abordagem suportada é ajustar a arte visível dentro da área de exportação escolhida. Caixa de diálogo Exportar, Configurações de Exportação.

Seu requisito Abordagem adequada O que muda
Manter um traço externo verdadeiro e dimensões PNG exatas Inserir a forma dentro de uma prancheta fixa Tamanho da forma ou preenchimento disponível
Manter o limite da forma existente como limite visível externo Usar um traço alinhado internamente, quando apropriado Posicionamento do contorno e área de preenchimento visível
Manter as proporções da composição completa e forçar um tamanho de saída alvo Redimensionar a imagem exportada Escala da arte nos pixels exportados
Manter a arte completa em sua escala original sem espaço disponível Aumentar a área de saída Dimensões de exportação; isso não atende ao requisito de tamanho fixo

Como ajustar um traço externo dentro de uma exportação de 32 × 32 px?

O exemplo a seguir usa um quadrado ilustrativo alinhado aos eixos com um traço externo uniforme de 2 px. Ele evita deliberadamente efeitos, traços de largura variável e detalhes de cantos projetados para que o cálculo de espaço seja claro.

Para este quadrado, a largura visível é a largura da forma mais uma largura de traço em cada lado. Portanto, uma saída de 32 px permite uma largura de forma de 32 − 2 − 2 = 28 px. O mesmo cálculo resulta em 28 px de altura. Centralizar essa forma deixa 2 px entre sua borda subjacente e cada borda da prancheta; o traço externo ocupa esse espaço.

1. Estabelecer a área de saída fixa

No Vector Studio, escolha Arquivo > Novo. Defina Unidades do documento como pixels, Largura da página e Altura da página como 32 px e ative Pranchetas. Ative Fundo transparente se o asset precisar de arredores transparentes. Para este exemplo, use 72 DPI e clique em Criar Documento. Esses controles de documento são documentados na ajuda de novo documento do Affinity. Criar novos documentos.

Se você estiver adicionando uma prancheta de exportação dedicada a um documento existente, a Ferramenta Prancheta fornece controles L e A para uma nova prancheta, seguidos de Inserir Prancheta. Insira as dimensões de pixel necessárias explicitamente em vez de dimensionar a prancheta ao redor da arte selecionada. Ferramenta Prancheta.

2. Dimensionar a forma subjacente e definir o traço

Crie ou selecione o quadrado. Abra Janela > Geral > Transformar e insira L: 28 px e A: 28 px. O painel suporta dimensões exatas e um ponto de ancoragem para transformações. Posicione o quadrado centralmente, com suas bordas subjacentes a 2 px dentro da prancheta. Painel Transformar.

Abra Janela > Vetor > Traço. Escolha um traço sólido, insira Largura: 2 px e escolha Alinhar Traço Fora. Para este exemplo simples, use uma junção arredondada. O Affinity documenta os controles de alinhamento, largura e junção no painel Traço. Painel Traço.

Ao redimensionar arte existente, verifique como seu traço escala. Escalar com Objeto controla se a largura do traço muda com uma forma fechada. O painel Transformar também tem Substituir Escala, que pode forçar propriedades, incluindo larguras de traço, a escalar. Após redimensionar, verifique novamente a largura pretendida de 2 px em vez de assumir que permaneceu constante. Controles de escala de traço, Substituição de Escala do Transformar.

3. Verificar a extensão visível completa

O quadrado de 28 px mais seu traço externo agora ocupa 32 px em cada direção. Isso é um cálculo geométrico para o exemplo declarado, não um resultado de exportação medido. Se você quiser uma margem transparente ao redor do contorno, reserve esse espaço também: uma margem de 1 px em cada lado reduz o quadrado permitido para 26 × 26 px.

Não aplique a mesma subtração cegamente a todos os assets. As junções chanfradas do Affinity podem projetar em cantos agudos, enquanto as extremidades afetam as pontas das linhas. Uma silhueta complexa precisa de inspeção de seu contorno completo, especialmente em cantos e extremidades. O cálculo de largura simples é um ponto de partida para formas regulares. Junções e extremidades de traço.

Como exportar a prancheta sem alterar suas dimensões?

Escolha Arquivo > Exportar > Exportar, então selecione uma predefinição PNG. Defina Área como a prancheta nomeada. O Affinity distingue isso de Área de Seleção, que inclui camadas sobrepostas, e Apenas Seleção, que exclui camadas desselecionadas sobrepostas. Escolher a prancheta nomeada torna a área de exportação pretendida explícita. Caixa de diálogo Exportar.

Verifique a largura e altura de saída: ambas devem ser 32 px para este exemplo. O Affinity permite dimensões alternativas e fornece Travar proporção. Evite alterar o tamanho de saída para compensar arte que ainda se estende além da prancheta; primeiro ajuste o contorno dentro do limite. Configurações de Exportação.

Inspecione a prévia de exportação antes de salvar. No Mac, ⌘1 mostra a prévia a 100%; ⌘2 mostra 200%. Verifique as quatro bordas quanto a seções de contorno cortadas e confirme qualquer margem transparente pretendida. Então escolha Perguntar Local, clique em Exportar, nomeie o arquivo, escolha seu destino e clique em Salvar. Caixa de diálogo Exportar e atalhos de prévia no Mac.

Como verificação prática final, abra o PNG salvo e inspecione suas dimensões em pixels e silhueta completa. Uma largura e altura corretas por si só não estabelecem que o traço caiba: uma imagem cortada ainda pode ser exatamente 32 × 32 px.

As fatias podem preservar o mesmo resultado de tamanho fixo?

Sim, desde que você defina a área de exportação deliberadamente. O Affinity documenta dois comportamentos diferentes de fatia: uma fatia criada a partir de um item do painel Camadas de Exportação dimensiona automaticamente para a extensão desse item e exporta seu conteúdo de camada; uma fatia desenhada manualmente inclui conteúdo de todas as camadas visíveis dentro de sua área. Exportar usando o Slice Studio.

Para uma região de exportação fixa, selecione a Ferramenta Fatia no Slice Studio e arraste uma área ao redor da arte preparada. Use o painel Transformar de suporte para definir o tamanho e a posição precisos da fatia. Escolha PNG nas opções de exportação da fatia e exporte a fatia necessária. Mantenha o traço completo dentro do retângulo da fatia, assim como faria dentro de uma prancheta. Exportar fatias.

Verifique a resolução de exportação exibida em vez de assumir que 1x sempre significa as dimensões de pixel do documento. O Affinity documenta uma relação entre escala de fatia e DPI do documento: seu exemplo de 64 × 64 px exporta a 64 × 64 px em 1x com 72 DPI, mas a 32 × 32 px em 1x com 144 DPI. Este é um problema separado de configuração de tamanho, não relacionado ao posicionamento do traço. Dimensões de fatia e DPI.

O que você deve alterar quando o resultado ainda falha?

Use o sintoma para escolher a próxima edição:

  • O PNG tem as dimensões corretas, mas seu contorno está cortado: mova ou reduza a arte até que seu traço completo caiba dentro da prancheta ou fatia.
  • As dimensões do PNG variam conforme a arte muda: verifique se você está exportando uma seleção ou uma fatia de objeto dimensionada automaticamente. Use a prancheta nomeada ou uma fatia manual dimensionada precisamente para um limite fixo.
  • A espessura do contorno muda após redimensionar: verifique Escalar com Objeto e Substituir Escala do Transformar, depois redefina a largura de traço pretendida.
  • O contorno cabe, mas o asset parece menor: verifique se largura e altura de exportação foram usadas para escalar uma composição maior para o tamanho alvo.
  • Apenas cantos agudos são cortados: inspecione o estilo de junção e extensão do chanfro antes de mudar o tamanho de toda a composição.

Essas verificações seguem as distinções documentadas entre corte de prancheta, extensões de fatia, escala de traço e redimensionamento de exportação. Elas abordam causas diferentes; alterar apenas o alinhamento do traço não resolverá todos os problemas de tamanho de exportação. Limites de prancheta, Comportamento de fatia, Controles de traço, Dimensões de exportação.

Para um fluxo de trabalho de asset de jogo repetível, estabeleça o limite de pixel necessário primeiro e faça o orçamento do contorno dentro dele. Mantenha o alinhamento externo quando essa aparência importar, ajuste a arte subjacente para dar espaço e exporte a região fixa. Isso preserva as dimensões de arquivo solicitadas enquanto dá ao traço completo espaço para renderizar.

Fontes