Importar SVG en Unreal Engine: comprueba la geometría de Motion Design

SVG Importer de Unreal Engine proporciona un flujo de geometría para Motion Design. El tutorial de importación SVG de Epic describe cómo convertir archivos vectoriales 2D en geometría 3D. Empieza comprobando el complemento y la documentación de tu versión del motor y después importa una fuente pequeña cuyos huecos, colores y piezas separadas puedas reconocer.

Esa es una tarea distinta de mostrar un SVG como imagen de interfaz en tiempo de ejecución. Una vista previa de textura, un actor de escena y un renderizador de widgets son entregables distintos. Este recorrido se centra en preparar gráficos para la vía de geometría de escena y decidir si los objetos resultantes sirven para el diseño en movimiento.

El ejemplo es una insignia hueca original con un rombo separado. Es un flujo documentado para probar en tu proyecto, no un informe de una prueba de importación o extrusión en Unreal.

Elige el destino antes de cambiar el gráfico

Decide en qué debe convertirse el gráfico. Una extensión SVG por sí sola no responde a esa pregunta.

La guía de inicio rápido de Motion Design de Epic describe un complemento del editor para gráficos de emisión. Su interfaz se parece a UMG, pero incluye capacidades ajenas a los widgets. Ese parecido no demuestra que un Image UMG convencional pueda cargar archivos SVG arbitrarios.

Si mueves la misma fuente entre motores, la guía de importación SVG de Unity trata un importador y una decisión de destino independientes. Que un motor lo acepte no verifica la compatibilidad de archivos del otro.

Comprueba el complemento en tu versión del motor

La ficha del complemento SVG Importer de Epic muestra actualmente una etiqueta Beta y enumera su categoría como Experimental. Tómalo como motivo para validar la función en el proyecto que entregarás, especialmente antes de crear una dependencia importante de ella.

El tutorial oficial está etiquetado para Unreal Engine 5.4 y 5.5. La documentación actual de la API es una referencia distinta, así que no supongas que los paneles o etiquetas de un vídeo anterior coinciden exactamente con otra versión instalada.

Para configurar Motion Design, sigue las instrucciones de inicio rápido correspondientes para activar Motion Design y Storm Sync Motion Design Bridge. Comprueba que el SVG Importer correspondiente esté disponible y activado en ese proyecto. Atiende cualquier solicitud de reinicio del editor antes de investigar el gráfico.

Utiliza primero un nivel de prueba pequeño. La guía de inicio rápido describe un nivel vacío o plantilla, seguido de Motion Design > Create Defaults > Spawn. Mantén esta prueba separada de una secuencia compleja para distinguir más fácilmente un actor ausente, un problema de cámara o de configuración del complemento de una fuente mal formada.

Prepara una insignia hueca con una pieza separada

Guarda este ejemplo 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>

El trazado verde azulado forma un marco cuadrado con un centro cuadrado vacío. El rombo coral es un trazado separado, con espacio entre él y el marco. No hay rectángulo de fondo, trazo, texto, filtro, imagen externa ni animación en el archivo.

Esas omisiones son deliberadas. Permiten plantear unas preguntas útiles antes de probar una ilustración compleja: ¿permanece abierto el centro, sigue separado el rombo y se representan ambos colores como se esperaba?

Revisa también tu propia fuente en un editor vectorial. Si solo envuelve una fotografía en un contenedor SVG, la comprobación de imágenes ráster incrustadas ayuda a identificar esa situación. Cambiar el nombre o envolver un mapa de bits no proporciona los límites cerrados que necesita este ejercicio de geometría.

Conserva el maestro editable y exporta una copia de entrega. Utiliza formas rellenas cerradas sencillas como referencia inicial; añade efectos, degradados o recortes elaborados solo cuando el proyecto los necesite y puedas verificar su tratamiento. La existencia de una clase con un nombre parecido en una referencia de API no garantiza por completo la compatibilidad de la función.

Importa un archivo e identifica el recurso resultante

Elige una carpeta de contenido del proyecto para el experimento. La guía general de importación de recursos de Epic documenta el botón Import del Content Browser y la importación mediante arrastrar y soltar. Con el importador SVG correspondiente activado, selecciona el SVG pequeño y revisa las opciones específicas del importador y cualquier diagnóstico de tu versión instalada.

Si se rechaza el archivo o no aparece el importador esperado, verifica primero la versión del motor y la configuración del complemento. Simplificar el gráfico repetidamente no solucionará una función de importación no disponible.

Después de importar, identifica el tipo de recurso antes de colocarlo. La API SVGImporter de Epic incluye datos SVG, actores SVG y componentes de malla dinámica. Son distinciones útiles: un recurso de datos de origen no demuestra por sí mismo que la escena contenga la geometría prevista.

Utiliza el flujo de colocación de actores SVG de tu versión para llevar el recurso a la escena de prueba. La caja de herramientas de Motion Design incluye actores SVG. Selecciona el resultado colocado y revísalo de frente antes de cambiar profundidad, materiales o animación. Anota qué recurso y actor utilizaste para que otro compañero pueda reproducir la configuración.

Guarda los recursos importados y conserva el SVG original. La guía general de importación de Unreal explica que el contenido importado se guarda en recursos del proyecto; el archivo de origen sigue siendo importante para editar y volver a importar después.

Comprueba el hueco, el pintado y los objetos separados

Empieza con la abertura cuadrada de la insignia. Mírala sobre un fondo que contraste y desde otro ángulo si el resultado tiene profundidad. Una cara de color claro que cubra el centro puede parecer una abertura vista de frente. La comprobación de aceptación es si la región vacía prevista realmente permanece vacía.

