2D playable《多要素展示切换》教程
#自由编辑器 #空白制作 #初级难度
温馨提示：此案例为不使用"轮播组件"的制作方法；相同玩法可使用"轮播组件"，制作更简单，建议直接跳转查阅此教程：👉轮播组件-空白制作教程
一、特征标签
【制作难度】：⭐⭐
【适用产品】：普遍适用
【交互方式】：点击
【交互次数】：不限
【线程】：多线程
【核心资产】：静态图片
【功能】：动画-缩放缓动、事件-按下跳转指定场景、事件-定时触发
二、效果预览
扫码试玩
三、玩法梳理
我们在开始制作之前需要将本案例的玩法逻辑进行简单的梳理：
进入试玩，展示【美女造型A】和【左右切换按钮】；
出现【操作指引】，提示玩家按下【右侧切换按钮】；
此时玩家可按下左右任一按钮，玩家第一次按下任一按钮后，播放【换装反馈】；
再次出现【操作指引】，提示玩家按下【确认按钮】；
在玩家按下【确认按钮】前，可自由按下左右任一按钮切换造型，无次数限制
玩家按下【确认按钮】，跳转商店
四、制作思路
核心思想：让单个场景里的动画和事件尽可能少，场景拆分逻辑清晰，图层结构简单
场景拆分：根据第三部分的玩法梳理，我们可将本案例设置为4个场景来制作。
（场景1-3分别对应1套美女造型；场景4为结束页面）
效果图
场景描述
显示美女造型A，引导玩家点击右侧切换按钮
显示美女造型B，引导玩家点击确认按钮
显示美女造型C，引导玩家点击确认按钮
结束页，引导点击下载按钮
动画
【美女】：缩放缓动
【指引手指/箭头】：缩放缓动
【美女】：缩放缓动
【指引手指/箭头】：缩放缓动
【美女】：缩放缓动
【指引手指/箭头】：缩放缓动
【下载按钮】：缩放缓动
核心事件
触发对象：图层-左右箭头/确认按钮
触发操作：按下
响应事件：跳转指定场景
触发对象：图层-左右箭头/确认按钮
触发操作：按下
响应事件：跳转指定场景
触发对象：图层-左右箭头/确认按钮
触发操作：按下
响应事件：跳转指定场景
触发对象：图层-下载按钮
触发操作：按下
响应事件：跳转应用商店
资产清单
【音频】：点击音效、换装音效
【图片】：美女造型图片、切换箭头图片、确认按钮图片、手指、指引文案背景图、logo、CTA按钮
【文本】：指引文案、确认按钮文案、下载文案
【粒子特效】
【音频】：点击音效、换装音效
【图片】：美女造型图片、切换箭头图片、确认按钮图片、手指、指引文案背景图、logo、CTA按钮
【文本】：指引文案、确认按钮文案、下载文案
【粒子特效】
【音频】：点击音效、换装音效
【图片】：美女造型图片、切换箭头图片、确认按钮图片、手指、指引文案背景图、logo、CTA按钮
【文本】：指引文案、确认按钮文案、下载文案
【粒子特效】
【图片】：背景图、logo、CTA按钮
【文本】：下载文案
【粒子特效】
五、制作指南
Step1 - 场景搭建
1.全局设置
在【全局设置】中添加背景音乐、背景图片
2.全局场景
1）在【全局场景】中添加常驻信息：logo、CTA按钮
2）调整各资产到合适的位置大小
3）根据资产类型对资产进行编组、排序、命名
3..场景1-3
1）在【场景1】中添加音效、美女造型图片、切换箭头、确认按钮、手指、指引文案、粒子特效
2）调整各资产到合适的位置大小
3）根据资产类型对资产进行编组、排序、命名
注：因三个场景资产分布大体相同（场景1多一组指引手指），因此我们可以通过【复制场景】后微调来实现快速制作。
4.场景4
1）在【场景4】中添加虚化背景图、LOGO、下载按钮、粒子特效，并打组
2）在右侧场景设置中勾选场景4为【结束场景】；同时场景4【取消启用全局场景】
Step2 - 动效制作
1.美女呼吸感
1）在【场景1】左侧图层处选中人物组【role】，将锚点改为（50,100）
2）添加动画-通用-缩放缓动（作为美女进场动画）。参数设置如下：
3）继续添加动画-通用-缩放缓动（作为美女呼吸感动画）。参数设置如下：
注：场景2/场景3的美女动画同理场景1，可通过【复制/粘贴动画】来快速完成制作。
2.下载按钮
在【场景4】左侧图层处选中下载按钮组【ctat_download】，添加动画-通用-缩放缓动。参数设置如下：
Step3 - 逻辑设置
因场景2/场景3的事件设置同理场景1，所以在此仅以场景1举例说明，可通过【复制/粘贴事件】来快速完成场景2/场景3的事件设置；
另外，本案例有涉及【全局变量】，理解成本偏高且不影响此案例的教学，所以在此不做说明。
1.场景1：图层事件-箭头
1）选中右箭头组图层；
2）添加事件-按下；
3）添加响应事件-从头播放点击音效；从头播放右箭头缩放动画；
4）添加响应事件-执行延迟0.2s，跳转指定场景；
5）其他响应事件：设置埋点信息
注：左箭头的事件设置同理右箭头，因此可通过【复制/粘贴事件】来快速完成制作。
2.场景1：图层事件-确认按钮
1）选中确认按钮组图层；
2）添加事件-按下；
3）添加响应事件-跳转指定场景（结束页）；跳转应用商店；
4）其他响应事件：设置埋点信息
3.场景1：场景事件
1）在【场景1】下添加事件【定时触发】，设置执行延迟时间为0s；（即进入场景就生效）
2）添加响应事件-从头播放美女动画；从头播放操作指引动画；显示并播放粒子特效；从头播放粒子音效
4.场景4：场景事件
1）在【场景4】下添加事件-按下；
2）添加响应事件-跳转应用商店；设置埋点信息
5.全局场景：图层事件-CTA按钮
选中【全局场景】中的下载按钮组，添加事件-按下，添加响应事件-跳转应用商店
Step4 - 整体预览
1.横屏排版
每个场景竖屏制作完成后，均需进行横屏排版（建议多使用“复用竖屏位置尺寸配置”按钮）
2.屏幕适配
对各机型及其横竖屏进行屏幕适配，并预览适配效果是否合适
3.整体预览
全部制作完成后，可对不同机型/不同语言/横竖屏进行整体预览
六、资源提供
在教程最后，我们为您提供了本案例所使用到的全部资源，点击压缩包即可下载。您可以用此资源跟着教程尝试制作，以便尽快上手使用自由编辑器
最后更新于
