初级弹窗制作
# 初级弹窗教程
本教程的目的是学会一些初级简单的CSS,以及一些简单的弹窗结构的搭建。
思路整理:
目的是,有一个属性叫【金币】,然后是制作一个弹窗,里面包含两个按钮,一个是增加金币,一个是减少金币,并且能在弹窗里面看到当前的金币数量。
# 建立所需要的属性和控件
- 新建一个属性,命名为【金币】(如果没有场景需要新建一个场景,这里就不做演示了)
- 新建5个控件,分别暂时命名为【打开弹窗】【标题】【显示金币】【增加金币】【减少金币】,这些名字只是暂时的为了做区分
# 制作外部弹窗控件
- 双击控件【打开弹窗】,修改控件属性,控件名称修改为【调整金币】
- [覆盖按钮文本]内容修改为【打开界面】,**[按钮中显示提示]**设置为[否],控件设置修改为[控件容器(弹窗)],并依次添加控件【减少金币】【增加金币】【显示金币】【标题】
- [点击成功是否反馈]改为[否],[点击失败是否反馈]改为[否],[是否禁止显示详情]改为[是]
# 制作标题
- 双击控件[标题],修改控件属性,控件名称改为【修改金币】,别名修改为[标题],[是否隐藏(无视需求)]改为[是],[是否禁止显示详情]改为[是]。
- 接下来设置格式,打开标题控件的【UI编辑器】,接下来先把文字居中显示:选中[控件名称样式] → [添加一级样式] → [可视化编辑]开启 → 勾选 [字体大小]设置为8号字体 → 勾选[字体粗细]选择更粗 → 勾选[字体水平] 选择居中;
- 由于标题不需要按钮,我们还需要把按钮给隐藏了:选中[按钮样式] → [添加一级样式] → 勾选[显示模式]选择完全隐藏,如此标题设置完毕。
# 显示金币数量
- 双击控件[显示金币],修改控件属性,在[快捷复制ID]处获得属性【金币】的ID,控件名称改为【金币:(复制的金币属性ID)】,别名修改为[显示金币]
- 继续修改[显示金币]控件的属性,[是否隐藏(无视需求)]改为[是],[是否禁止显示详情]改为[是]
- 接下来设置它的格式,打开【UI编辑器】,选则[按钮样式],点击[添加一级样式],勾选[显示模式]选择隐藏模式。以此金币的显示设置完成
# 增加与减少金币
- 双击控件【增加金币】,设置[覆盖按钮文本]内容为[增加1个金币],[按钮中显示提示]设置为[否],[点击成功是否反馈]设置为[否],[点击失败是否反馈]设置为[否],[是否隐藏(无视需求)]设置为[是]
- 设置[点击后玩家获得属性],新增一条内容为【获得1金币】(意思就是每次点击会获得1金币)
- 最后我们来调整当前控件的的【UI编辑器】,点击【文本域样式】,勾选[显示样式]选择完全隐藏。以上我们即设置完了增加金币的按钮。
- 我们接着设置【减少金币】的按钮,所有步骤都和增加金币相同,以下是一些不同的内容,[覆盖按钮文本]内容填写[减少1个金币],[点击后玩家获得属性]内容为【获得-1金币】;如此减少金币按钮也制作完成。
# 最终效果
- 以上步骤已经全部做完弹窗加金币的内容,以下是功能展示,点击弹窗的增加和减少按钮即可完成对金币数值改变。
上次更新: 2023/12/06, 19:43:46