【Seago.】UI系列教程（三）——简单的复合UI制作

这一篇主要是上一篇的应用，我们以一个带使用次数的按钮为例，类似于物品栏中的药水。
还是老规矩，本系列教程主要讨论触发中的处理，fdf的使用不作讨论。



首先我们分析一下这个UI大致有哪些组成：
1、背景图片
2、次数
3、用于响应的按钮

背景图片
这点不用多说，一个backdrop即可，大小、图片路径按需求设置。

次数
text表示即可，数量变更时重新设置文本内容。需要注意，数量通常是用整数记录，而text的文本需要使用字符串，这就需要将数字转换成字符串，也就有可能产生新的字符串（这里的新指的是字符串内容，而非其引用或是地址）。在《浅析异步与分车中》有提过，涉及新字符串的操作最好保持同步。
为了视觉效果，也可以增加一个背景边框，backdrop即可，背景边框的图片可以使用魔兽自带的贴图。
将次数的右下角锚定背景的右下角。
特别地：我们可以将次数这部分UI单独看作一个整体，而这个整体再作为整个按钮的儿子。因为“次数”这个部分是个整体，不光是按钮，其他的功能UI也可能会用涉及到“次数”这个部分。

按钮
即Button，大小通常和背景保持一致，按钮中心锚定背景中心。主要用于事件的响应。

这里给出简单的j代码示例，T类似。
//边长0.04
local real w = 0.04
//j中ui的类型就是integer，即整数，记录的是UI的内存地址。
//创建一个空frame，作为按钮整体的父节点。名称根据自己需要，父节点使用游戏UI，模板不需要，id通常也用不到。
//UI的类型要大写
local integer frame = DzCreateFrameByTagName("FRAME", fname, GameUI, "", 0)
//按钮的背景
local integer bd = DzCreateFrameByTagName("BACKDROP", bdname, frame, "", 0)

//次数部分。可以提取出来单独封装一个方法。
//空Frame作为父节点。并以按钮的根节点作为父节点
local integer countFrame = DzCreateFrameByTagName("FRAME", cfname, frame, "", 0)
//次数背景
local integer countBd = DzCreateFrameByTagName("BACKDROP", cbdname, countFrame, "", 0)
//次数文本
local integer countText = DzCreateFrameByTagName("TEXT", ctname, countFrame, "", 0)

//按钮
local integer btn = DzCreateFrameByTagName("BUTTON", btnname, frame, "", 0)

以上创建语句可以看到，frame是作为整个按钮的根UI，背景、按钮、次数UI的整体是他的儿子，次数UI的背景、文本是次数UI根节点的儿子，也就是他的孙子。
在不需要展示次数的按钮则不需要创建次数UI，或者对次数UI的根节点设置隐藏即可。

就如上一篇教程所言，一个合理设计的复合UI整体应该是一个树形结构，而不是单薄的平面结构。当然如果功能十分简单那么也没必要刻意地设计，这里只是为了尽可能规范的示例以为复杂的情况作准备。

设置大小，可以使用变量记录。
//按钮、背景的大小保持一致。
call DzFrameSetSize(frame, w, w)
call DzFrameSetSize(bd, w, w)
call DzFrameSetSize(btn, w, w)
//次数部分的大小
call DzFrameSetSize(countFrame, 0.02, 0.01)
call DzFrameSetSize(countBd, 0.02, 0.01)
//特别的，文本UI通常不用设置大小，默认会自适应，除非有特殊需求。
//这里对字体及字号进行设置。使用的是默认的字体。
call DzFrameSetFont(f, "fonts\\dfst-m3u.ttf", 0.009, 0)

锚点相关
//按钮背景，中心锚点根节点中心，无偏移。锚点位置的本质是整数，0-8，对应从左上角一直到右下角，4即中心。
call DzFrameSetPoint(bd, 4, frame, 4, 0.0, 0.0)
//按钮同理
call DzFrameSetPoint(btn, 4, bd, 4, 0.0, 0.0)
//次数部分
call DzFrameSetPoint(countBd, 4, countFrame, 4, 0.0, 0.0)
call DzFrameSetPoint(countText, 4, countBd, 4, 0.0, 0.0)
//次数的整体绑定给按钮的根节点或者背景。8表示右下角
call DzFrameSetPoint(countFrame, 8, frame, 8, 0.0, 0.0)

//设置背景图片。没什么特别的，就不作展示了。

如果需要添加提示信息、高亮等，可以给BUTTON注册进入、离开事件。注意，是BUTTON，给背景注册是没用的。
后面的教程会逐步介绍注册事件相关。

游客，如果您要查看本帖隐藏内容请回复

感谢大佬教程

感谢分享

瞅瞅看看想

谢谢楼主分享

谢谢大佬最近在研究ui

感谢分享

学习了，感谢分享。

为什么我设置了两个UI，一个是背景，一个是按钮，注册事件是触发另一个触发器，然后我进游戏测试时一点击UI游戏就直接崩溃

SkyNoTree 发表于 2020-12-1 10:45
为什么我设置了两个UI，一个是背景，一个是按钮，注册事件是触发另一个触发器，然后我进游戏测试时一点击UI ...

注册事件涉及到同步和异步的问题，你留意下T上面的注释。建议学习一点简单的Jass，能看懂T转J就行，UI的注册事件T确实很不方便，用J会简单很多。