下载 App

星火萌新笔记-UI篇-UI基础

精华修改于2023/12/18572 浏览主题教程
计划做一个类似幸存者危城一样探索打怪捡垃圾的游戏,因为需要的功能更多是UI功能,例如搜索箱子,武器装备合成,武器融合等。所以计划先从UI学起。 笔记暂时以UI跟触发器为主,不涉及云变量等复杂的内容。笔记的内容比较基础,琐碎。
一、UI的基础操作
1、UI的类型与ID
UI的UI类型通常用于根据子控件/下属控件获取UI时使用场景示例:
TapTap
UI的类型可通过对UI添加事件查看
TapTap
UI的ID即数遍ID,通常用于生成UI时使用场景示例:         
TapTap
2、UI通用属性设置
设置UI属性时,使用变量先保存查找到的UI,然后基于变量对UI的属性进行设置。
TapTap
TapTap
在变量类型使用错误时,UI的正确类型与变量设定的类型相同的变量可以正常设置;变量类型存在的而UI类型不存在的属性则会产生错误提示。
2.1布局-位置
位置分为相对位置与绝对位置绝对位置不受自动布局的影响,默认父控件的左上角为(0,0)点相对位置,受自动布局的影响,即受对齐方式、锚点位置与边距的影响
TapTap
2.2布局-排列方式(锚点)
UI锚点的位置会影响UI的排列方式例如:当UI的锚点为左上角时,会按照居左局上排列当UI锚点为中间时,会按照水平居中,垂直居中排列当UI锚点为右下角时,会按照居右局下排列横向排列方式对应字符串
TapTap
TapTap
竖向排列方式对应字符串
TapTap
2.3图片
2.4颜色
颜色格式为#000000(三个16进制(#(00~ff)(00~ff)(00~ff))用这个颜色格式无法设置透明度
或者也可以用rgba(255,255,255,100)用这个格式可以设置透明度
2.5渲染层级
控件显示时,相同渲染层级的控件,位于列表下方的会遮挡位于列表上方的,子控件会遮挡父控件。
当多个控件拥有同一个父控件(或者同为页面层级)时,渲染层级可以影响控件的显示位置,渲染层级较大的控件会显示在上面(层级大的遮挡层级小的)
例如:有以下几个控件,渲染层级都是默认的0,当我们将香蕉放置在背包区域时,香蕉被背包遮挡。
TapTap
如果想要使香蕉显示在背包上方,直接调整香蕉的层级是达不到想要的效果的,因为香蕉跟背包区域不在同一个父物体下,应该找到同一个父物体下的控件,即应该调高商店页面的渲染层级。
3、特殊UI说明
3.1可附着面板(attachable_panel)可以附着在地图单位身上的面板,有以下特殊属性
TapTap
需要使用触发器绑定附着的单位
TapTap
绑定后,面板会跟随物体的移动而移动,可用于制作血条、名称显示等功能
3.2动态文本(transition_label)
动态文本包含的第一段数字内容在进行改变时,预制有一个数值的改变动画
TapTap
第一个参数可以点进去调节数值动画的曲线,第二个参数是数值动画的总时间,单位为毫秒。例如:我们要将“让123乘456”改变为“让234乘567”只有123→234会有数值动画,而456→567则没有。
TapTap
在实际应用过程中,我们有时候也需要读取文本包含的数值信息,对包含的数值信息进行加减。文本信息截取的计算方式为:一个文字占3个位置,一个数字占1个位置,截取时需要从开始截取内容所在的位数截取到结束截取内容所在位数+1位例如:让123乘456
TapTap
要截取“让”字就需要从0-3截取“乘”字就需要从6-9文字截取不全会显示为问号
TapTap
正确截取演示:
TapTap
3.3多功能格子
4、为UI添加事件
4.1直接添加
4.2多个UI共用一个事件
4.3动态添加事件
4.3.1无参数事件
4.3.2带参数事件
4.3.3特殊参数说明
4.4特殊UI事件的说明
4.4.1拖拽
On-drop:当结束拖放时的位置上有开启可拖放的控件时触发,目标控件触发on-dropped对应触发器事件:
TapTap
On-throw:当结束拖放时的位置上无可拖放的控件时触发对应触发器事件:
TapTap
4.4.2拖放
on-dropped:当有控件放置到此控件上时触发对应触发器事件:
TapTap
5、UI动态生成
UI动态生成有两种方式:直接生成UI页,生成单个UI并调节属性
5.1生成UI页
生成UI页可使用以下语句
TapTap
需要注意的是,这里需要填写是通过点击UI列表右上加号创建的UI页(即与mainpage同一层级)生成UI页后最好保存至数组中。以方便之后的读取使用。
5.2生成单个UI生成单个UI
需要使用以下语句生成
TapTap
完整的动态生成UI包括以下几个步骤:
5.2.1生成UI
5.2.2绑定父子关系/将UI保存至全局变量(数组、表等)
5.2.3调节UI宽度高度、位置、图片等信息
5.2.4为UI添加事件,并传递合适的参数
星火编辑器-修改官方预制自定义物品信息模板截图
星火编辑器-修改官方预制自定义物品信息模板
大家对DIY物品信息显示都很热衷,但是在具体实现上还是比较费神费力的,这次的更新将会极大程度上减少开发者的困难,而且非常好用。 首先,需要将编辑器更新到10版本,这次的更新官方重构了物品提示信息面板,并在界面编辑器中加入了7个全新的页面: 我们所要修改的页面主要是【物品信息_物品信息模板】中的【物品信息】控件: 其中【上部属性面板】就是背包效果,【下部属性面板】就是装备效果 这两个不需要管它,我们
18 赞
3 回复
星火三消之三连检测截图
星火三消之三连检测
上一回完成了消块实例化的显示(P2)(https://www.bilibili.com/video/BV1qLeUzKEHS?spm_id_from=333.788.recommend_more_video.0&vd_source=f9c1188016e81eabc613ade954e6d482),红框部分可以看到随机生成的消块构成了三连、四连。 为了避免这一情况我们在生成消块前加入对随机到的消块
3 赞
1 回复
「自制卡牌游戏DIY」进入主线关卡页面截图
「自制卡牌游戏DIY」进入主线关卡页面
#星火编辑器 #星火编辑器入门 #星火编辑器小功能分享教程 我正在尝试使用『星火编辑器』制作一款卡牌游戏。 在前面几期,我们完成了主线选关功能的设计与制作,并且添加了提示消息滚动条的UI交互功能。今天继续平稳行驶,完善玩家从开场到进入主线选关界面过程中所需的触发器和方法。 点击关卡按钮的事件已经有了,我们还要为进入关卡的按钮创建对应的点击事件(P2) 新建一个为进入关卡按钮创建点击事
4 赞
2025年8月8日更新日志【13版本】截图
2025年8月8日更新日志【13版本】
星火编辑器开发团队正在全力研发基于C#的、深度整合AI能力的2.0版本 与此同时,我们也会对当前的13版本保持长期的支持 本次我们对13版本进行了更新和问题修复,相关更新已同步至外网13版本和线上13版本 流式加载Prefab 在数据编辑器-地图设置-高级属性中增加了「流失加载Prefab」功能,此功能可以显著的提升场景、资源较多的游戏的加载速度。 我们选择了部分资源非常多、场景非常大的游戏进行测
官方
22 赞
8 回复
无须申请,星火编辑器现已公测开放下载截图
无须申请,星火编辑器现已公测开放下载
—————————————————— 各位关注星火编辑器的小伙伴: 感谢大家一直以来对编辑器支持! 破晓已去,曙光降临! 星火编辑器现已开启公测! · 关于下载和资格申请 现已无需申请,请去下面的官方首页直接下载! 缘起测试是星火编辑器自诞生以来第一次对外测试! 从2022年八月开始到十一月,历时三个月。 缘起之后缘聚测试,历时又七个月! 缘聚之后,破晓降临,历时又十二个月! 曾经微弱的星火现已渐
官方
324 赞
374 回复
告别雷霆按钮!用NanoVG做游戏内UI编辑器,嗒小妹也能画质感UI!截图
告别雷霆按钮!用NanoVG做游戏内UI编辑器,嗒小妹也能画质感UI!
作者:浠涫 引擎:TapTap Maker (UrhoX) 分类:#开发心得 #节拍前夜 #游戏ui界面 前言 各位嗒啦啦老公老婆们,一定都懂「雷霆按钮」的痛:纯色矩形加一行白字,好一点的加个描边,没有光影、没有纹理、没有质感,一眼看过去就是「临时占位UI」,可taptap制造很多游戏直到上线,UI还长这样。(包括我游戏的正式服也只有这样的ui加一些图标) 我在开发《节拍前夜》(Rogu
精华
40 赞
9 回复
「自制卡牌游戏DIY」简易选英雄功能(2)截图
「自制卡牌游戏DIY」简易选英雄功能(2)
#星火编辑器 #星火编辑器入门 我正在尝试使用『星火编辑器』制作一款卡牌游戏。 接着上一期,我们来到这个功能的客户端部分。当玩家选中英雄,服务端将选中大英雄事件发送给客户端,并且在事件中将三个参数——选中的大英雄(单位)、是否已选择英雄(布尔)、已选择的英雄(单位)传给了客户端。那么我们找到上一期所创建的可附着面板,并将可附着面板中的控件在局部变量中进行声明(P2) 接着设计我们要选择的
「自制卡牌游戏DIY」简易选英雄功能(1)截图
「自制卡牌游戏DIY」简易选英雄功能(1)
#星火编辑器 #星火编辑器入门 #星火编辑器小功能分享教程 我正在尝试使用『星火编辑器』制作一款卡牌游戏。 在前面分享的功能中,我们已经可以让玩家选择一个主线关卡并进入跳转界面。今天接着上次的思路继续,制作玩家进入主线关卡后要跳转进入的选人界面。 还是先从界面设计开始。今天要尝试的新面板是“可附着面板”。我们打开界编组件库,从gameui中找到“可附着面板”(P2) /*科普-可附着面板
「自制卡牌游戏DIY」点击与选中反馈截图
「自制卡牌游戏DIY」点击与选中反馈
#星火编辑器 #星火编辑器入门 #星火编辑器小功能分享教程 #星火编辑器案例 我正在尝试用『星火编辑器』创作一款卡牌游戏。 前面两期我们完成了战斗界面UI相关的设计,但是还没有编写相应触发器逻辑。今天我们尝试从简单的点击与选中反馈开始,将游戏内需要的各种功能和效果一步步实现。 在很多如P2这样的优秀游戏中,都有细致的操作反馈。例如当玩家选中己方/敌方单位,该单位脚下会出现绿圈/红圈。当单位移
1 赞
1 回复
「自制卡牌游戏DIY」战斗抽卡系统(2)截图
「自制卡牌游戏DIY」战斗抽卡系统(2)
#星火编辑器 #星火编辑器入门 #星火编辑器案例 在上期内容中,我们从卡牌状态的切换打开思路,将从卡池中刷新场上卡牌逻辑用触发器一步步实现,并通过洗牌的方法确保玩家从入场卡池中刷出的卡牌具有随机性。但在此之后系统还需要将抽取的卡牌替换为新卡,并为抽到的法术卡添加法术,方可将刷出卡牌的信息完备地打包给客户端以呈现给玩家,而这正是今天要做的。话不多说,来吧。 接着上期,在对卡池中未抽取的卡牌进行
2 赞