【MMORPG开发日志04】登录注册场景前端制作完成

写在前面

之前的文章我们通过实现简单的登录效果来大概的学习了一下KBEngine服务器引擎的原理以及前后端通信的过程。但既然是最游戏，我们一定是希望做出更漂亮的效果来的。所以这一节我们将前端场景优化一下。
素材是我之前在泰课在线学习时候下载的一整套资源，喜欢的小伙伴可以在我的工程文件中找到素材，需要注意的是，这套素材版权归泰课在线所有，请不要用于商业用途，否则一切法律责任和本人无关。

如果文中链接失效可以和我联系。

这篇文章的视频版在这里：

====

mmorpg开发日志04

====

交流QQ群：872537977

项目地址github：

Liweimin0512/uRPG​github.com

准备工作

首先是看一下我们的效果图，将效果图和各种图片资源导入游戏中，然后通过摆放各种控件达到近似效果图的效果即可，其中效果图如下图所示：

注册登录.jpg

我们将所有资源类文件放在根目录下的Asset文件夹中，方便我们导入游戏前进行各种操作，主要是给美术和策划同学操作用的（假装这个项目不止我一个人），文件目录结构如下图所示：

Asset目录结构
这其中存放着字体、特效、模型、音效和图片等多种资源，美术和策划同学将完成的资源或制作过程中的资源存放在这个文件夹下的相应目录中，也不会污染工程环境。然后再由专人负责将正式版资源导入到前端工程中并定期维护整合即可。
虽然目前项目只有我一个人开发，但是设计一套科学合理的工作流还是很有必要的。就当是演戏了么。

注册界面

最复杂的是注册界面的制作，这个界面有背景图、标题、中间部分的输入框（4个）和下方的两个按钮组成，我们先看一下工程中的样子，如下图所示：

W_Register

这里我们将UI部件的前缀规定为"W_"，用来和代表整个界面的“UMG_”相区分。这里我们的W_Register首先是“Desired”的，我们看左侧的层级就如我上文中所说的一样。
需要注意的是，这里除了我们能看到的控件外，还包括一个“错误提示信息”Text控件，这个控件默认是隐藏的，只有当用户进行操作，才会根据用户的操作进行反馈。

输入框部分
中心的输入框部分，我们采用了一个VerticalBox控件，这个空间简单说就是将其中的项垂直排列。
可以看到一个UI中，除去Text、Image和Button三种最常见的控件外，其他多数是约束控件的控件位置的。这类控件我们不需要改名，只需要在合适的地方合理利用即可。

我们给需要控制的控件进行命名，这里我将Button用“btn_”前缀命名，输入框用“ET_”（EditorText）前缀命名。作为程序员，合理利用前缀的好处相信也就不需要我多说了。

制作动画

制作好界面后，我依然觉得单调，想到可以通过添加一个动画的方式来让界面效果更棒。这里我们就用一个简单的动画效果来介绍一下UI动画这个知识点吧，动画如下图所示：

动画制作

这里我们创建了两个动画效果，分别命名为“Register_open”和“Login_open”，顾名思义就是打开注册界面和登录界面的效果。什么效果呢？我们对Widget进行一次缩放，在0.5秒之内将其从0缩放到1（正常大小即可）。
制作方式类似PPT或者PR动画，如果你有制作PPT动画经验的话应该很好理解。首先我们选择W_Register，然后点击右侧的加号，添加一个改变的项，一层层的找到Transform > Scale > x 和 y。在0秒时候我们将x和y设为0，再在0.5秒时将其均设为1即可。
对于Login界面也是同样的操作，这里就不多提了。
完成动画制作后，我们只需要在代码（或蓝图）中合适的位置调用即可。

注册逻辑

首先，我们需要在界面初始化的时候，将ErrText中的文本内容清空，主需要将其设置为空字符串即可。
其次，还记得界面上的“取消”按钮和右上角的“X”按钮么？这两个按钮的功能是一致的，就是返回登录界面。这里我需要补充说明一下登录界面的逻辑：游戏运行时我们进入Logiin场景，这个场景默认会打开Login界面，但我们可以在Login和Register之间来回切换，来满足用户的登录和注册需求。

注册逻辑（上）
这里一个新鲜的知识点就是“事件调度器”，这东西类似C#中的委托，可以实现解耦。这里当我们点击取消按钮时，就调用了一个GoBackLogin的事件调度器，这个调度器在上一层的“UMG_Login”中注册并监听，如下图所示：
事件调度器
“UMG_Login”监听到这个事件，就会完成将Login界面显示出来（之前为隐藏），并且播放一个打开动画的效果。注册界面的事件调度器（RegisterWidgetOpen）同理，这里就不多谈了。
回到W_Register界面中，完成事件调用之后，我们将自身隐藏，并且将ErrText中的内容清空。
现在是时候搞定我们注册按钮点击事件了。要知道这个界面中需要我们处理的按钮总共也就这三个。
注册按钮点击事件
注册按钮点击事件看起来复杂，但实际上只是对输入框中信息的多次校验罢了（利用3个if节点完成）。首先判断账户是否为空，再判断密码是否为空以及两次输入的密码是否一致。如果这三个环节任一环节出现问题则显示一个错误信息。
最终我们调用ClientApp的CreateAcount方法。但这里值得注意的是，我们稍微拐了个弯，在中间绕了一层GameMode。这其实是一种代码风格问题。我们在实现功能的同时，也要思考各种蓝图的职能范围。这对于日趋庞大的工程项目是有好处的。虽然在前期看来并不明显。

LoginGameMode

正如我在前文中说的，我们这个项目将包含3个场景：

• 登录注册场景
• 选择角色场景
• 主场景
  因此对应的游戏模式（GameMode）和UI界面也将会是3套。这里我们复习一下登录场景游戏模式的主要职能。首先是BeiginPlay事件中我们进行一些常规操作，将UMG_Login创建出来并显示在viewport上，然后我们要获取ClientApp的引用并且作为一个单例持有。
  GameMode（上）
  你可能会奇怪我们忘记将鼠标显示出来了，这依然是代码风格的问题，我们创建了一个控制器，并在其中调用了ShowMouseCursor节点。但事实上，我现在已经开始思考这么做是否有必要了，因为在Login中对于角色控制器的操作应该很少。所以在后期的代码优化中我们可能删除这个蓝图，不过如今还不影响。
  BP_PlayerController
  其次，我们要对注册和登录做出响应，调用KBEngine为我们提供的两个节点即可。
  GameMode（下）
  这两个节点如上图所示，分别是Login和CreateAccount，这在前文中我们已经介绍过了，这里就不再赘述了。

登录界面

事实上登录界面就是注册界面的一个翻版（甚至更简单），因此这里我不打算讲解登录界面和相关的逻辑。感兴趣的小伙伴可以自行下载工程文件查看。

UMG_Login

最后我们要做的就是将Login和Register界面整合到登录场景主界面中，如下图所示：

UMG_Login

可以看到这个界面相当简单，只有一个背景图，以及两个Widget就实现了。
并且Register界面，初始是隐藏的。

运行调式

以往我会将运行调试的结果做成动图来给大家展示，这次因为我们会录制视频的缘故，就不做展示了，感兴趣的小伙伴可以直接到我的视频中查看即可。
这里需要注意的是，我们依然有很多可以优化的点：

• 动画时间较长，播放缓慢
• 可以将开启和关闭窗口做成一个函数，这样讲设置文本、播放动画等操作放入函数中，可以减少大量的重复节点。
• 登录场景不需要独立的角色控制器

下期预告

下一期我们要完成登录注册的后端部分，小伙伴们记得捧场哦！