GS游享天龙八部 UI 功能案例精讲

3、资源加载过程

• scheme 资源(包括图像集、字体资源、窗口外观信息、类型映射)等。可以通过.scheme将 CEGUI 系统所需要的全部资源一次加载。
• Imageset 图像集，对应一张图片。Image对应该图片上一块区域。Image数量没有限制。
• CEGUI 系统的字体资源。支持两种类型的Font: FreeTypeFont / PixmapFont，即矢量字体和位图字体。
• 外观文件与渲染窗口有关。渲染窗口中定义的子窗口、命名区域在外观文件中需存在相对应的定义。外观文件定义内容非常多
• Scheme对象 ，是 CEGUI 提供的用来统一加载资源的对象。通过它利用Scheme文件，可一键加载 CEGUI 程序使用的各类资源文件。Scheme 只是统一的入口，也可以使用 CEGU 提供的各类资源加载对象加载资源。scheme会调用各类资源对象，进行资源加载。所以了解 scheme 加载即可了解各类资源加载流程。
• shcemeManager 默认是自动加载(方便一键加载资源)。可设定非自动加载，在需要时通过各资源对象加载。
• 资源加载为同步加载，大量资源加载会比较耗时。
• 同名资源，不会重复加载。

4、资源类型文档语法

• Imageset：是一系列图片或纹理的集合，包括若干Image，它们都有自己的名字。在 xml 文件中，根元素为 Imageset，包括若干Image子元素
  • 属性：
  • name：必填
  • imagefile：必填
  • resourceGroup：
  • autoScaled：
  • nativeHorzRes：
  • nativeVertRes：
• Image：
  • 属性：
  • name：名称(必填)
  • xPos：x坐标(必填)
  • yPos：y坐标(必填)
  • width：宽度(必填)
  • height：高度(必填)
  • xOffset：x偏移(选填)
  • yOffset：y偏移(选填)
• Font ：Font 即 CEGUI 中使用的字体，包括两种类型，FreeTypeFont 和PixmapFont ，前者使用标准的 .ttf 字体文件，对字体进行动态渲染，后者使用Imageset 包括了与字体对应的位图。在 xml 文件中，根元素为Font，字体类型为 PixmapFont 还包括若干Mapping 子元素
  • 属性
  • type：FreeType或Pixmap
  • name：名称（必选）
  • filename：文件（根据type选择对应的imageset或ttf）
  • resourceGroup：资源组（可选）
  • size：字体大小（可选，用于FreeTypeFont，默认12）
  • antiAlias：（可选，用于FreeTypeFont，默认true）
  • autoScaled：自动缩放（可选，支持vertical、horizontal、min、max、true、false，默认false）
  • nativeHorzRes：水平屏幕分辨率（可选，默认640）
  • nativeVertRes：垂直屏幕分辨率（可选，默认480）
  • lineSpacing：行距值（可选，用于FreeTypeFont，默认0）
• LookNFeel ：LookNFeel是 CEGUI 皮肤系统的主要部分，在xml文件中，根元素为 Falagard（CEGUI皮肤系统），包括若干WidgetLook 子元素
  • https://cegui.yulinzhihou.com/fal_man.html
• Scheme : Scheme用于组合所有的资源文件，在 xml 文件中，根元素为 GUIScheme，子元素包括 Imageset、Font、LookNFeel、WindowSet、WindowRendererSet、WindowAlias、FalagardMapping
  • FalagardMapping

  • windowType

  • targetType
  • renderer
  • lookNFeel

  • renderEffect

  • Font

  • LookNFeel

  • WindowSet

  • WindowRendererSet

  • WindowAlias

  • FalagardMapping

• Layout ：Layout即Window布局，可设置属性以及绑定事件。在xml文件中，根元素为GUILayout，只能包含一个Window子元素。

  • Window 的属性

  • type：类型（必选）指定要创建的窗口的类型。这可能指的是具体的窗口类型、别名或falagard映射的类型。必需的属性。

  • name：名称（可选）指定窗口的名称。窗口名称在系统中必须是唯一的。可选属性，如果未指定该属性，则会自动生成名称。

  • Window可嵌套使用，作为 GUILayout、Window、AutoWindow 的子元素，Window 的子元素有一定的顺序，依次是LayoutImport、Property、Event、Window 和/或 AutoWindow，最后还可以是 Property

  • Property

  • name：指定要设置的特性的名称。必需的属性。

  • value：指定要在特性上设置的值。可选属性，如果未指定该属性，则应通过元素文本内容给定要设置的值。

  • Property可能显示为 Window 元素和 AutoWindow 元素的子元素。Property 元素不能包含任何子元素。Property 元素可能包含要用作值的文本内容。

  • Event

  • name：指定要订阅由name属性指定的事件的脚本函数的名称。必需的属性。

  • function：指定将订阅function属性指定的处理程序函数的事件的名称。必需的属性。

  • Event 可能显示为 Window 元素和 AutoWindow 元素的子元素 ，Event 元素不能包含任何子元素。

  • LayoutImport

  • filename：指定要导入的 xml布局文件的路径。必需的属性。

  • resourceGroup：指定在加载“文件名”属性中给定的文件时要传递给 ResourceProvider 的资源组标识符。可选属性，默认为 WindowManager 默认组。

  • LayoutImport 可能显示为 Window 元素和 AutoWindow 元素的子元素，LayoutImport 元素不能包含任何子元素。

  • AutoWindow

  • namePath：指定目标自动窗口的名称路径。必需的属性

  • AutoWindow 可能显示为以下子元素： Window 元素 AutoWindow 元素。AutoWindow 元素；

  • 可能包含以下子元素：

    任意数量的 LayoutImport 元素。

    任意数量的 Property 元素。

    任意数量的 Event 元素。

    任意数量的 Window 元素

    任意数量的 AutoWindow 元素

    最后，任意数量的 Property 元素

