Sitio web oficial de FairyGUI: https://www.fairygui.com/
El manual oficial ya es muy completo, pero es fácil perderse cuando hay demasiado contenido, por lo que aún puede registrar los puntos clave, que pueden considerarse como un tutorial de resumen muy simple.
1. Primeros pasos con FairyGUI Editor
Tutorial del editor FairyGUI: https://www.fairygui.com/docs/editor/component
1.1 Componentes y Componentes Básicos
Un componente es el nodo raíz (Panel) y un componente se refiere a un elemento específico de la interfaz de usuario, como imágenes, texto y botones, que son los componentes más básicos. Para facilitar la edición, puede colocar varios componentes en un grupo .
El editor también se divide en modo de vista previa y modo de ejecución, la animación y algunas configuraciones (como invisible) solo se pueden probar en el modo de ejecución
1.2 texto
En comparación con el texto , el texto enriquecido también puede admitir interacción, texto y gráficos combinados y sintaxis Html. Por supuesto, no importa cuál admita la sintaxis UBB , use texto ordinario tanto como sea posible de acuerdo con las diferentes necesidades.
Las fuentes admiten la importación de sus propios archivos TTF
Es demasiado problemático configurar la fuente cada vez que agrega texto. Puede configurar la fuente predeterminada a través de Archivo → Configuración del proyecto → Valores predeterminados → Fuente, y se usará como la fuente predeterminada global
- SDFAA : el método de representación de fuentes que se puede modificar es SDFAA. Este método de representación es consistente con Unity TextMeshPro. Basado en el texto de representación SDF, se puede ampliar infinitamente y mantener claro. Se pueden lograr efectos de trazo, brillo, suavizado y otros. casi sin gastos generales.
1.3 Cargador y controlador
Este concepto es exclusivo de FGUI, por lo que es relativamente desconocido cuando vi esta palabra por primera vez.
- Cargador: muchos recursos de imagen/animación en la interfaz de usuario se cargan dinámicamente, como mostrar el avatar del jugador, mostrar la imagen en el enlace URL o mostrar el modelo RT del jugador, etc., necesita usar el cargador
El recurso al que apunta la URL del cargador puede ser una imagen, una animación o un componente. Si se selecciona la imagen de la derecha, el valor aquí se borrará automáticamente al publicar. Después de todo, a menudo lo especifica el programa. en tiempo de ejecución
- Controlador: una de las funciones principales de FGUI, que puede hacer que los componentes/componentes tengan múltiples formas diferentes y se puedan cambiar fácilmente. El ejemplo más clásico de aplicación es el botón. Además, también puede realizar el cambio de pestañas, etc.
Cuando cambia la página que se muestra actualmente en el componente, el cambio del componente se establece a través de la columna de control de propiedades
Por ejemplo, después de la configuración anterior, el componente actual solo se muestra en las dos páginas de Tab1 y Tab2, y la posición puede ser diferente
Según tengo entendido, el controlador es el soporte subyacente de FGUI para ayudar al programa a realizar algunos cambios de estado en la Vista
1.4 botones
El botón parece simple, pero la lógica en realidad es más complicada.
Dado que cualquier cosa (texto, imagen, incluso un área aparentemente transparente) puede ser un botón que activa un evento de clic, el botón es un componente predeterminado en FGUI
Los componentes de botón se pueden agregar a través de Recursos → Nuevo botón. La operación del botón en FGUI es equivalente a la operación de múltiples controladores del componente, y cada controlador corresponde a un estado del botón.
Un ejemplo es la producción de pestañas, los pasos son los siguientes :
- Cree un nuevo botón, configure el modo en modo de radio y deje el resto solo:
- Agregue imágenes o texto a los componentes de botón correspondientes y ajuste el control de propiedad para darse cuenta de la diferencia entre hacer clic (no seleccionado) y presionar (seleccionado)
- Cree un nuevo componente con varias páginas, cada página es una pestaña, y copie varias copias de los botones en ② (el número corresponde al número de pestañas, o puede usar una lista) y arrástrelos a este componente, o use un lista de botones también puede
- Modifique las propiedades de conexión, cuando se haga clic en el botón (seleccionado), cambiará a la página especificada, ¡listo!
1.5 Sistema Asociado
El segundo sistema central FGUI: se utiliza para controlar la interacción entre los componentes, mantener la relación entre los componentes y se puede utilizar para implementar múltiples funciones importantes, como el diseño y el diseño de puntos de anclaje en Unity.
Cabe señalar que la función de controlar dinámicamente el tamaño de la lista de acuerdo con la cantidad de elementos no está implementada actualmente en el editor y se puede modificar llamando a la interfaz GList.ResizeToFit en el código.
2. Recursos avanzados
2.1 Animación
- Adobe Animate CC/Flash y otras animaciones de edición y animaciones de cuadros : arrástrelos directamente al editor o agregue cuadros de secuencia de animación a través de Recursos → Nueva animación
- Efectos de movimiento simples, como animación de traducción/rotación : interfaz de operación similar a Flash, solo configure fotogramas clave
- Animación del esqueleto de la columna
2.2 lista
Después de crear una nueva lista, primero configure los componentes de la unidad (recursos del proyecto) que se muestran en la lista y edite los datos, prestando atención a los siguientes tres elementos, y otros aún pueden referirse a documentos oficiales
- Procesamiento de desbordamiento: puede lograr el efecto de desplazamiento de ScrollView de Unity
- Modo de selección: como una pestaña que tiene un estado seleccionado al mismo tiempo, corresponde al modo de selección única
- Control de selección: se puede vincular un controlador, de modo que cuando cambia el elemento seleccionado en la lista, el controlador también salta a la página con el mismo índice al mismo tiempo. Y viceversa, si el controlador salta a una página determinada, la lista también selecciona el elemento con el mismo índice al mismo tiempo.
3.3 Recursos compuestos
3. Notas del editor
3.1 Lista de visualización
Cabe señalar que, aunque hacer clic en el botón del ojo puede ocultar el componente, solo se oculta en el editor. Si desea ocultarlo en el juego, debe configurar la propiedad básica → invisible para modificarlo.
Además, algunos componentes se configuran con control de propiedades: solo se muestran en ciertas páginas de componentes, para facilitar la modificación y la referencia, puede hacer clic en el botón del segundo ojo a la izquierda para abrirlo y mostrarlo en todas las páginas, por supuesto, esto también es una operación de editor, la lógica real no debe mostrarse o no se mostrará
Grupo y grupo avanzado : seleccione uno o más componentes en el escenario y luego presione Ctrl+G para crear un grupo. Las funciones del grupo ordinario y del grupo avanzado son completamente diferentes. El grupo ordinario solo se usa para el diseño auxiliar. Los componentes en estos grupos realizan operaciones unificadas y los grupos avanzados pueden operar la lógica en tiempo de ejecución, como controlar la visibilidad de todo el grupo
3.2 Función de dibujo de diseño
Dado que el componente recién agregado será un nodo secundario de un determinado componente en la mayoría de los casos, y el fondo de la interfaz de usuario no se puede ver al editar el componente, puede configurar el diagrama de diseño para que pueda tener una referencia
3.3 Gestión de paquetes de recursos
Todos los paquetes se muestran en el repositorio y se pueden ordenar y filtrar
Para proyectos a gran escala, es mejor poner algunos recursos y componentes comunes de uso común en algunos paquetes de recursos específicos, y usar estos paquetes de recursos como paquetes de materiales públicos al editarlos y agruparlos , y consultar directamente los recursos en estos paquetes al hacer el interfaz de usuario real más tarde, lo que reduce una gran cantidad de duplicación de trabajo
Si desea que el recurso correspondiente se use en otro paquete, o se puede crear dinámicamente en el código, debe configurar el recurso para exportar (hay un pequeño punto rojo en la esquina inferior derecha del icono del recurso exportado)
3.4 Liberación del paquete
Esta parte puede referirse directamente al sitio web oficial. Si desea mostrar la interfaz de usuario en el juego, necesita la biblioteca de tiempo de ejecución U3D FGUI correspondiente: https://github.com/fairygui/FairyGUI-unity/releases
Una referencia de configuración perfecta:
Simplemente use la configuración global para la configuración del paquete