Importar SVG no Unreal Engine: confira a geometria de Motion Design

O SVG Importer do Unreal Engine fornece um fluxo de geometria para Motion Design. O tutorial do importador SVG da Epic descreve a transformação de arquivos vetoriais 2D em geometria 3D. Comece conferindo o plugin e a documentação da sua versão do motor e importe um pequeno arquivo original cujos vazados, cores e partes separadas você consiga reconhecer.

Essa é uma tarefa diferente de exibir um SVG como imagem de interface em tempo de execução. Uma prévia de textura, um ator de cena e um renderizador de widget são entregas diferentes. Este passo a passo se concentra em preparar a arte para a opção de geometria de cena e decidir se os objetos resultantes atendem ao motion design.

O exemplo é um emblema vazado original com um losango separado. É um fluxo baseado na documentação para você experimentar no projeto, não um teste relatado de importação ou extrusão no Unreal.

Escolha o destino antes de alterar a arte

Decida no que o gráfico deve se tornar. A extensão SVG, sozinha, não responde a essa pergunta.

O guia de início rápido do Motion Design da Epic descreve um plugin de editor para gráficos de transmissão. Sua interface se parece com UMG, mas inclui capacidades além de widgets. Essa semelhança não é evidência de que um Image comum do UMG pode carregar arquivos SVG arbitrários.

Se você está levando o mesmo arquivo original entre motores, o guia de importação SVG no Unity aborda outra decisão de importador e destino. A aceitação por um motor não verifica o suporte a arquivos do outro.

Confira o plugin na sua versão do motor

A listagem do plugin SVG Importer da Epic atualmente exibe um aviso Beta e lista sua categoria como Experimental. Trate isso como um motivo para validar o recurso no projeto que você entregará, especialmente antes de criar uma grande dependência dele.

O tutorial oficial é marcado para Unreal Engine 5.4 e 5.5. A documentação atual da API é uma referência separada; por isso, não suponha que os painéis ou rótulos de um vídeo antigo correspondem exatamente a outra versão instalada.

Para configurar Motion Design, siga as instruções correspondentes de início rápido para ativar Motion Design e Storm Sync Motion Design Bridge. Confira se o SVG Importer correspondente está disponível e ativado nesse projeto. Siga qualquer solicitação de reinicialização do editor antes de investigar a arte.

Use primeiro um pequeno nível de teste. O guia de início rápido descreve um nível vazio ou modelo, seguido de Motion Design > Create Defaults > Spawn. Mantenha esse teste separado de uma sequência complexa para facilitar a distinção entre ator ausente, problema de câmera ou configuração de plugin e arquivo original malformado.

Prepare um emblema vazado com uma parte separada

Salve este exemplo original como hollow-badge.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 140">
  <path fill="#147D78" fill-rule="evenodd"
    d="M24 24H116V116H24Z M46 46H94V94H46Z"/>
  <path fill="#EF8067" d="M150 30L168 48L150 66L132 48Z"/>
</svg>

O traçado verde-azulado forma uma moldura quadrada com centro quadrado vazio. O losango coral é um traçado separado, com espaço entre ele e a moldura. Não há retângulo de fundo, contorno, texto, filtro, imagem externa nem animação no arquivo.

Essas omissões são deliberadas. Elas permitem fazer algumas perguntas úteis antes de testar uma ilustração complexa: o centro continua aberto, o losango permanece separado e as duas cores são representadas como pretendido?

Inspecione também seu próprio arquivo original em um editor vetorial. Se ele apenas envolve uma fotografia em um contêiner SVG, a verificação de raster incorporado ajuda a identificar essa situação. Renomear ou envolver um bitmap não fornece os limites fechados necessários a esse exercício de geometria.

Mantenha o mestre editável e exporte uma cópia de entrega. Use formas simples, fechadas e preenchidas como referência; adicione efeitos, gradientes ou recortes elaborados apenas quando o projeto precisar deles e você puder verificar seu tratamento. A existência de uma classe com nome semelhante em uma referência de API não é uma garantia completa de compatibilidade do recurso.

Importe um arquivo e identifique o recurso resultante

Escolha uma pasta de conteúdo do projeto para o experimento. O guia geral de importação de recursos da Epic documenta o botão Import do Content Browser e a importação por arrastar e soltar. Com o importador SVG correspondente ativado, selecione o pequeno SVG e inspecione as opções específicas do importador e quaisquer diagnósticos na versão instalada.

Se o arquivo for rejeitado ou o importador esperado não aparecer, verifique primeiro a versão do motor e a configuração do plugin. Simplificar repetidamente a arte não corrige um recurso de importação indisponível.

Após a importação, identifique o tipo de recurso antes de posicioná-lo. A API SVGImporter da Epic inclui dados SVG, atores SVG e componentes de malha dinâmica. São distinções úteis: um recurso de dados de origem, por si só, não comprova que a cena contém a geometria pretendida.

Use o fluxo de posicionamento de ator SVG da sua versão para levar o recurso à cena de teste. A caixa de ferramentas do Motion Design inclui atores SVG. Selecione o resultado posicionado e inspecione-o de frente antes de alterar profundidade, materiais ou animação. Registre qual recurso e ator você usou para que outro colega possa reproduzir a configuração.

Salve os recursos importados e mantenha o SVG original. O guia geral de importação do Unreal explica que o conteúdo importado é armazenado em recursos do projeto; o arquivo de origem ainda importa para edição e reimportação posteriores.

Confira o vazado, a pintura e os objetos separados

Comece pela abertura quadrada do emblema. Veja-a contra um fundo contrastante e de outro ângulo se o resultado tem profundidade. Uma face de cor clara cobrindo o centro pode parecer uma abertura vista de frente. A verificação de aceitação é se a região que deveria estar vazia realmente continua vazia.

