如何使用高级界面制作道具商城
发表时间: 2018-08-09 15:25:07 阶段:高级 分类:实例应用
一、道具商城作用
道具商城是承载着作品中卡牌、兵器等一些附属道具的购买界面。道具商城能更直观的在作品中展示购买系统,增大作品体验。
 
二、具体步骤
前期准备:商城界面底图、商城所售卖商品的展示图、购买按钮底图以及关闭按钮底图。
 
 
1. 点击制作界面下方【数值设置→设置初始数值】设置一个初始数值,命名为:【金钱】,初始值:10000,确定。(初始值可以根据你自己的实际需要进行设置)
 
2. 点击【高级界面→“+”新增界面】
 
 
3. 替换准备好的商城底图,点击左上角【原创素材】,插入所需要的商品图片,移动的合适的位置
 
 
4. 点击上方选择界面,【选择界面组件→按钮】添加一个按钮组件,双击进入按钮编辑界面,替换按钮底图,更改命名为【购买】,【返回上一级】界面,把按钮移动到合适的位置。(需要多个相同按钮,可以点击右侧【组件库】拖拽该命名按钮到容器界面内)
 
 
5. 点击上方选择界面,【选择界面组件→按钮】添加一个按钮组件,双击进入按钮编辑界面,替换按钮底图,更改命名为【返回】,【返回上一级】界面,把按钮移动到合适的位置
 
 
6. 点击上方选择界面,【选择界面组件→文本】添加一个新的文本,双击文本进入编辑界面,删除文字,点击输入【¥1000】(【剩余金钱】操作也一样),在下方【文字设置】内设置文字字体,文字颜色等,点击【返回上一级】界面,将文本框调整合适大小,移动到合适的位置
 
 
 
7. 点击上方选择界面,【选择界面组件→文本】添加一个新的文本,双击文本进入编辑界面,删除文字,点击下方【数值设置→插入数值】,插入【普通数值:金钱】,更改命名为【剩余金额】,确定;点击【返回上一级】界面,将文本框调整合适大小,移动到合适的位置
 
 
8. 商城界面的形态基本完成,选中【购买】按钮,点击界面右侧【事件】区域,点击【鼠标点击的时候→添加事件】
 
 
9. 在设置事件中,点击’+‘号添加新的【点击后】事件,在事件【动作1】后方铅笔处,点击,设置事件条件
 
 
10. 在弹出的【设置条件】窗口内,选择【满足全部→添加条件】,添加条件:【普通数值:金钱 ≥ 1000】(即金钱≥1000时,才进行事件操作),确定(注:数值是根据你设置的商品价格来调整的,假设你的商品价格是100,那么你设置的条件应该是:金钱≥100)
 
 
11. 点击左侧【设置事件→动作1→数值操作】,添加操作公式:【普通数值:金钱 = 普通数值:金钱 - 1000】,确定
(购买商品,理所当然就是需要付需要的费用。所以,剩余金额就需要在点击后进行减少的操作)
 
 
12. 点击左侧【设置事件→动作1→刷新组件】,刷新【配置动作】内【我的界面→剩余金额】文本,确定 (刷新事件,主要是为了实时刷新剩余金额显示)
 
 
13. 设置完购买的步骤后,我们就该设置一个购买上限条件,避免剩余金额出现负数情况。
点击上方选择界面,【选择界面组件→文本】添加一个新的文本,双击文本进入编辑界面,删除文字,点击输入【您的余额已不足,无法购买此商品。】,在下方【文字设置】内设置文字字体,文字颜色等,更改命名为:【余额不足】,点击【返回上一级】界面,删除界面上的文本
 
 
14. 点击下方设置区域内【数值设置→设置初始数值】,添加一个新的数值,命名为:【购买失败提示】
 
 
15. 选中【购买】按钮,点击界面右侧【事件】区域,点击【鼠标点击的时候→添加事件】
 
 
16. 在设置事件中,点击’+‘号,再次添加一个新的【点击后】事件,在事件【动作2】后方铅笔处,点击,设置事件条件
 
 
17. 在弹出的【设置条件】窗口内,选择【满足全部→添加条件】,添加条件:【普通数值:金钱 < 1000】(即金钱<1000时,才进行事件操作),确定
 
 
18. 点击左侧【设置事件→动作2→数值操作】,添加操作公式:【普通数值:购买失败提示 = 普通数值:购买失败提示 + 1】,确定
(这一步的设置是为了在剩余金额<1000时,添加特定数值,弹出购买失败提示文本)
 
 
19. 点击左侧点击后事件’+‘号,再次添加一个新的【点击后】事件,在事件【动作3】后方铅笔处,点击,设置事件条件
 
 
20. 在弹出的【设置条件】窗口内,选择【满足全部→添加条件】,添加条件:【普通数值:购买失败提示 = 1】,确定(即购买失败提示=1时,才进行事件操作,不设置大于1是为了避免多次开启这个提示)
 
 
21. 点击左侧【设置事件→动作3→打开组件】,打开【配置动作】内【我的界面→余额不足】文本
 
 
22. 双击【组织动作】内【余额不足】或者点击右下角【定位】按钮,将余额不足文本移动到合适的位置后打钩,确定(其他购买按钮也是类似设置,都需要设置一遍)
 
 
23. 选中【返回】按钮,点击界面右侧【事件】区域,点击【鼠标点击的时候→添加事件】,在弹出的设置窗口内,点击左侧【设置事件→动作1→关闭组件】,关闭【配置动作】内【我的界面→当前组件】,确定
 
 
24. 最后,点击右侧【组件库→添加组件→按钮】,新建一个按钮,替换底图,更改命名为:【商城按钮】,点击界面右侧【事件】区域,点击【鼠标点击的时候→添加事件】,点击左侧【设置事件→动作1→打开组件】,打开【配置动作】内【我的界面→商城
 
 
25. 双击【组织动作】内【商城】或者点击右下角【定位】按钮,将商城界面移动到合适的位置后打钩,确定
 
 
26. 点击右下角【保存→保存→返回舞台】,回到作品界面后,点击左上角【高级界面→商城按钮→使用】,将商城按钮插入到剧情内,移动到合适的位置,整个商城系统就完成了~
 
 
*注:余额不足提示文本组件也可以制作成购买成功或购买失败的提示弹窗图片组件,在图片组件添加关闭提示按钮,效果更佳。
效果演示:
TOP