Si el centro se rellena, revisa los subtrazados de la fuente y el comportamiento de relleno antes de añadir más efectos. La guía de problemas de huecos SVG explica por qué una zona interior pintada y una abertura real pueden parecer iguales en una vista previa plana.

Después revisa el espacio junto al rombo. Busca un puente no intencionado, una cara adicional o una región de fondo. Selecciona después los objetos que necesita la animación. Si el rombo debe moverse de forma independiente, verifica que la disposición disponible de actores y componentes permita moverlo sin cambiar el marco. Un detalle visualmente separado no demuestra por sí solo la estructura de selección deseada.

Comprueba el pintado después de la geometría. Compara el marco verde azulado y el rombo coral con la fuente bajo las condiciones de material e iluminación que utilizará la composición. No diagnostiques una cara lateral sombreada como error de color de origen solo porque sea más oscura que la frontal.

Para problemas de profundidad, la lista de comprobación de extrusión SVG proporciona preguntas sobre geometría de origen que investigar. No es una guía de comandos específica de Unreal y un aspecto correcto en esta prueba no demuestra que la malla sea estanca y apta para fabricación.

Revisa gráficos curvos y vuelve a importar deliberadamente

El ejemplo cuadrado evita las curvas, pero la mayoría de los logotipos no. La API SVGImporter de Epic describe un ajuste de calidad de conversión para transformar splines en polilíneas. Eso significa que las curvas de origen y la representación generada son elementos independientes que revisar.

Para un logotipo redondeado, comprueba la curva exterior y la abertura más pequeña a la distancia de cámara más cercana utilizada en la toma. Si los bordes parecen facetados, revisa los controles de conversión correspondientes en tu versión del motor. No definas un valor máximo arbitrario solo porque la fuente sea un vector.

La referencia versionada de SVGData para 5.4 de Epic indica que cambiar su valor personalizado de calidad activa una nueva importación y regeneración de geometría. Tómalo como motivo para guardar una referencia inicial y volver a comprobar la escena después de cambiar la fuente o los ajustes de conversión, en lugar de suponer que todo el trabajo posterior sigue intacto. Los nombres de propiedades de esa referencia no prometen su presencia en todos los paneles de versiones posteriores.

Repite las comprobaciones de huecos, espacios, materiales y control de objetos después de volver a importar. Prueba la escena en el contexto real de entrega antes de organizar todo el conjunto de gráficos. Esta guía no demuestra compatibilidad en tiempo de ejecución empaquetado, renderizado SVG equivalente al navegador ni rendimiento universal del complemento.

Cuándo un emblema ráster necesita reconstrucción

Si falta el maestro vectorial y la fuente es un emblema PNG o JPG sencillo, el flujo de imagen a vector de PerfectVector puede preparar un SVG estático candidato. Recorta el diseño, revisa el hueco y el detalle separado en la vista previa y compara el candidato con la fuente. Descarga el SVG aceptado y realiza después las mismas comprobaciones de geometría en Unreal.

La vectorización no elige las unidades de escena, ni crea una estructura de animación, ni asigna materiales de producción, ni garantiza una topología de malla concreta. Utiliza un maestro vectorial existente cuando esté disponible. Conserva como ráster las fotografías y los efectos pictóricos complejos cuando eso preserve mejor su aspecto. Para una insignia geométrica sencilla, crear directamente las pocas formas necesarias puede proporcionar más control que reconstruirlas a partir de píxeles.

Conserva un breve registro de entrega: archivo de origen, versión de motor y complemento, ajustes del importador, áreas vacías previstas, piezas que se mueven de forma independiente y distancia de cámara utilizada para revisar. Las guías de preparación de gráficos del blog tratan las decisiones de origen anteriores a este paso específico del motor.

Preguntas frecuentes

¿Puede Unreal Engine importar archivos SVG? Sí. Epic proporciona un SVG Importer utilizado con la geometría de Motion Design. Comprueba la función y la documentación de tu versión del motor y después verifica el recurso importado y el resultado en la escena.

¿Importar SVG significa que UMG puede mostrar cualquier SVG en ejecución? No. Un flujo de geometría de Motion Design no demuestra la carga arbitraria de SVG en ejecución en widgets UMG convencionales. Elige y prueba la vía de renderizado que necesita la interfaz.

¿Por qué un hueco de mi SVG aparece relleno después de importar? Revisa si la fuente contiene una abertura real o una zona interior pintada y comprueba después los subtrazados y el comportamiento del relleno. Verifica la geometría importada sobre un fondo que contraste en lugar de depender solo de su vista frontal.

¿Puedo convertir un logotipo PNG en un objeto 3D listo para Unreal? La vectorización puede recuperar formas de origen estáticas, pero no termina la escena de Unreal. Importa el SVG aceptado, revisa la geometría y los materiales generados y verifica el control de objetos que necesita tu proyecto.

Fuentes

1. Epic Games — Importación e importador SVG — Vía de geometría de Motion Design y contexto de versión del tutorial.
2. Epic Games — Complemento SVG Importer — Alcance del complemento, etiqueta Beta y categoría Experimental.
3. Epic Games — Guía de inicio rápido de Motion Design — Configuración del proyecto, alcance del editor y caja de herramientas de actores SVG.
4. Epic Games — Importar recursos directamente — Importación general mediante Content Browser y guardado de recursos.
5. Epic Games — API SVGImporter — Datos, actores, clases de malla dinámica y conceptos de conversión de splines.
6. Epic Games — SVGData, Unreal Python 5.4 — Valor personalizado de calidad documentado para esa versión y comportamiento de regeneración.

Valida la abertura de una insignia, su pieza separada y su comportamiento en la escena antes de importar el conjunto. Si solo queda un gráfico ráster, prepara un SVG candidato, revisa su geometría y comprueba el archivo aceptado en tu proyecto Unreal.