Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/wangjiangrong/article/details/90448284

Recently a new project to use FairyGUI, the benefits are there to facilitate fine arts fight UI interface to the program here with. So for FairyGUI carried out some simple to understand and test the hand, the official website also has detailed examples and documentation: http://www.fairygui.com/guide/

In this paper, a simple record of FairyGUI export to process and display the Unity UI interface on Unity. This demo simply draws a UI login screen, as shown in (ugly is ugly point!):

Ready to work

First download a good editor FairyGUI Editor and the corresponding unity SDK. Download Link

Then import in unity project downloaded package package, while creating a directory for storing files FairyGUI Resources exported (late of course need to use AB package to read the exported file, do not expand here).

Draw UI

analysis

As shown, it can be decomposed into two input boxes, buttons, and a plurality of two text boxes. Considering the post-maintenance, we can, for example, a button input box such common component is placed in a common package (FairyGUI package units are organizational resources), (among other packages in addition to public use for external package, other packages each other try a reference relationship does not occur).

And then placed inside a new package we want to draw the UI interface (research is not deep enough, current thinking is that a system package, such as a backpack system, store systems, personal information systems. Each bag contains several UI interface )

Draw common components

We open the editor to create a new, empty project, and then create a new package CommonPackage

Push button

After creating CommonPackage, we can start to use some of the external drag images into this directory resources for doing background button in the toolbar at the top and then we Resources -> New button to create a common button ConfirmBtn , as

Some specific set here is not cumbersome, official document which explains in great detail. At the same time and then make a CancelBtn, do the Cancel button.

Input box

Then we want to make an input box, according to the document we know, when the property of the text component to input text time, which can be turned into a text input box.

But just a simple text component, there is no border background color and other attributes. So we need to look at their optimization.

First, we create a Component Input, size 200 * 40. To add a same size, "Graphics", used to make input box base maps and borders. And then add a "text" is set to the text input as an input box, as shown in

At this point there is a problem is that when scaling component when the component size and zoom the text and will not follow, so we want to add the association.

The container assembly that is the parent controls, meaning similar, and the height and width remain the same parent control, so that we can freely zoom Input up. It is associated with a lot of options, as detailed correlation system

Export settings

Finally, we want the new three component ConfirmBtn, CancelBtn, Input, right click -> set to export, otherwise, when the drag UI using other packages, will prompt "can not drag other packages are not exported resources" mistake. (Image resources do not set export, even when released, will automatically generate export)

Draw interface

First create a new package LoginPackage, add a background image, and then create a component LoginPanel, size is 960 * 540. First, the background resource directory components directly onto remember to set the association attributes, the background is adaptively FIG. Then CommonPackage pack button directly dragged into the input box, and then add some text, and so on can be.

release

UI都做好之后，点击工具栏的文件->发布设置，编辑全局设置中，路径选择我们的Unity工程的Resources目录，点击全部发布即可（不用生成代码）。生成的文件如下：

_fui.byte文件及每个包对应的发布文件，_atlas0为按钮的两张背景图的图集，_atlas_ko9o1为界面的背景图。优化策略为，UI的一些小图，设置到图集当中，背景等大图单独导出。“单独（NPOT）”表示这张图片按原大小直接输出。注意：在Unity中，非2的幂大小的纹理不支持压缩格式，只能为RGBA或RGBA。详情见文档

Unity展示

首先在场景中创建一个GameObject，命名为UIRoot，Layer选UI，Position为(0,0,0)，为其添加组件UIContentScaler用于适配，如图

然后新建一个脚本Launch.cs，挂在UIRoot上

using FairyGUI;
using UnityEngine;

public class Launch : MonoBehaviour
{
    GComponent m_root;
    GTextInput m_inputAccount;
    GTextInput m_inputPwd;
    GButton m_confirmBtn;
    GButton m_cancelBtn;

    void Start()
    {
        //加载包
        UIPackage.AddPackage("CommonPackage");
        UIPackage.AddPackage("LoginPackage");

        //创建UIPanel
        UIPanel panel = gameObject.AddComponent<UIPanel>();
        panel.packageName = "LoginPackage";
        panel.componentName = "LoginPanel";
        //设置renderMode的方式
        panel.container.renderMode = RenderMode.ScreenSpaceOverlay;
        //设置fairyBatching的方式
        panel.container.fairyBatching = true;
        //设置sortingOrder的方式
        panel.SetSortingOrder(1, true);
        //设置hitTestMode的方式
        panel.SetHitTestMode(HitTestMode.Default);
        panel.fitScreen = FitScreen.FitSize;
        //最后，创建出UI
        panel.CreateUI();

        //根据FairyGUI中设置的名称找到对应的组件（注意输入框的查找）
        m_root = panel.ui;
        m_inputAccount = m_root.GetChild("InputAccount").asCom.GetChild("Input").asTextInput;
        m_inputPwd = m_root.GetChild("InputPwd").asCom.GetChild("Input").asTextInput;
        m_confirmBtn = m_root.GetChild("ConfirmBtn").asButton;
        m_cancelBtn = m_root.GetChild("CancelBtn").asButton;

        //密码框显示*号
        m_inputPwd.displayAsPassword = true;

        //添加点击事件
        m_confirmBtn.onClick.Add(OnClickConfirm);
    }

    void OnClickConfirm()
    {
        Debug.Log("account:" + m_inputAccount.text + "     pwd:" + m_inputPwd.text);
    }
}

因为创建UIPanel的时候，FairyGUI会自动创建一个Stage Camera用于渲染UI界面。所以我们将原场景的Main Camera删除，或者剔除UI层的渲染。

大功告成，运行即可！

FairyGUI and Unity simple entry