This is the 17th day of my participation in the August Text 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

FairyGUI introduction

She provides a powerful UI editor, the interface is similar to Photoshop, friendly and simple. Instead of scripts and configuration files that require code-thinking, design or art can easily learn and produce interfaces.

There are so many functions: basic buttons, images, rich text, progress bars, sliders, lists, trees

The more advanced are animation, controllers, correlation systems, loaders, Windows, and dynamic effects

Support the engine also very much: Unity, Unreal, Cocos, ThreeJS, Egret, LayaAir etc more than ten game engine

Through simple operation to achieve complex functions, improve development efficiency, UI production efficiency, effectively reduce the work of coupling.

What’s more, it is open source github.com/fairygui

You can also go to the official community ask.fairyguenterp and find the answer

Officials also have learning tutorial at www.fairygui.com/docs/guide/

FairyGUI effect demo

video

FairyGUI and UGUI analogy

From a fundamental point of view

UGUI is based on the Unity editor, compared with the previous UI technology solutions have a great improvement, although the expansion is stronger, but to achieve more dazzling, more elegant, or from the program point of view to extend the development cycle and personnel occupation

FariyGUI is a standalone editor that can be visually implemented with a click of the mouse. Although it has a bit of poor scalability, FairyGUI can basically achieve all the desired effects, and even the most advanced effects can be extended after learning about FairyGUI.

From a technical perspective

Unity’s anchor system is excellent, with a quick default of a dozen anchor tools to help developers locate quickly, but there are drawbacks, as anchor points are for the parent object, so you have to consider all kinds of parent-child relationships, which can be confusing.

In addition to its official anchor system, FairyGUI also has its own association system, where any two components are linked without regard to any parent-child relationship, much like the relative layout in Android.

FairyGUI is significantly more in terms of the number of base components provided, and FairyGUI is much faster to implement in terms of animation effects

From a holistic perspective

The UGUI still operates within the Unity compiler, not separate from the project. If you need some dynamic effects, you need to write code, which is likely to be coupled for multiple developers

FariyGUI really does separate out the UI, and she does it all in her UI editor, no code required

Key to FairyGUI is the ability to divide up the work modules properly, such as the UI to the front-end developers or UI designers (our company has a lot of idle time on the front end and UI), which takes the pressure off Unity development and allows other staff to get moving and shorten the development cycle from a project perspective.

Of course, the cost of communication may be some at the beginning. The node naming hierarchy needs to be agreed with each other. It is also good for employees to run in and improve their friendship

So try it out in a project, and the author of this series has already applied it in a real project.

Note: this content is based on the official documents to learn the notes, there are official content also have their own understanding

Used in the FairyGUI editor

The project file structure of FairyGUI

​

.objs Internal data directory. Note: Do not add versioning, because the content is not shared.

The contents of assets package are placed in the directory, which contains all the resources and contents. It can also be divided into different packages for easy management (see the picture below).

Settings Directory for placing the configuration file.

****. Fairy project identification file, which is the project name

​

The corresponding display in the editor is as follows:

​

Compiler main interface

​

Note the display list on the left sidebar, arranged in order of display, with components further down the list appearing earlier. You can drag and drop change symbols in the list to change their position in the display list.

Dynamic effect timeline

​

Add the action effect in the left functional area and double-click the action effect to enter the timeline

​

  1. The time display is in seconds
  2. Participate in the dynamic effect of each element and attribute, the element names can name some specification, after if want to be in Unity with code control is also convenient (because the code control is the need to use name to find), on the right shows the attributes (XY – change the position, Size – change Size, rotate Rotation – change, and change the transparency, color, Zoom, tilt, visibility, sound, vibration, filters, etc.). To add a new attribute, right-click the symbol on the stage (central operation area)
  3. Timeline of each property.Represents a key frame,To use interpolating animation between two key frames (right click to create Tween, support customization: after selecting the key frame, there is a slow function in the right function area)​ ，The red flag means that this keyframe has a Label,Frame listening can be implemented through code access by label name(such as walking to a frame to perform other logic).
  4. In the information display area, FPS is the frame rate, which is modified at the top of the inspector in the right function area; Frame is the current frame from which the play starts; Time Indicates the time of the playback header, in seconds
  5. Zoom in/out on the timeline. When the editing effect is long, zoom it out
  6. You can operate on the same timeline as the Unity timeline. The left button contains radio/multiselect/drag, and the right button contains convert to keyframe/Clear keyframe/Insert frame/Create or delete Tween, etc

Today the small empty has learned this, we will see you next time!!

👉 other

📢 author: Xiaokong and Xiaoshi nakoko 📢 Reprint: be sure to indicate the source: Zhimen’s personal homepage (juejin. Cn). 📢 welcome to like 👍 collect 🌟 message 📝