天工维度魔兽争霸开发者社区-全国最大的TJ集中营-原提百万联盟

标题: 【Seago.】UI系列教程（三）——简单的复合UI制作 [打印本页]

作者: Seago 时间: 2020-11-28 02:25
标题: 【Seago.】UI系列教程（三）——简单的复合UI制作
这一篇主要是上一篇的应用，我们以一个带使用次数的按钮为例，类似于物品栏中的药水。
还是老规矩，本系列教程主要讨论触发中的处理，fdf的使用不作讨论。

(, 下载次数: 34)

首先我们分析一下这个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的根节点设置隐藏即可。
(, 下载次数: 54)
就如上一篇教程所言，一个合理设计的复合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，给背景注册是没用的。
后面的教程会逐步介绍注册事件相关。

作者: 牧少皇 时间: 2020-11-28 02:31
感谢大佬教程

作者: 琉璃之梦 时间: 2020-11-28 12:30
感谢分享

作者: 东皇大帝 时间: 2020-11-28 15:26
瞅瞅看看想

作者: tancy 时间: 2020-11-28 16:56
谢谢楼主分享

作者: 来看看 时间: 2020-11-28 18:04
谢谢大佬最近在研究ui

作者: yishiwangxi 时间: 2020-11-29 12:07
感谢分享

作者: Secret放肆 时间: 2020-11-30 21:47
学习了，感谢分享。

作者: SkyNoTree 时间: 2020-12-1 10:45
为什么我设置了两个UI，一个是背景，一个是按钮，注册事件是触发另一个触发器，然后我进游戏测试时一点击UI游戏就直接崩溃

作者: Seago 时间: 2020-12-1 17:20

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

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

作者: CNWorth 时间: 2020-12-4 08:44
前来学习UI~

作者: 红颜祸水 时间: 2020-12-6 02:05
教程贴，必须赞一下

作者: 小水牛喝水 时间: 2020-12-6 09:27
感谢教学！！！

作者: guisheng123 时间: 2020-12-13 10:39

感谢大佬教程

作者: 大梦丶千秋 时间: 2020-12-13 21:40
感谢大佬分享

作者: gandi2019 时间: 2020-12-15 09:59
了解一下

作者: pspc0787 时间: 2020-12-19 13:48
很好很强大，感谢楼主分享，我想问问字体大小设置中，我更改大小数字了，为什么字体没有变大多少？

作者: Seago 时间: 2020-12-19 23:38

pspc0787 发表于 2020-12-19 13:48
很好很强大，感谢楼主分享，我想问问字体大小设置中，我更改大小数字了，为什么字体没有变大多少？ ...

触发里改UI字体大小的话，要同时改字体和大小。如果没生效可能是你的字体路径不正确。

作者: ladidadidi 时间: 2020-12-20 22:26
看看UI系列教程

作者: zxc789 时间: 2020-12-27 20:17
感谢分享

作者: qq476987726 时间: 2020-12-30 13:44
感谢大佬分享

作者: Sun丶包子 时间: 2021-1-4 11:42
谢谢分享

作者: zqrzogpg 时间: 2021-1-20 09:25
真的太需要了，谢谢大佬

作者: zMzz 时间: 2021-1-21 05:38
过来看看。

作者: fox370 时间: 2021-1-21 11:38
感谢教程

作者: nkjvxdaf 时间: 2021-1-23 16:37
感谢分享

作者: q345895843 时间: 2021-1-24 18:33
支持以下~~~

作者: redheatwei 时间: 2021-1-29 11:56
大佬牛逼666

作者: conglwar3 时间: 2021-4-23 22:10
顶学习中~~~

作者: 丶西天i 时间: 2021-4-24 07:17
感谢楼主分享

作者: 风之流动 时间: 2021-4-25 16:33
谢谢大佬的教程

作者: 山居客 时间: 2021-4-25 17:10
看看咋样

作者: han6991833 时间: 2021-4-27 18:49
感谢分享虽然看不懂j

作者: 妖精的旋律 时间: 2021-5-3 18:37
感谢大佬的教程

