This is the 24th 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

window

The window is full of tricks, you can set up any component as her display content, and the window supports dragging.

Window style content you need to edit ahead of time in FairyGUI, and once it’s done it needs to be managed in Code in Unity.

Window win = new Window();

GRoot provides some common apis for window management.

  1. BringToFront brings the window to the front of all Windows.
  2. CloseAllWindows hides all Windows. Note not destruction.
  3. CloseAllExceptModals hides all modeless Windows.
  4. GetTopWindow returns the window currently displayed at the top.
  5. HasModalWindow Whether a modal window is currently displayed.

Dynamic efficiency – focus

Another important point is that FairyGUi is easy to make dynamic UI in addition to static UI

We talked about dynamic effects in the main page of the compiler. Refer to the official documentation for more illustrations.

adapter

Have done Android development know that adaptation is a physical work, a minute to develop three minutes adaptation, even if the beginning of sufficient experience or the use of toutiao adaptation, the follow-up may still need adaptation.

FairyGUI provides mobile games with A UI strategy that automatically ADAPTS to device resolutions. Select a design resolution of the image (usually a full screen interface) to develop, run according to the device will be scaled to the SCREEN UI.

There is an interesting mechanism: if the whole thing needs to be enlarged twice, a window of 400 by 400 will be projected to the screen as 800 by 800, but when you read the width and height of the window with the code, it will still be 400 by 400 and the coordinates will not change.

In addition to equal scaling, there is one point that needs to be paid attention to – full-screen. Now some full-screen phones have elongated height, while others have normal height. Most phones have basically the same width, which leads to different aspect ratios, so some adjustments need to be made:

If you are using a UIPanel, set the Fit Screen to Fit Size in the Inspector

Many languages

trilogy

  1. Now make your interface in FairyGUI and finally adapt to multiple languages, click “Tools – String Import and Export” and export it
  2. Make a copy of the exported file and start the translation. After the translation, change the file suffix and put it in the same place as the exported file (folder in Unity).
  3. Code dynamically loads the language file fairygui.utils.xml XML = new fairygui.utils.xml (fileContent);

UIPackage.SetStringsSource(xml);

Note: languages cannot be switched dynamically and in real time. To cut English or English cut middle, you need to destroy all uIs and uninstall all packages first

Import and export

This function is similar to what happens in Unity, which is the.unitypackage suffix and FairyGUI. Fairypackage suffix file.

FairyGUI helped us unplug from Unity and boost productivity, so the thinking man started pushing his luck again,

Although the transition from a pure Unity implementation to a UI was done piece-by-piece without code, the UI still required manpower and events to be developed in FairyGUI after drawing.

Well, that’s a bit extreme, can you automatically generate FairyGUI from the UI diagram? Kidding, but there is: PSD2fGUI, but it may not satisfy everyone’s project needs, only as an auxiliary tool.

Psd2fgui open source: github.com/fairygui/ps… From the name, we can see that she converted PSD to FGUI.

Prepare the PSD file first:

​

Use a layer name or group name to express its type and purpose, as shown in the image above. Here are the details of the agreement:

The name of a Button group starts with Button to indicate that the group is a Button. A layer within a group whose name contains a special string as defined below. Recommended as a suffix), indicating the special meaning of this layer:

The @ Up layer is only displayed when the button is in the Up state

@over This layer is only displayed in the over state of the button

@ Down This layer is only displayed when the button is down

@selecteDover This layer is only displayed in the selectedOver state of the button

The @title text is used as the title of the button

The @icon image is used as an icon for a button

A component group name starting with Com indicates that the group is a component. Components can be nested.

The transformation extraction is done with the command, and the resource bundle is imported in FairyGUI.

Unity USES

Using the edited UI in Unity is also easy

  1. Unity downloads the FairyGUI plugin and imports it
  2. Place the Resources published in Fairy GUI into the Unity project folder, Resources
  3. If the first step is successful, right click on your scene Hierarchy to give the FairyGUI option and create a UIPanel
  4. In UIPanel select your Package Name in FairyGUI, and ComponentName select your main scene component
  5. Display success, you can also add UIContentScaler script to set resolution related

👉 other

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