Importacion FontAwesome como fuente iconográfica

Se ha desarrollado un componente en IdealTwin Pro que permite utilizar fuentes iconográficas, como las ofrecidas por Font Awesome, para enriquecer la interfaz de usuario (UI).

Por defecto, IdealTwin Pro incluye la versión gratuita de Font Awesome. Sin embargo, también es posible integrar cualquier otra fuente siguiendo el proceso descrito a continuación. En este ejemplo, usaremos la versión gratuita de Font Awesome como referencia.

Pasos para Integrar una Fuente Iconográfica

1. Descargar la Fuente Iconográfica

Visita la página oficial de la fuente que deseas utilizar y descarga el paquete correspondiente. Asegúrate de descomprimir el archivo descargado para acceder a los recursos necesarios.

https://fontawesome.com/download

Tanto la versión de escritorio como la de web contienen los elementos necesarios para importar y utilizar las fuentes.

2. Convertir los Metadatos al formato de Datatables en Unreal Engine

Para que Unreal Engine pueda interpretar los iconos, es necesario generar una DataTable que contenga los unicodes de la fuente. Este proceso requiere extraer información del archivo icons.json que viene con el paquete de la fuente.

Es necesario tener instalado Python en el sistema para realizar las conversiones necesarias en los archivos.

Pasos a seguir:

1. En la carpeta descomprimida, localiza el archivo icons.json, generalmente ubicado en la ruta ../fontawesome-free-x.x.x-web/metadata/.

2. Copia este archivo a la siguiente ubicación del proyecto en la carpeta de plugins: Proytecto/Plugins/IdealTwinPro/Scripts/FontIconConverter

3. Ejecuta el script de conversión incluido en el plugin. Para ello, abre una consola de comandos, navega a la carpeta del script y utiliza el siguiente comando:

py FontAwsomeToJsonDatatable.py

Este script generará un archivo llamado UE_FontAwsome_DataTable.json en la misma carpeta. Este archivo es el que se utilizará en Unreal Engine.

El script contiene comentarios detallados sobre su funcionamiento, pero no es necesario revisarlos para completar este proceso.

4. Arrastramos el archivo generado dentro del ContentBrowser.

5. En las opciones de importado, se debe definir cuál es la clase de la fila que se utilizará como importador, la cual debe ser FontIconDatatableRow para poder aplicar la importación correctamente.

Una vez completado el proceso, es posible renombrar este Asset y debería quedar de manera similar a esto:

3. Importar las Fuentes en el Proyecto

Con los datos convertidos, el siguiente paso es importar las fuentes al proyecto:

1. Localiza las fuentes en formato .oft en la carpeta descargada, normalmente en ../ofts.

2. Crea una nueva carpeta en el proyecto de Unreal para organizarlas.

3. Arrastra los archivos .oft al Content Browser de Unreal Engine.

4. Durante la importación, el sistema preguntará si deseas crear los archivos de Font automáticamente. Selecciona No en todas las opciones ya que si no creará un archivo invidual por cada uno de las fuentes importadas

5. Una vez importadas, crea un asset de tipo Font desde el menú contextual del Content Browser con Clic derecho > User Interface > Font y asigna un nombre representativo como“F_FontAwesomeFree“.

6. Abre el asset de fuente recién creado y añade las variantes importadas, asignándoles nombres que coincidan con los estilos definidos en el archivo icons.json (por ejemplo, Regular, Solid, etc.).

4. Agregar la Nueva Fuente al Asset de Estilos

Para que el widget ITw_Font_Icon pueda utilizar la fuente iconográfica, debes agregarla al asset de configuración de IdealTwin Pro UI.

Pasos:

1. Accede a los Settings de IdealTwin Pro UI.

2. Dentro del archivo de configuración, encuentra la sección Font Icon Map.

4. Agrega una nueva entrada con:

   • Un nombre identificador para la fuente.

   • El asset de fuente creado anteriormente.

   • La Data Table generada (UE_FontAwsome_DataTable.json).