作者: t10201 时间: 2021-5-7 03:21
学习一下，看看

作者: 天轮 时间: 2021-5-10 18:21
支持一波

作者: jjww748 时间: 2021-7-14 17:49
还有隐藏内容...

作者: 触唤菊 时间: 2021-11-29 19:58
学习强国啊

作者: mumulol 时间: 2021-12-23 23:59
666666666666666666666

作者: xiaoqilin910 时间: 2021-12-24 18:06
很棒！不错，写的好

作者: pxihubmy 时间: 2021-12-31 19:24
感谢大佬教程

作者: 今晚不打老虎 时间: 2022-1-6 11:12
学习学习！！！

作者: 艾伦 时间: 2022-1-7 21:32
酷酷酷酷酷酷

作者: wszt1234 时间: 2022-1-13 13:39
感谢大佬教程

作者: cn52099 时间: 2022-1-20 23:47
好奇，原生的暴雪api无法实现这个功能吗，怎么我看做ui的基本都用网易的api

作者: Jared.C 时间: 2022-1-30 09:47
很详细，看看后边的内容！

作者: 一句话的事情 时间: 2022-3-19 21:24
emm跟随大佬学习一下UI

作者: 俊豪yn 时间: 2022-3-20 23:20
谢谢大佬大佬牛逼

作者: War3丶咸鱼 时间: 2022-3-21 00:58
感谢楼主的分享！

作者: 7546519a 时间: 2022-4-9 09:52
学习了~~~~~

作者: alwjs6996 时间: 2022-4-11 11:59
虚心学习，向大佬致敬虚心学习，向大佬致敬

作者: 袋鼠宝宝 时间: 2022-5-5 03:59
我来看看是啥教程

作者: qientin085 时间: 2022-5-6 10:01
谢谢分享

作者: xck_367 时间: 2022-5-14 19:59
看一下那个右下角的贴图

作者: loclo咯 时间: 2022-5-15 01:24
学习一下

作者: Seago 时间: 2022-6-7 21:22

cn52099 发表于 2022-1-20 23:47
好奇，原生的暴雪api无法实现这个功能吗，怎么我看做ui的基本都用网易的api ...

1.27版本并没有原生的UIapi，相当于把新版本的暴雪UI相关api移植给了旧版，凑活用的。

作者: raxfal 时间: 2022-7-14 14:35
感谢楼主分享

作者: yesnmm 时间: 2022-7-17 10:13
非常牛逼的教程

作者: qq3878217 时间: 2022-8-26 23:17
支持一下

作者: bziejqam 时间: 2022-10-22 20:36
感谢分享

作者: gugrviwr 时间: 2022-12-26 07:37
看看写的不错

作者: mengliulei 时间: 2022-12-27 10:37
学习了，感谢分享。

作者: VTSnow 时间: 2023-1-4 01:55
收藏学习下

作者: 木耳哥 时间: 2023-1-4 10:06
学习学习

作者: 观茶员 时间: 2023-1-18 12:42
干货学习了！！！！

作者: chance125 时间: 2023-3-9 10:49
学习了，感谢分享

作者: MoeNyanko 时间: 2023-3-14 01:13
6666666666666

作者: q332008679 时间: 2023-5-6 14:55
大神，又来看你教程啦！

作者: Güānɡ 时间: 2023-6-10 14:56
感谢大佬教程

作者: 青邶. 时间: 2023-7-30 23:55
学习学习

作者: pufmqxsg 时间: 2023-8-11 12:17
感谢分享，学习一下

作者: 大漠老悍匪 时间: 2023-8-13 19:14
天宫维度让我快乐

作者: 流行小炮 时间: 2023-8-16 15:26
感谢大佬教程

作者: eevvok 时间: 2024-2-24 02:53
支持一下，希望天工越来越好

作者: 我是谁你无关 时间: 2024-2-25 15:37
学习英雄联盟

欢迎光临天工维度魔兽争霸开发者社区-全国最大的TJ集中营-原提百万联盟 (http://bbs.mvprpg.com/)