Importar SVG no Godot: Texture2D, DPITexture e ícones nítidos

A importação SVG do Godot normalmente transforma o SVG em pixels quando o recurso é importado. Ampliar essa textura pode, portanto, parecer borrado mesmo quando o SVG original contém traçados vetoriais limpos. Para ícones SVG que precisam se adaptar à escala da viewport, o importador atual também oferece DPITexture, que pode rasterizar novamente o SVG original para outro fator de sobreamostragem. O Godot documenta as duas rotas no guia de importação de imagens.

Comece conferindo o recurso importado e como o projeto o redimensiona. Traçar novamente um SVG já válido não corrigirá uma textura de baixa resolução esticada em uma tela maior.

Escolha o tipo de importação SVG pelo comportamento de exibição

As duas escolhas abaixo descrevem os tipos de recurso do painel Import. O próprio DPITexture herda de Texture2D, então não são famílias de classes sem relação. A referência de DPITexture também marca a classe como experimental; confira a documentação correspondente à versão do Godot do projeto antes de adotá-la.

A importação de textura fornece um recurso de textura. Trate edição de traçados, formas de colisão e desempenho como requisitos separados; um nome de arquivo SVG não comprova que algum deles seja tratado. Para uma cena no navegador, compare as rotas de geometria e textura do PixiJS para ver como o mesmo SVG pode seguir outro caminho até o renderizador.

O SVG original e seus pixels renderizados

Confira primeiro uma importação Texture2D padrão

Use um recurso representativo antes de mudar uma pasta inteira de ícones. Escolha uma forma com borda curva, espaço estreito e qualquer pequeno detalhe importante na interface.

1. Coloque o SVG no projeto e selecione-o no painel FileSystem.
2. Abra o painel Import e confirme que o tipo de importação é Texture2D.
3. Inspecione SVG > Scale e Process > Size Limit e reimporte depois de mudar uma opção.
4. Posicione a textura no sprite ou componente de interface desejado e confira seu tamanho de exibição.

SVG > Scale muda o tamanho da rasterização; um valor maior cria uma imagem maior. Também afeta o tamanho da textura em 2D, então revise as dimensões do nó ou layout após alterá-lo. Process > Size Limit pode limitar as dimensões importadas. Os dois controles são descritos na referência do importador de texturas.

Como exemplo simples de tamanho, um raster de 32 pixels de largura exibido em 128 pixels de tela está sendo ampliado. As curvas vetoriais do SVG original não adicionam pixels a esse raster já importado. Gere uma textura adequada a esse uso ou teste DPITexture onde a sobreamostragem se encaixar na interface.

Evite aumentar a escala de todo SVG por um multiplicador grande arbitrário. Primeiro estabeleça o maior uso real e inspecione também o menor. Um recurso que parece bom em uma prévia grande de inventário pode perder um espaço estreito em um botão minúsculo.

Use DPITexture com as configurações certas de sobreamostragem

Para testar a rota adaptativa, selecione o SVG no painel FileSystem, mude o tipo de importação para DPITexture e reimporte. Reutilize o mesmo posicionamento na interface para que a comparação responda a uma pergunta: mudar a rota de rasterização resolve a divergência nas escalas desejadas?

DPITexture mantém dados do SVG original e pode produzir um raster correspondente à sobreamostragem. Seu base_scale controla a escala da textura de origem; não transforma o recurso em traçados editáveis de cena. Veja a documentação da classe DPITexture.

Há dois casos de escala a conferir:

• Escala da viewport: a sobreamostragem de imagens do Godot pode renderizar novamente a arte vetorial original quando o fator de escala da viewport muda. Ative isso para um SVG importando a imagem como DPITexture.
• Escala do nó: a sobreamostragem baseada em Scale de um Node2D ou Control fica desativada por padrão. Ative Oversampling with Scale no nó relevante quando precisar desse comportamento.

O guia de sobreamostragem do Godot explica essa distinção. Também observa que mudanças frequentes de escala podem exigir trabalho de CPU porque a textura é renderizada novamente. Teste a escala animada na cena que será entregue antes de aplicar amplamente a opção.

O editor 2D pode reamostrar automaticamente conforme você muda o zoom, sendo uma prévia útil. Execute também o projeto e teste o comportamento real da viewport. Com o modo de esticamento Viewport, a cena é desenhada primeiro no tamanho base da viewport e depois redimensionada para a janela; essa escala final ainda pode determinar a aparência da interface. A documentação de modos de esticamento descreve a diferença para o modo Canvas Items.

Prepare arte que o Godot possa reproduzir

Uma mudança no importador resolve um problema de tamanho de renderização. Objetos ausentes ou silhueta alterada precisam de uma verificação da arte original.

Procure traçados reais

Abra o SVG em um editor vetorial e selecione sua arte visível. Se o ícone inteiro for um bitmap posicionado único, investigue antes de ajustar o Godot. O elemento <image> de SVG pode conter conteúdo raster, como explica a referência do elemento na MDN. Rasterizar novamente esse contêiner não reconstrói as curvas limpas que um pequeno PNG incorporado nunca teve.

Use a lista de verificação de raster incorporado para distinguir pixels posicionados de formas editáveis. Se existe um arquivo mestre vetorial, exporte a partir dele. Se está preparando um conjunto, mantenha tela e espaçamento interno consistentes com o guia SVG de kit de interface.

Converta texto decorativo em traçados

O importador SVG do Godot não renderiza texto SVG editável. Converta letras decorativas em traçados na cópia de entrega, preservando um arquivo mestre com texto editável. No Inkscape, o comando relevante é Path > Object to Path. O Godot inclui o procedimento em Importação de imagens SVG com texto.