Se o centro é preenchido, inspecione os subtraçados e o comportamento de preenchimento do arquivo original antes de adicionar mais efeitos. O guia de solução de problemas de vazados SVG explica por que uma área interna pintada e uma abertura verdadeira podem parecer iguais em uma prévia plana.

Depois, inspecione o espaço ao lado do losango. Procure uma ponte indesejada, face extra ou região de fundo. Selecione então os objetos necessários à animação. Se o losango precisa se mover de forma independente, verifique se a disposição disponível de atores e componentes permite movê-lo sem alterar a moldura. Um detalhe visualmente separado não comprova, por si só, a estrutura de seleção desejada.

Confira a pintura depois da geometria. Compare a moldura verde-azulada e o losango coral com a arte original nas condições de material e iluminação que a composição usará. Não diagnostique uma face lateral sombreada como erro de cor da arte original apenas por ela ser mais escura que a frente.

Para problemas de profundidade, a lista de verificação de extrusão SVG oferece perguntas sobre a geometria de origem a investigar. Ela não é um guia de comandos específico do Unreal, e uma aparência bem-sucedida neste teste não comprova uma malha estanque para fabricação.

Revise a arte curva e reimporte deliberadamente

O exemplo quadrado evita curvas, mas a maioria dos logos não. A API SVGImporter da Epic descreve uma configuração de qualidade de conversão para transformar splines em polilinhas. Isso significa que as curvas de origem e a representação gerada são coisas separadas a inspecionar.

Para um logo arredondado, confira a curva externa e a menor abertura na distância de câmera mais próxima usada na cena. Se as bordas parecem facetadas, inspecione os controles de conversão relevantes na sua versão do motor. Não defina um valor máximo arbitrário apenas porque a arte original é vetorial.

A referência versionada de SVGData para 5.4 da Epic afirma que alterar seu ajuste personalizado de qualidade aciona reimportação e regeneração da geometria. Trate isso como motivo para salvar uma referência e conferir novamente a cena após mudar o arquivo original ou as configurações de conversão, em vez de supor que todo o trabalho posterior permanece inalterado. Os nomes das propriedades nessa referência não são uma promessa sobre todos os painéis de editores posteriores.

Repita as verificações de vazados, espaços, materiais e controle dos objetos após a reimportação. Teste a cena no contexto real de entrega antes de organizar o conjunto completo de artes. Este guia não comprova suporte em tempo de execução empacotado, renderização SVG equivalente à do navegador nem desempenho universal do plugin.

Quando um emblema raster precisa de reconstrução

Se o mestre vetorial está ausente e a imagem original é um emblema PNG ou JPG simples, o fluxo de imagem para vetor do PerfectVector pode preparar uma versão candidata estática em SVG. Recorte até o desenho, inspecione a abertura e o detalhe separado na prévia e compare a versão candidata com a imagem original. Baixe o SVG aceito e execute as mesmas verificações de geometria no Unreal.

A vetorização não escolhe unidades da cena, não cria um rig, não atribui materiais de produção nem garante uma topologia específica de malha. Use um mestre vetorial existente quando disponível. Mantenha fotografias e efeitos pintados complexos como raster quando isso preserva melhor sua aparência. Para um emblema geométrico simples, criar diretamente as poucas formas necessárias pode oferecer mais controle que reconstruí-las a partir de pixels.

Mantenha um registro curto de entrega: arquivo de origem, versão do motor e plugin, configurações do importador, áreas que devem ficar vazias, partes que se movem de forma independente e distância da câmera usada na revisão. Os guias de preparação de arte do blog abordam as decisões sobre a arte original antes dessa etapa específica do motor.

Perguntas frequentes

O Unreal Engine pode importar arquivos SVG? Sim. A Epic fornece um SVG Importer usado com geometria de Motion Design. Confira o recurso e a documentação da sua versão do motor e verifique o recurso importado e o resultado na cena.

Importar SVG significa que UMG pode exibir qualquer SVG em tempo de execução? Não. Um fluxo de geometria de Motion Design não comprova carregamento arbitrário de SVG em tempo de execução em widgets UMG comuns. Escolha e teste a opção de renderização necessária à interface.

Por que um vazado no meu SVG parece preenchido após a importação? Inspecione se o arquivo original contém uma abertura verdadeira ou uma área interna pintada e confira os subtraçados e o comportamento de preenchimento. Verifique a geometria importada contra um fundo contrastante, em vez de depender apenas da vista frontal.

Posso converter um logo PNG em um objeto 3D pronto para Unreal? A vetorização pode recuperar formas estáticas de origem, mas não finaliza a cena do Unreal. Importe o SVG aceito, inspecione a geometria e os materiais gerados e verifique o controle de objetos de que seu projeto precisa.

Fontes

1. Epic Games — importação + importador SVG — Opção de geometria de Motion Design e contexto de versão do tutorial.
2. Epic Games — plugin SVG Importer — Escopo do plugin, aviso Beta e categoria Experimental.
3. Epic Games — guia de início rápido do Motion Design — Configuração do projeto, escopo do editor e caixa de ferramentas de atores SVG.
4. Epic Games — importação direta de recursos — Importação geral pelo Content Browser e salvamento de recursos.
5. Epic Games — API SVGImporter — Dados, atores, classes de malha dinâmica e conceitos de conversão de splines.
6. Epic Games — SVGData, Unreal Python 5.4 — Ajuste personalizado de qualidade na versão indicada e comportamento de regeneração.

Valide a abertura, a parte separada e o comportamento em cena de um emblema antes de importar o conjunto. Se resta apenas arte raster, prepare uma versão candidata em SVG, inspecione sua geometria e confira o arquivo aceito no projeto Unreal.