【Unity】超级坦克大战（三）登录界面

标签：界面登录流程 Unity UI UILogin UIEdit

更新日期：2020年7月9日。
项目源码：在终章发布

索引

本章最佳实践
正式开始

创建UI编辑场景
创建登录界面UI实体
创建登录界面UI逻辑类
编写登录界面逻辑
编写登录流程逻辑
修改资源加载模式

本章最佳实践

UI界面管理器。

正式开始

本章我们将完善登录流程，在登录流程，用户可以看到一个友好的登录界面，登录界面将仅由登录流程来负责打开和关闭。

创建UI编辑场景

我们创建一个新场景，名为UIEdit（Main场景关闭时记得保存），UIEdit的作用主要用来编辑UI实体。

【Unity】超级坦克大战（三）登录界面_HTFramework

我们在UIEdit中创建一个Canvas画布，并设置Canvas的Canvas Scaler组件的属性如下（这是框架主环境的预制属性值，可以在框架主环境根节点下找到UI节点修改预设），并保存UIEdit场景：

【Unity】超级坦克大战（三）登录界面_游戏开发_02

然后我们选择菜单：Edit -> Project Settings…，并在Project Settings面板选中左侧的Editor选项：

【Unity】超级坦克大战（三）登录界面_HTFramework_03

我们将刚才创建的UIEdit场景使用鼠标拖到UI Environment选项里，之后，我们只需要通过鼠标双击任意UI类型的预制体，就会自动打开我们预设的UIEdit场景进行编辑：

【Unity】超级坦克大战（三）登录界面_UI_04

创建登录界面UI实体

首先，我们导入UI图片素材到项目中（我所使用的UI素材将包含在项目源码中）的Image/UI路径下：

【Unity】超级坦克大战（三）登录界面_HTFramework_05

然后在UIEdit场景的Canvas之下创建一个Panel，命名为UILogin，他即是我们的登录界面，我们将之拖拽到Prefab/UI路径下创建为预制体：

【Unity】超级坦克大战（三）登录界面_Unity_06

然后删除UIEdit场景中的UILogin，新建一个场景，也即是关闭UIEdit场景（不保存），之后我们双击UILogin的预制体，便可以使用UIEdit作为环境编辑预制体（推荐在这种模式编辑预制体，因为这种模式不允许改动上层环境，不需要解锁预制体的绑定，他会防止我们很多的误操作）：

【Unity】超级坦克大战（三）登录界面_HTFramework_07

编辑我们的UILogin（登录界面）的过程我就省略了，总之大概完成后就是如下这样一个登录界面：

【Unity】超级坦克大战（三）登录界面_UI_08

创建登录界面UI逻辑类

我们将创建一个登录界面的UI逻辑类，使其指向上文的登录界面预制体（UILogin）。

按如下步骤创建登录界面UI逻辑类：

在Project视图点击鼠标右键;
选择菜单Create -> HTFramework -> C# UILogicResident Script（常驻UI类型）;
命名为UILogin，并将存储路径选择为Script/UI；
点击保存按钮。

【Unity】超级坦克大战（三）登录界面_登录界面_09

在UILogin类中，我们修改其UIResource标记（表明此逻辑类持有的资源路径），我们将使用AssetBundle模式加载所有的资源，所以这里我们如下方式修改UIResource标记：

//第一个参数ui代表未来UILogin所指向的资源会被打入的AB包的名称
//第二个参数代表UILogin所指向的界面的资源路径（必须带后缀名）
[UIResource("ui", "Assets/Prefab/UI/UILogin.prefab", "null")]
public class UILogin : UILogicResident

编写登录界面逻辑

我们的登录界面可能是有史以来最简单的登录界面，他告诉了玩家接下来会进入的游戏的名字，然后有一个按钮点击就可以做这件事…仅此而已。

目前为止最合适的做法就是在UILogin类的OnInit中完成对登录按钮的事件绑定，毕竟，熟练掌握了MonoBehavior的那套流程，在这里同样适用：

/*【UILogin.cs】*/
    /// <summary>
    /// 初始化
    /// </summary>
    public override void OnInit()
    {
        base.OnInit();

        UIEntity.FindChildren("Button_Play").rectTransform().AddEventListener(OnPlay);
        UIEntity.FindChildren("Button_Quit").rectTransform().AddEventListener(OnQuit);
    }

UIEntity是UILogin逻辑类在实例化之后将会持有的实体，本质上也即是上文中UI实体的克隆。

所以我们直接根据路径寻找到开始游戏和退出游戏两个按钮，绑定事件即可：

【Unity】超级坦克大战（三）登录界面_Unity_10

对于这两个按钮的事件处理也非常简单，玩家选择开始游戏之后，我们直接将游戏流程切换至准备流程：

/*【UILogin.cs】*/
    private void OnPlay()
    {
        Main.m_Procedure.SwitchProcedure<ProcedureReady>();
    }

    private void OnQuit()
    {
        Application.Quit();
    }

编写登录流程逻辑

同时，我们在登录流程里面也要做一些事，当然也仅有一件事，那就是打开/关闭登录界面（进入登录流程时打开登录界面，离开登录流程时关闭登录界面，逻辑简单而清晰）：

/*【ProcedureLogin.cs】*/
    /// <summary>
    /// 进入流程
    /// </summary>
    /// <param name="lastProcedure">上一个离开的流程</param>
    public override void OnEnter(ProcedureBase lastProcedure)
    {
        Main.m_UI.OpenResidentUI<UILogin>();
    }

    /// <summary>
    /// 离开流程
    /// </summary>
    /// <param name="nextProcedure">下一个进入的流程</param>
    public override void OnLeave(ProcedureBase nextProcedure)
    {
        Main.m_UI.CloseUI<UILogin>();
    }

修改资源加载模式

到这里直接运行Main场景就能看到登录界面打开了？理论上是这样的，但别忘了作为我们的第一个实体资源的UILogin类，所使用的资源加载模式是AssetBundle，所以你必须要确保Main场景的框架环境HTFramework/Resource上的加载模式已正确切换至AssetBundle模式：

【Unity】超级坦克大战（三）登录界面_登录界面_11

（小提示：这里的Manifest Name是个不可或缺的参数，当然我们目前可以置空，后续在项目发布时再来讲他该怎么填）然后我们运行Main场景，可以看到登录界面了，不过点击开始游戏按钮之后，整个画面又消失了只剩一片空白（why？因为开始游戏按钮将整个游戏流程切换至ProcedureReady准备流程，而离开ProcedureLogin登录流程之后，登录界面会被关闭，准备流程又没有做任何的事，所以画面消失了）

【Unity】超级坦克大战（三）登录界面_HTFramework_12

到这里，我相信你应该理清了创建登录界面到使其正常工作的过程，当然这个过程本来就简单到爆，接下来我们将进行准备流程的设计与开发，事实上他们其实都是在一个模子里刻东西。

标签：界面,登录,流程,Unity,UI,UILogin,UIEdit
From： https://blog.51cto.com/u_15911199/5934043