FairyGUI official website: https://www.fairygui.com/
The official manual is already very complete, but there are too many contents and it is easy to get lost when you just read it, so you can still record the key points, which can be regarded as a very simple summary tutorial
1. Getting Started with FairyGUI Editor
FairyGUI editor tutorial: https://www.fairygui.com/docs/editor/component
1.1 Components and Basic Components
A component is the root node (Panel), and a component refers to a specific UI element, such as pictures, text, and buttons, which are the most basic components. For the convenience of editing, you can put multiple components in a group
Editor is also divided into preview mode and running mode, animation and some settings (such as invisible) can only be tested in running mode
1.2 text
Compared with text , rich text can additionally support interaction, mixed text and graphics, and Html syntax. Of course, no matter which one supports UBB syntax, use ordinary text as much as possible according to different needs.
Fonts support importing your own TTF files
It is too troublesome to set the font every time you add text. You can set the default font through File→Project Settings→Defaults→Font, and it will be used as the global default font
- SDFAA : The font rendering method that can be modified is SDFAA. This rendering method is consistent with Unity TextMeshPro. Based on SDF rendering text, it can be infinitely enlarged and kept clear. Stroke, glow, anti-aliasing and other effects can be achieved with almost no overhead.
1.3 Loader and Controller
This concept is unique to FGUI, so it is relatively unfamiliar when I first saw this word
- Loader: Many picture/animation resources in the UI are dynamically loaded, such as displaying the player's avatar, displaying the picture in the URL link, or displaying the player's RT model, etc., you need to use the loader
The resource pointed to by the URL of the loader can be a picture, an animation or a component. If the picture on the right is selected, the value here will be automatically cleared when publishing. After all, it is often specified by the program at runtime
- Controller: One of the core functions of FGUI, which can make components/components have multiple different forms and can be switched easily. The most classic example of application is the button. In addition, it can also realize tab switching, etc.
When the currently displayed page in the component changes, the change of the component is set through the property control column
For example, after the above setting, the current component is only displayed under the two pages of Tab1 and Tab2, and the position can be different
In my understanding, the controller is the underlying support of FGUI to help the program do some state changes on the View
1.4 buttons
The button looks simple, but the logic is actually more complicated
Since anything (text, picture, even a seemingly transparent area) can be a button that triggers a click event, the button is a component by default in FGUI
Button components can be added through Resources → New Button. The operation of the button in FGUI is equivalent to the operation of multiple controllers of the component, and each controller corresponds to a state of the button
An example is the production of tabs, the steps are as follows :
- Create a new button, set the mode to radio mode , and leave the rest alone:
- Add pictures or text to the corresponding button components, and adjust the property control to realize the difference between click (unselected) and press (selected)
- Create a new component with multiple pages, each page is a tab, and copy multiple copies of the buttons in ② (the number corresponds to the number of tabs, or you can use a list) and drag them into this component, or use a button list can also
- Modify the connection properties, when the button is clicked (selected), it will switch to the specified page, done!
1.5 Associated System
The second FGUI core system: used to control the interaction between components, maintain the relationship between components, and can be used to implement multiple important functions such as Layout and anchor point layout in Unity
It should be noted that the function of dynamically controlling the size of the list according to the number of items is not currently implemented in the editor, and can be modified by calling the GList.ResizeToFit interface in the code
2. Advanced resources
2.1 Animation
- Adobe Animate CC/Flash and other editing animations and frame animations : directly drag into the editor, or add animation sequence frames through Resources → New Animation
- Simple motion effects such as translation/rotation animation : Flash-like operation interface, just set key frames
- Spine skeleton animation
2.2 list
After creating a new list, first set the unit components (project resources) displayed in the list, and edit the data, paying attention to the following three items, and others can still refer to official documents
- Overflow processing: can achieve the scrolling effect of Unity's ScrollView
- Selection mode: Like a tab that has a selected state at the same time, it corresponds to the single selection mode
- Selection control: A controller can be bound, so that when the selected item in the list changes, the controller also jumps to the page with the same index at the same time. Vice versa, if the controller jumps to a certain page, the list also selects the item with the same index at the same time
3.3 Composite resources
3. Editor Notes
3.1 Display list
It should be noted that although clicking the eye button can hide the component, it is only hidden under the editor. If you want to actually hide it in the game, you need to set the basic → invisible property to modify it
In addition, some components have set attribute control: only displayed under certain component pages, for convenient modification and reference, you can click the second eye button on the left to open it to display under all pages, of course this is also an editor Operation, the actual logic should not be displayed or will not be displayed
Group and advanced group : select one or more components on the stage, and then press Ctrl+G to create a group. The functions of ordinary group and advanced group are completely different. The ordinary group is only used for auxiliary design. The components in these groups perform unified operations, and advanced groups can operate logic at runtime, such as controlling the visibility of the entire group
3.2 Design drawing function
Since the newly added component will be a child node of a certain component in most cases, and the UI background cannot be seen when editing the component, you can set the design diagram so that you can have a reference
3.3 Resource package management
All packages are displayed in the repository and can be sorted and filtered
For large-scale projects, it is best to put some commonly used resources and common components in some specific resource packages, and use these resource packages as public material packages by editing and grouping , and directly refer to the resources in these packages when doing the actual UI later , which reduces a lot of duplication of work
If you want the corresponding resource to be used in another package, or can be dynamically created in the code, you need to set the resource to export ( there is a small red dot in the lower right corner of the icon of the exported resource)
3.4 Package release
This part can directly refer to the official website. If you want to display the UI in the game, you need the corresponding U3D FGUI runtime library: https://github.com/fairygui/FairyGUI-unity/releases
A perfect setup reference:
Just use global configuration for package settings