任务48：用FairyGUI 做登录注册界面并应用到项目中

这节我们尝试用FairyGUI 做登录注册界面应用到项目中。

Global下面的Camera添加StageCamera脚本

把FairyGUI插件的StageCamera脚本挂到相机上面（FUI会创建在最前面，加入到Camera中进行渲染）。

把这个Camera作为Canvas的渲染相机

用FairyGUI-Editor软件制作登录界面UI

FairyGUI编辑软件中的操作不多讲，大家自行练习不难掌握，甚至可以用Psd文件直接生成FGUI文件。

下载 FairyGUI-Editor软件

下载本课用到的LandLogin界面的FUI项目 LandLords_Client02_FUI_Proj.zip 。

用FairyGUI-Editor软件打开FUI_Proj项目，输出FUI资源到Unity项目中 \Assets\Res\FairyGUI

在发布设置的全局设置中，指定发布到我们前端项目的\Assets\Res\FairyGUI目录下。发布后，FUI资源就输出到我们的前端项目中了。

同时选中已经导入到Uinty中的的三个FUI资源，创建 landfui.unity3d 的 AssetBundle。
如果是unity2019，你需要一个个选中都设置assetbundle为 landfui.unity3d

到这里除了代码外，就都准备好了，来梳理一下吧。

本节练习提供的起始项目中已经带有：

FairyGUI for Unity插件，在 \Assets\ThirdParty\FairyGUI 目录下

FairyGUI 兼容ET UI的组件，在 \Assets\Model\Module\FairyGUI 目录下

我们制作了：

场景中创建了Loading图片，放在Canvas下面

场景中创建了Camera挂FairyGUI的StageCamera脚本作为Canvas的渲染相机

导入LandLogin 界面FUI资源，并创建 landfui.unity3d的 AssetBundle

最后我们加入创建LandLogin界面的代码

（上图中FUIHelper.cs有类名冲突，改名为UIEventType.cs ）

在前端的Init.cs中添加UI组件与FUI组件

//添加UI组件
Game.Scene.AddComponent<UIComponent>();
Game.Scene.AddComponent<FUIPackageComponent>();
Game.Scene.AddComponent<FUIComponent>();

//执行斗地主初始事件，也就是创建LandLogin界面
Game.EventSystem.Run(UIEventType.LandInitSceneStart);

Run的参数UIEventType.LandInitSceneStart是如何关联到我们定义的事件方法的呢？

如下面代码，我们只需要给定义的事件方法加上[Event(UIEventType.LandInitSceneStart)]特性，就可以用Game.EventSystem.Run() 方法调用对应的事件方法。（接下来UIEventType.cs中有定义）

创建脚本 \Assets\Model\Landlords\LandUI\UIEventType.cs

using System;
using System.Collections.Generic;

namespace ETModel
{

    public static partial class FUIType
    {
        public const string LandFUI = "LandFUI";
        public const string LandLogin = "LandLogin";
        
    }

    public static partial class UIEventType
    {
        //斗地主EventIdType
        public const string LandInitSceneStart = "LandInitSceneStart";
    }
    
    [Event(UIEventType.LandInitSceneStart)]
    public class InitSceneStart_CreateLandLogin : AEvent
    {
        public override void Run()
        {
            RunAsync().Coroutine();
        }