• Config：Config 可以配置系统默认资源及 ScriptModule 中的脚本文件，在 xml 文件中，根元素为 CEGUIConfig，没有属性，其子元素包括 Logging、 AutoLoad、ResourceDirectory、DefaultResourceGroup、Scripting、DefaultXMLParser、DefaultImageCodec、DefaultFont、DefaultMouseCursor、DefaultTootip、DefaultGUISheet，

5、自定义属性讲解

• 属性以访问窗口的统一位置。
  • 用法：
  • 名称：UnifiedSize
  • 格式：{{[ws],[wo]},{[hs],[ho]}}
  • 参数说明：
  • [ws]：是一个浮点值，用于描述宽度的相对比例值。
  • [wo]：是描述宽度的绝对偏移值的浮点值。
  • [hs]：是描述高度的相对比例值的浮点值。
  • [ho]：是描述高度的绝对偏移值的浮点值。

• 属性以访问窗口的统一位置。
  • 语法:
  • 名称: UnifiedPosition
  • 格式: {{[xs],[xo]},{[ys],[yo]}}

  • 参数解析：

  • [ws]：是一个浮点值，用于描述宽度的相对比例值。
  • [wo]：是描述宽度的绝对偏移值的浮点值。
  • [hs]：是描述高度的相对比例值的浮点值。
  • [ho]：是描述高度的绝对偏移值的浮点值。

• 属性以访问窗口大小。 此属性提供使用绝对度量系统访问窗口大小设置的权限

  • 语法:
  • 名称: AbsoluteSize
  • 格式: w:[float] h:[float]

  • 参数解析:

  • w:[foat]：使用绝对度量系统将最小宽度指定为浮点数。
  • h:[foat]：使用绝对度量系统将最小高度指定为浮点数。

• 属性来访问 StaticImage 小部件的图像。

  • 用法：

  • 名称：Image

  • 格式：set:[text] image:[text]

  • 参数解析：

  • set：[text]是包含图像的 Imageset 的名称。图像集名称不应包含空格。指定的图像集必须已加载。

  • image ：[text] 是指定图像集上的图像的名称。图像名称不应包含空格

四、UI 功能逻辑的梳理及定位整个流程

1、 客户端 UI 查找定位思路

• 以下是查找定位 UI 所在具体位置的一些思路

• 以下是对于 UI 的一些组成，结构，加载逻辑的一些简单的说明

• interface 目录里面两个特殊的目录
  • Common
  • Schema

2、画出指定 UI 功能的联系图

• 确定指定的 UI 功能的文件，
  • 通常情况下是 sample.layout.xml 和 sample.lua 两部分组成
  • 个别情况下，只有一个 *.lua 脚本文件，而 xml 文件可能会引用公共部分的 *.layout.xml
• 什么是 xml 文件呢 ?
  • xml 文件在客户起到的是一个框架作用，里面画的格子是长方形，正方形，放什么图片，都是由 xml 来定义了
• 什么是 lua 文件呢？
  • lua 俗称脚本，在 客户端 里起到了一个灵魂舵手的作用，比如 xml 画了一个格子，在什么时候显示内容，点击 UI 右上角的叉为什么能关掉 UI ，按 ESC 键为什么也可以关闭 UI ，为什么有些 UI 又不能按 ESC 关闭，为什么点击确定会提交数据触发兑换或者升级之类的操作。都是由 lua 这个文件里面对就的程序来决定的
• 如何画一个 UI 功能的联系图。
  • 首先，你得明确你要操作的 UI 是哪里的，从哪里的入口。这个入口就是起点
  • 第二，找到入口，再根据前面的查询方式，全局搜索到指定的位置。
  • 第三，确定定位到 UI 功能的位置，就需要简单的验证一下
  • 第四，打开画图软件或者思维导图软件 WPS 就自带有这个功能，可以详细的理一下各种文件之间的关系
  • 第五，根据描述出来的关系，每个文件里面的内容及相互关系进行解读

3、翻译 UI 整个功能的客户端流程

• 首先翻译 UI 先得了解上面几个图的流程关系，能静下心去看。

