2D playable《多要素展示切换》教程

#自由编辑器 #空白制作 #初级难度

温馨提示：此案例为不使用"轮播组件"的制作方法；相同玩法可使用"轮播组件"，制作更简单，建议直接跳转查阅此教程：👉轮播组件-空白制作教程

一、特征标签

• 【制作难度】：⭐⭐

• 【适用产品】：普遍适用

• 【交互方式】：点击

• 【交互次数】：不限

• 【线程】：多线程

• 【核心资产】：静态图片

• 【功能】：动画-缩放缓动、事件-按下跳转指定场景、事件-定时触发

二、效果预览

手机试玩效果最佳	竖屏	横屏
扫码试玩	点击试玩	点击试玩

三、玩法梳理

我们在开始制作之前需要将本案例的玩法逻辑进行简单的梳理：

• 进入试玩，展示【美女造型A】和【左右切换按钮】；

• 出现【操作指引】，提示玩家按下【右侧切换按钮】；

• 此时玩家可按下左右任一按钮，玩家第一次按下任一按钮后，播放【换装反馈】；

• 再次出现【操作指引】，提示玩家按下【确认按钮】；

  • 在玩家按下【确认按钮】前，可自由按下左右任一按钮切换造型，无次数限制

• 玩家按下【确认按钮】，跳转商店

四、制作思路

核心思想：让单个场景里的动画和事件尽可能少，场景拆分逻辑清晰，图层结构简单

场景拆分：根据第三部分的玩法梳理，我们可将本案例设置为4个场景来制作。

（场景1-3分别对应1套美女造型；场景4为结束页面）

场景名称	场景1-诱导切换	场景2-诱导点击	场景3-诱导点击	场景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.整体预览

全部制作完成后，可对不同机型/不同语言/横竖屏进行整体预览

六、资源提供

在教程最后，我们为您提供了本案例所使用到的全部资源，点击压缩包即可下载。您可以用此资源跟着教程尝试制作，以便尽快上手使用自由编辑器

3MB

多要素点击切换_资源.zip

archive

打开