        public async ETVoid RunAsync()
        {
            FUIComponent fuiComponent = Game.Scene.GetComponent<FUIComponent>();
            //实际比例
            float ratioCurrent = fuiComponent.Root.GObject.actualWidth / fuiComponent.Root.GObject.actualHeight;
            //设计比例
            float ratioDesign = (float)1280 / (float)720;
            if (ratioCurrent > ratioDesign) //当前屏幕宽度超出
            {
                fuiComponent.Root.GObject.x -= (fuiComponent.Root.GObject.actualHeight * ratioDesign - fuiComponent.Root.GObject.actualWidth) / 2;
            }
            else if (ratioCurrent < ratioDesign)//当前屏幕高度超出
            {
                //Log.Debug("物体高度：" + self.Root.GObject.height + "物体宽度：" + self.Root.GObject.width + "真实高度" + self.Root.GObject.actualHeight + "真实宽度" + self.Root.GObject.actualWidth + "屏幕高度" + Screen.height + "屏幕宽度" + Screen.width);
                //真实设计高度 - 屏幕真实高度
                fuiComponent.Root.GObject.y -= (fuiComponent.Root.GObject.actualWidth / ratioDesign - fuiComponent.Root.GObject.actualHeight) / 2;
                //Log.Debug("理想高度为：" + self.Root.GObject.width / ratioDesign);
            }

            //加载一次FUI资源
            await Game.Scene.GetComponent<FUIPackageComponent>().AddPackageAsync(FUIType.LandFUI);

            //创建登陆界面
            LandLoginFactory.Create();
        }
    }

}

通过Game.Scene获取FUIComponent组件实例

FUIComponent fuiComponent = Game.Scene.GetComponent<FUIComponent>()

需要加载一次FUI的Package资源，在代码中第一次需要调用生成FUI界面时，执行一次AddPackageAsync()方法
await Game.Scene.GetComponent<FUIPackageComponent>().AddPackageAsync(FUIType.LandFUI);

还记得前面FairyGUI编辑软件中的发布设置吗，FUIType.LandFUI指的就是FUI资源的包名。

LandLoginFactory，LandLoginComponent类，使用FGUI时这两个类中创建界面与调用其中元件的方法有所不同。

LandLoginFactory组件

\Assets\Model\Landlords\LandUI\LandLogin\LandLoginFactory.cs

using FairyGUI;

namespace ETModel
{
    public static class LandLoginFactory
    {
        public static void Create()
        {
            FUIComponent fuiComponent = Game.Scene.GetComponent<FUIComponent>();
            //从整个LandFUI资源包中取得并创建LandLogin登录界面资源
            FUI fui = ComponentFactory.Create<FUI, GObject>(UIPackage.CreateObject(FUIType.LandFUI, FUIType.LandLogin));
            fui.Name = FUIType.LandLogin;
            //给fui添加LandLoginComponent组件，此组件是给UI元件添加事件方法
            fui.AddComponent<LandLoginComponent>();
            //把登录界面fui添加到全局的FUI组件中
            fuiComponent.Add(fui);
        }
    }
}

LandLoginComponent.cs

\Assets\Model\Landlords\LandUI\LandLogin\LandLoginComponent.cs

namespace ETModel
{
    [ObjectSystem]
    public class LandLoginComponentAwakeSystem : AwakeSystem<LandLoginComponent>
    {
        public override void Awake(LandLoginComponent self)
        {
            self.Awake();
        }
    }

    public class LandLoginComponent : Component
    {
        //获取组件
        public FUI AccountInput;
        public FUI PasswordInput;
        public FUI Prompt;

        //是否正在登录中（避免登录请求还没响应时连续点击登录）
        public bool isLogining;
        //是否正在注册中（避免登录请求还没响应时连续点击注册）
        public bool isRegistering;

        public void Awake()
        {
            //获取父级"包"
            FUI LandLogin = this.GetParent<FUI>();

            //初始化数据
            this.AccountInput = LandLogin.Get("AccountInput");
            this.PasswordInput = LandLogin.Get("PasswordInput");
            this.Prompt = LandLogin.Get("Prompt");
            this.isLogining = false;
            this.isRegistering = false;

            //添加事件
            LandLogin.Get("LoginButton").GObject.asButton.onClick.Add(() => LoginBtnOnClick());
            LandLogin.Get("RegisterButton").GObject.asButton.onClick.Add(() => RegisterBtnOnClick());
        }

        public void LoginBtnOnClick()
        {
            //
        }

        public void RegisterBtnOnClick()
        {
            //
        }
    }
}