• 其次，需要具备一定的代码阅读能力，不会的需要去菜鸟编程上看看文档或者找些相应的视频看一下基础

  • 菜鸟：https://www.runoob.com/lua/lua-tutorial.html
  • Lua基础视频教程：https://gsgameshare.com (暂时包含在关门弟子资源里面)
  • 注：不一定要求你会一个字母一个字母的把基础语法练习出来，只需要你知道一些固定的结构是什么意思即可

  --[ 0 为 true ]
  if (0) then  -- 这一行表示如果 0 
      print("0 为 true")  -- 打印 0 为 true
  end -- 结束
  
  
  --[ 定义变量 --]
  a = 100;
  --[ 检查条件 --]
  if( a < 20 )
  then
     --[ if 条件为 true 时执行该语句块 --]
     print("a 小于 20" )
  else
     --[ if 条件为 false 时执行该语句块 --]
     print("a 大于 20" )
  end
  print("a 的值为 :", a)
  
  --[ 定义变量 --]
  a = 100
  
  --[ 检查布尔条件 --]
  if( a == 10 )
  then
     --[ 如果条件为 true 打印以下信息 --]
     print("a 的值为 10" )
  elseif( a == 20 )
  then   
     --[ if else if 条件为 true 时打印以下信息 --]
     print("a 的值为 20" )
  elseif( a == 30 )
  then
     --[ if else if condition 条件为 true 时打印以下信息 --]
     print("a 的值为 30" )
  else
     --[ 以上条件语句没有一个为 true 时打印以下信息 --]
     print("没有匹配 a 的值" )
  end
  print("a 的真实值为: ", a )
  

• 再次，根据 UI 对应的关系，将 XML 和 lua 和对应的的逻辑翻译出来，大概明白逻辑

• lua 脚本文件注意几个函数

  • PreLoad
  • OnLoad
  • OnEvent
  • OnHiden

4、找到与之对应的服务端接口

• 接收 服务端 数据
  • Get_XParam_INT(i)
  • Get_XParam_STR(i)
  • Get_XParam_INT_Count
• 发送数据给 服务端
  • Set_XSCRIPT_Function_Name

  • Set_XSCRIPT_ScriptID

  • Set_XSCRIPT_Parameter

  • Set_XSCRIPT_ParamCount

  • Send_XSCRIPT()

5、服务端接口之间的相互关系

• 先找白名单文件 tlbb\Server\Config\AllowableScriptFuncEx.txt
• 找到对应的 Set_XSCRIPT_Function_Name 和 Set_XSCRIPT_ScriptID
  • 服务端 tlbb\Public\Data\Script.dat
• 根据 Script.dat 里面的文件找到 服务端 对应的 lua 里面的方法，以及 lua 方法里面要实现功能所调用的所有资源
• 最终，将对应的 服务端 里面关系的调用关系，画一个简图，进行分析翻译

6、翻译服务端脚本

• 同上客户端的操作

7、尝试验证 UI 功能是否查找正确

• 使用简单的打印，调试等输出的方式，来确定自己找到的 UI 流程是自己的正在触发和想要的整个流程和逻辑

• 常用的调试语句

  • PushDebugMessage
  • Notify
  • tips
  • io.write

案例一、天机锦囊增加下一页扩容

1、找到 客户端 相应的关系

• 这个时候需要梳理一下客户端之间的相互关系
• 找到客户端 UI 功能对应到客户端的脚本 lua 文件对应的方法，进行脚本文件的翻译解读。通过关系找到 服务端 对应的脚本逻辑

2、通过找到服务端的对应脚本及函数方法

• 进行脚本逻辑的解读及翻译。

3、简单画出 客户端 及 服务端 的关系图

• 进行相应的逻辑流程图。结合翻译后的脚本信息，得到基本 UI 功能的逻辑图

4、进行相应的修改

• 这里的案例是在 界面天机锦囊增加下一页的功能

5、修改 UI 功能及扩展

• 客户端 UI 界面的功能修改

• 客户端 UI 对应脚本逻辑的修改

• 服务端 对应脚本函数逻辑

• 验证测试功能

案例二、大背包背后的真像

1、找到 客户端 相应的关系

• 这个时候需要梳理一下客户端之间的相互关系
• 找到客户端 UI 功能对应到客户端的脚本 lua 文件对应的方法，进行脚本文件的翻译解读。通过关系找到 服务端 对应的脚本逻辑

2、通过找到服务端的对应脚本及函数方法

• 进行脚本逻辑的解读及翻译。

3、简单画出 客户端 及 服务端 的关系图

• 进行相应的逻辑流程图。结合翻译后的脚本信息，得到基本 UI 功能的逻辑图

4、进行相应的修改

• 这里的案例是在 界面天机锦囊增加下一页的功能

5、修改 UI 功能及扩展

• 客户端 UI 界面的功能修改

• 客户端 UI 对应脚本逻辑的修改

• 服务端 对应脚本函数逻辑

• 验证测试功能

注：此文章为GS游享原创，文章讲义与实际视频教程会有偏差，详情请咨询客服进行了解。此视频暂不对外发售，仅限关门弟子免费获取。后期会有对外的打算，请关注