This is the 22nd day of my participation in the August Wen Challenge.More challenges in August
π About the author
As we all know, life is a long process of constantly overcoming difficulties and reflecting on progress. In this process, there will be a lot of questions and thoughts about life, so I decided to share my thoughts, experiences and stories to find resonance!! Focus on Android/Unity and various game development tips, as well as various resource sharing (websites, tools, materials, source code, games, etc.)
π about to learn
Learn about FairyGUI in Unity from start to finish
π background
Unity 2019 x series
FairyGUI 2021.2 series
π Practice
Controller – Key points
One of the core functions of FairyGUI, it provides several requirements support:
- Paging A component can consist of multiple pages.
- Button state Buttons usually have multiple states, such as down, mouse hover, etc. We can use the controller to arrange different display content for each state.
- With controllers, we can make components have many different shapes and switch easily.
Each component can create multiple controllers without affecting each other
Click Add Controller in the component to pop up the create box
The name is the controller name, not the same name in the same component
The comment name that helps you understand the comment name will be used in conjunction with the export as component property below. Check export as component property and it will be displayed in the property area on the right when you drag this component to another component
Page you can understand as a state, since it is a controller, it is necessary to control the effect, such as button (slide/click/lift, etc.), set different action effects
You can create a separate button to see, the button above the default name of a controller button, there are four states (page)
After the controller is created and you want to use it, you select a widget and the “Properties Control” panel appears on the right side of the property bar. She has controls for display/position/size/color/appearance/animation/text etc.
She can also achieve linkage effects:
- Linkage with buttons, when clicking different buttons, jump to different pages
- Linked to lists, like Android lists, clicking on an item shows the page corresponding to the index
- Linkage with the drop-down box has the same effect as above
We will learn the specific effects in subsequent practical cases
Correlation systems
Whether it is the front end, mobile or PC side, should have this relative layout system.
For example, a RelativeLayout on mobile
FairyGUI allows any components to correlate with each other, with association options on the right, layout adaptation, dialog box adaptation, dynamically changing content, and more.
For example: when playing a game with a full screen or a small screen, the UI layout remains quite good after the interface size is modified. Think of the tianlong Eight window UI layout is this mechanism.
Buttons and drop-down boxes
Common base components, such as RadioButton, Checkbox, List Item in traditional UI frameworks, are all buttons in FairyGUI.
Note here that in order to change the effect of different states of the button, you need to select the controller in the right property control
The creation of the drop-down box is simple enough
Cut the map in advance and follow the trilogy to create it. After creating it, there will be three files
Item is the drop-down box content Item, double-click into the content can also be customized
Popup is a list control that you can also double-click to customize
Except for editing here, list requirements are mostly requested to change automatically, and FairyGUI also supports setting the contents of the item collection in code, and as with traditional collections, items in the collection can be accessed from 0 through the index. One difference is the “value” (index) above, which starts at 0 by default if you don’t write. When you modify it you need the index value that you modify. For example, in the figure above, if I didn’t change it to getIndex(0), when I changed it to 1, it would be getIndex(1)
The selected property of the common button is invalid, and multiple radio button groups are implemented in the common button controller + radio button connection mode. I haven’t uploaded it yet, I will update the link after xiaokang releases it.
Progress bar/slider bar/scroll bar
The progress bar
Can change the width/height/filling ratio of components, divided into horizontal and vertical, as well as forward and reverse; Creation is also very simple, a progress bar background, a expansion bar can be.
How do I display the current progress of the progress bar?
Double-click to enter the progress bar, add a text control, and then change the name to “title”. To follow the real-time movement of the progress bar to the right, set the association.
How to implement progress bar with follow animation?
Careful friends have found that there is also a little fox following the progress bar. When playing games and switching scenes, we often see that the progress bar is not a monotonous horizontal line, and there are small animations to follow, to enhance the flexibility.
This implementation is similar to the above text add, the difference is that if you want to drag animation, you can add a loader when editing the progress bar, the loader puts the animation file, and want to try to follow the progress bar, and then set the association between the fox and the progress bar’s expansion bar to right-right association
How to monitor the progress bar?
The biggest function of the progress bar is to be combined with the program and used for loading and process progress nodes, so we should be able to modify and monitor the progress bar
slider
It’s like a progress bar twin, but it has a button you can drag to change the value of your progress.
It’s easy to create just go to Resources > New slider and add it as prompted
You can also customize her style if you want.
π other
π’ author: Xiaokong and Xiaoshi nakoko π’ Reprint: be sure to indicate the source: Zhimen’s personal homepage (juejin. Cn). π’ welcome to like π collect π message π
β