|
导言 看到弯刀正式版的消息，激动之下，UI篇也就这么被催出来了。 UI篇的内容基于Lua篇，因此没看过Lua篇的最好先看一遍Lua篇 一、让弯刀显示自己的窗口界面准备事项同Lua篇，不过需要额外创建一个UIRes文件夹，并在override.txt文件里设置对应映射 1.新建一个工程此处内容同Lua篇的第一节1~3 可以直接复制Lua章节创建的LuaExample工程文件夹并改名UIExample 2.FairyGUI的客户端下载与使用部落与弯刀使用了FairyGUI作为游戏的UI接入，因此首先我们要下载FairyGUI的客户端 下载FairyGUI后，得到的是一个压缩包，将压缩包解压后，双击运行FairyGUI-Editor.exe，即可打开FairyGUI界面： 刚打开的FairyGUI界面是这样的，我们需要创建一个新的项目 新工程的项目类型选择Unity，项目名称与项目位置自行选择 创建好的FairyGUI工程样式如下 此处的具体教程可以观看FairyGUI的官网教程，我只在此处讲解需要使用的内容： 名词解释：资源库分为了包（Package）与组件（Component） 包（package） 包是FairyGUI里的打包单位，UI加载也是按包来进行加载 组件（Component） 组件是FairyGUI里的主要组成部分，按钮、列表、窗口，都可以是组件。 在游戏里，你的UI是以包为文件存放的，而组件则是包里的数据 当加载出一个窗口的时候，是以组件为单位进行加载的，一个包里则可以含有多个组件 所有的组件，要选择设置为导出（组件左侧有红色*）后，才能被打包，进而在游戏里显示，否则打包文件里是找不到的 包的设置：首先在Package1上右键-重命名，将其命名为UIExample 在界面的上方，找到发布设置按钮： 或者可以从 文件-发布设置 里打开发布设置 发布设置分为包设置与全局设置 因为包设置的内容与全局设置基本一致，只是部分内容覆盖了全局设置，因此此处对全局设置进行讲解 发布路径包的发布路径需要设置为Mod的Res/UIRes文件夹下 其他的设置维持原样即可。 资源的导入部落与弯刀官方在工坊中提供过一些界面的开源，因此本次教程我们使用的素材全部来源于开源工程里的素材。 我将工程素材整理导出如下： 下载后，在FGUI里使用顶部工具栏的：资源——导入资源包 来导入素材 第一个组件先删除原本的Component1组件 首先，我们创建一个可以点击使用的按钮，通过 资源——按钮 来创建按钮，命名为BtnClose，按如下配置，： 这样，我们便创建了一个关闭按钮。 随后，再从 资源——新建组件 创建一个组件，命名为WindowBoard，按如下配置： 分辨率设置为 1920 * 1080 是为了适配弯刀的UI画布大小，此后我们的窗口便可以方便的设置在游戏场景出现的位置。 在资源窗口双击common_windowframe_1资源，将其设置为九宫格模式 随后将其拖拽到WindowsBoard组件中，并合理的设置其大小，作为游戏窗口背景，并将之前创建的BtnClose放置于窗口上 随后，从左侧工具栏中选择
文本工具，在窗口中创建一个文本，将其字体颜色设置为白色，并将字体大小设置为合适的大小，然后往字体框内输入：消息1 同时，将文本框的轴心与锚点设置如下： 在左侧资源窗内（或选中物体后在右侧的检查器里）将按钮和文本框如下命名： 请记住这两个命名：btnClose 与 txtInfo 。在Lua控制代码里，我们将通过命名来获取UI组件。 随后，在左侧将WindowBoard设置为导出，确保组件左侧出现红色星号： 之后点击顶部发布按钮，或按F5，将UI发布到目标文件夹内即可。 3.编写Lua控制脚本在弯刀里，我们导入的FairyGUI，需要用一个Lua脚本文件进行映射，这个脚本文件官方为我们准备了一个范例，打开游戏目录的DesertLegend\ModSamples\LuaScripts\gui文件夹，找到EmptyWindow.lua.txt文件，将其复制到我们自己的LuaScripts文件夹下，并重命名为UIExample.lua.txt 使用VSCode打开Mod文件夹并新建工作区（参考Lua教程第三节），然后打开该脚本文件，可以看到里面已经定义好了许多函数。 关于五种定义的函数，注释已经讲的比较详尽了，我此处要补充的内容是： onDoShowAnimation 与 onDoHideAnimation 函数，在不需要使用时，请不要随意定义，因为这两个函数是有内部实现的，在定义了Lua里的函数后，便会替代其内部实现，导致不正常的后果。此处可翻查官方的其他GUI文件来加深理解。 总之，我们此次教程要定义和使用的，只有三个函数：onInit、onShown与onHide 在窗体文件脚本中，我们有一个默认的内置变量：self，self是弯刀定义的C#端窗体对象，具体功能与作用不做过多的了解，此处我仅将与self相关的部分主要属性与方法整理如下： 属性： self.contentPane 当前的GUI组件 方法： self:Hide() 隐藏当前窗口，会触发onDoHideAnimation（该函数的内部实现会调用onHide） self:HideImmediately(); 隐藏当前窗口，不触发onDoHideAnimation，直接触发onHide self:SetBackkeyButton(btnBack) 将btnBack设置为当前窗口的退出按钮，此函数功能用于决定按下Esc键后，自定义窗口自动调用的按钮。 self:GetWindowArgVal(key) 获取窗体创建时传入的参数 在开始写脚本前，推荐前往创意工坊下载由 菜鸡 大佬所制作的 [部落与lua]lua开发 Mod，并将该工程的API文件夹加入工作区，这样配合EmmyLua的注释功能，会让脚本写起来更舒服。 正式开始首先，尽管弯刀里，每一个Lua文件都有一个单独的Env环境，当前lua文件定义的全局函数不会影响其他lua，但是我仍然推荐定义一个本地变量表，用于存放当前脚本的所有变量，这样不仅能获得比全局变量更好的寻址优势，在日后写其他游戏的Lua脚本时也算是养成了一个较好的习惯。 在文件开头，写上 local g = {} 在onInit函数，写上： function onInit() ---@type FairyGUI.Window g.contentPane = self.contentPane g.btnClose = g.contentPane:GetChild("btnClose").asButton g.txtInfo = g.contentPane:GetChild("txtInfo").asTextField g.btnClose.onClick:Add(onClickClose) self:SetBackkeyButton(g.btnClose) end function onClickClose() self:Hide() end 讲解： ---@type FairyGUI.Window 为Emmylua的注释，配合导出的API，写起来更方便。 g.contentPane = self.contentPane 获取Window组件 g.btnClose = g.contentPane:GetChild("btnClose").asButton g.txtInfo = g.contentPane:GetChild("txtInfo").asTextField 为获取按钮与文本组件，后面的asXXX为FairyGUI里的转换类型的方法 注：尽管在Lua中，对于C#传过来的对象并不存在父类容器子类对象这一说法，但是使用类型转换快捷语法依然能够帮助Emmylua进行类型检查，以及通过运行时的错误扔出来排查Bug g.btnClose.onClick:Add(onClickClose) self:SetBackkeyButton(g.btnClose) 该段内容为设置按钮的退出函数，以及为窗体设置默认退出按钮 function onClickClose() self:Hide() end 这一块为为关闭按钮的回调函数，在这个函数里直接关闭整个窗口 4.游戏内调用UI翻查到官方WiKi，找到UI打开指令，可以看到 UI指令需要 UI包体名，组件名，脚本文件，UI参数，是否阻塞游戏指令 几个参数 我们构建Mod，启用Mod后进入游戏，在游戏控制台内输入 OPEN_GUI*UIExample#WindowBoard#UIExample##0 执行成功后，我们可以看到窗体成功出现了！ 点击关闭按钮后，窗体也可以正常关闭。
| 
发表于 2021-7-7 10:20
收藏