Para um rótulo de botão que precisa de localização ou edição frequente, mantenha-o como texto de interface e importe o ícone separadamente. Converter uma interface inteira em contornos dificultaria essas mudanças posteriores.

Teste efeitos complexos separadamente

O Godot usa ThorVG para renderização SVG. O interpretador SVG do ThorVG tem um limite de suporte definido; sua visão geral de SVG lista animação, interatividade e multimídia entre os recursos não aceitos. Capacidades gerais do mecanismo ThorVG não garantem que um recurso SVG específico funcione pelo importador do Godot.

Se uma insígnia perder um detalhe, compare o SVG exportado com uma cópia feita de formas preenchidas simples. Adicione os efeitos necessários de volta, um por vez. Mantenha uma exportação raster quando ela preservar arte complexa de forma mais confiável e o projeto não precisar de formas de origem escaláveis.

Não elimine uma abertura estreita na simplificação apenas para reduzir a complexidade do arquivo. O teste de aceitação é a silhueta desejada, incluindo seu espaço negativo.

Diagnostique a primeira divergência visível

Registre arquivo de origem, tipo de importação, escala SVG, escala do nó, configurações de viewport e tamanho de exibição esperado. Altere então a configuração relacionada ao sintoma.

No Godot 4, a filtragem de texturas 2D é configurada pelas propriedades de CanvasItem, com um padrão do projeto. Um tutorial antigo pode direcionar a uma configuração de importação que não pertence mais ali. O manual de importação de imagens documenta a mudança. A filtragem pode mudar a aparência dos pixels existentes; não repara detalhe ausente na arte original.

Para desfoque que também aparece fora do Godot, siga o diagnóstico mais amplo de SVG pixelado. Ele ajuda a identificar se a borda ruim já existe antes de o mecanismo receber o arquivo.

Aceite o ícone na interface real

Teste os menores e maiores posicionamentos desejados de ícones em fundos claros e escuros. Confira curva, espaço mais estreito e transparência ao redor da borda. Redimensione a janela em execução, teste qualquer controle de escala de interface disponível ao usuário e teste animação de escala do nó se a interface a usa.

Repita a verificação em uma compilação de destino. Mantenha as configurações escolhidas de importação junto do recurso de origem para outro colaborador reproduzir o resultado. Em um conjunto de ícones, teste mais que a silhueta mais fácil: inclua o ícone mais denso e aquele com o detalhe importante mais fino.

Um pequeno arquivo SVG de origem não evidencia menor uso de memória de GPU. As duas rotas discutidas aqui produzem texturas raster para exibição. Meça os recursos importados e a cena real quando memória ou tempo de quadro orientarem a escolha.

Como isso funciona com o PerfectVector

O PerfectVector entra antes da importação no Godot quando a única imagem original é um PNG ou JPG de cores chapadas e você precisa de formas SVG editáveis. Envie um ícone representativo ao conversor de imagem para vetor do PerfectVector, compare seu contorno traçado e espaços internos com o original e inspecione o SVG baixado antes de escolher o tipo de importação do Godot.

Aceite o traçado somente quando a forma estiver correta. Remova uma forma de fundo indesejada, confira se as regiões desejadas continuam editáveis e confirme que pequenas aberturas sobrevivem à limpeza. Faça então as mesmas verificações de tamanho e sobreamostragem do Godot usadas para um SVG existente.

Mantenha fotografias, efeitos pintados suaves e pixel art intencional como raster quando esse for o resultado desejado. Um ícone geométrico simples pode ser mais fácil de desenhar diretamente. Traçar é útil para reconstruir formas da arte original; não configura o importador do Godot nem valida o jogo final.

Perguntas frequentes

O Godot pode importar arquivos SVG? Sim. A importação Texture2D padrão rasteriza um SVG no momento da importação. O importador atual também oferece DPITexture para imagens SVG que precisam de rerasterização com sobreamostragem. Confira a documentação da versão do projeto; DPITexture está marcado como experimental.

Por que meu SVG fica borrado no Godot? Confira se um raster importado fixo é exibido maior que suas dimensões de pixels. Inspecione também esticamento da viewport, filtragem, sobreamostragem da escala do nó e conteúdo raster incorporado. Corrija a causa antes de traçar ou substituir o arquivo original.

DPITexture preserva traçados SVG editáveis na cena? Ele mantém o SVG original para rerasterização, mas é um recurso de textura. Importá-lo não fornece um fluxo de edição de traçados de cena nem cria automaticamente a geometria de colisão necessária ao jogo.

Fontes

1. Godot — Importação de imagens — Define tipos de importação SVG, preparação de texto, limitações do renderizador e configurações de filtro de textura.
2. Godot — DPITexture — Documenta herança, SVG original mantido, escala e status experimental.
3. Godot — Múltiplas resoluções — Explica esticamento da viewport, sobreamostragem de imagens, configurações de escala do nó e custos de rasterização repetida.
4. Godot — ResourceImporterTexture — Descreve escala raster e controles de limite de tamanho do importador padrão de texturas.
5. ThorVG — Sobre o ThorVG — Define o limite de suporte do interpretador SVG.
6. MDN — Elemento image de SVG — Explica como um SVG pode conter arte raster.

---

Se seu ícone do Godot começa como PNG ou JPG de cores chapadas e precisa de formas editáveis, converta sua imagem com o PerfectVector. Confira silhueta, pequenos espaços e traçados de fundo indesejados e teste o SVG nos tamanhos de exibição e configurações de escala usados pelo projeto.