2D playable《点击物品后隐藏》教程
#自由编辑器 #空白制作 #通用制作 #入门难度
最后更新于
#自由编辑器 #空白制作 #通用制作 #入门难度
最后更新于
温馨提示:入门难度模板《点击物品后隐藏》就是按照这个教程制作的哦!
【制作难度】:⭐⭐
【适用产品】:普遍适用
【交互方式】:点击
【交互次数】:3步跳转
【线程】:单线程
【核心资产】:静态图片
【功能】:动画-淡入、动画-缩小消失、动画-放大出现、事件-按下隐藏素材、事件-按下显示素材
手机试玩效果最佳 | 竖屏 | 横屏 |
---|---|---|
我们在开始制作之前需要将本案例的玩法逻辑进行简单的梳理:
进入试玩,展示【初始金额】和桌面上错落摆放的六个礼盒;
出现【操作指引】,提示玩家点击打开礼盒A;
玩家第一次按下,打开礼盒A:播放【开奖反馈】,显示【第一次金额】;
再次出现【操作指引】,提示玩家点击打开礼盒B;
玩家第二次按下,打开礼盒B:播放【开奖反馈】,显示【第二次金额】;
弹出【奖励弹窗】,玩家全屏任意按下,跳转应用商店
核心思想:让单个场景里的动画和事件尽可能少,场景拆分逻辑清晰,图层结构简单
场景拆分:根据第三部分的玩法梳理,我们判断本案例设置1个场景即可
在【全局设置】中添加背景音乐、背景图片
1)在【场景1】中添加音频、金额面板图片及文本、奖励弹窗图片及文本、礼盒图片及文本、角色图片、操作指引、常驻信息及免责声明
2)调整各资产到合适的位置大小
3)根据资产类型对资产进行编组、排序、命名
本案例涉及动画较多,但大多为丰富礼盒效果所做的动画,且相关动画在前面的教学案例中有涉及,所以在此不做详细教学,仅针对此前未介绍过的动画进行教学。
1)在左侧图层处选中人物图片【role】,将锚点改为(50,100)
2)再添加动画-通用-缩放缓动。参数设置如下:
在左侧图层处选中金额文本【money_0】,添加动画-退场动画-缩小消失。参数设置如下:
注:金额文本【money_1】和【money_2】需额外添加淡入+缩放缓动动画,具体参数设置可进项目内查看。
1)在左侧图层处选中奖励弹窗组【endboard】,添加动画-进场动画-淡入。参数设置如下:
2)继续添加动画-通用-缩放缓动。参数设置如下:
4.散射光
1)在左侧图层处选中散射光图片【light】,添加动画-进场动画-放大出现。参数设置如下:
2)继续添加动画-通用-旋转缓动。参数设置如下:
1)选中左侧手势区域1图层;
2)添加事件-按下;
3)添加响应事件-隐藏素材手势区域1;(即保证玩家仅可点击1次红礼盒)
4)添加响应事件-隐藏素材操作指引相关;
5)添加响应事件-从头播放红礼盒的退场动画;显示素材奖励,并播放相关奖励动画及特效音效;
6)添加响应事件-从头播放金额文本0的退场动画;显示素材金额文本1,并播放相关文本动画;
7)添加响应事件-执行延迟1s;
8)添加响应事件-播放蓝礼盒相关动画;显示素材操作指引相关,并播放相关动画;
9)其他响应事件:设置埋点信息
蓝礼盒的事件设置同理红礼盒,可通过【复制/粘贴事件】后微调来快速完成制作。
有所区别的事件设置:
1)添加响应事件-执行延迟1s;
2)添加响应事件-显示奖励弹窗相关,并播放相关动画及特效音效;
3)其他响应事件:设置埋点信息;上报试玩结束
选中奖励弹窗下载按钮组,添加事件-按下,添加响应事件-跳转应用商店;设置埋点信息
选中常驻下载按钮组,添加事件-按下,添加响应事件-跳转应用商店
每个场景竖屏制作完成后,均需进行横屏排版(建议多使用“复用竖屏位置尺寸配置”按钮)
对各机型及其横竖屏进行屏幕适配,并预览适配效果是否合适
3.整体预览
全部制作完成后,可对不同机型/不同语言/横竖屏进行整体预览
在教程最后,我们为您提供了本案例所使用到的全部资源,点击压缩包即可下载。您可以用此资源跟着教程尝试制作,以便尽快上手使用自由编辑器
场景名称 | 场景1-诱导点击 |
---|---|
扫码试玩
效果图
场景描述
摆放有多个礼盒,引导玩家点击打开已解锁的礼盒
动画
【人物呼吸感】:缩放缓动
【金额文案】:缩小消失
【奖励弹窗】:淡入+缩放缓动
【散射光】:放大出现+旋转缓动
核心事件
触发对象:图层-手势区域
触发操作:按下
响应事件:隐藏素材;显示素材
资产清单
【音频】:背景音乐、音效(解锁音效/奖励音效/胜利音效)
【图片】:背景图片、人物图片、礼盒图片、金额面板图片、奖励弹窗图片、指引手指、logo、CTA按钮
【文本】:指引文案、金额文案、奖励弹窗文案、产品名称、下载文案、免责声明