2D playable《三选一多场景》教程
#自由编辑器 #空白制作 #通用制作 #简单难度
本讲旨在讲解如何通过自由编辑器实现普通多场景的制作，同时将通过一个案例，教大家快速制作出“按钮三选一”玩法的可玩广告！
一、教学目的
多场景制作：理解什么是“场景”，并学会通过复制场景功能来快速搭建新场景；
交互事件：学会通过“事件”【包含触发事件（例如：按下）和一系列响应事件（例如：跳转应用商店）】来实现“场景和场景”之间的串联，从而形成一个完成的可玩素材；
场景模板（按钮选择）：学会运用预设的场景模板快速完成按钮三选一的手指动画制作；
二、特征标签
【制作难度】：⭐⭐
【适用产品】：普遍适用
【交互方式】：点击
【线程】：多线程
【功能】：复制场景、事件-按下、动画、场景模板
三、作品预览
四、玩法梳理
我们在开始制作之前需要将本案例的玩法逻辑进行简单的梳理：
进入试玩，初始画面展示一个主要角色，主角色下方有三张不同角色的卡牌按钮。出现操作指引，引导玩家点击任意一个卡牌按钮来解锁新角色
若玩家点击左侧卡牌按钮，则会弹出红色宝箱，解锁新角色A；
若玩家点击中间卡牌按钮，则会弹出紫色宝箱，解锁新角色B；
若玩家点击右侧卡牌按钮，则会弹出绿色宝箱，解锁新角色C；
无论玩家点击哪一张卡牌按钮，解锁出哪一个新角色，最终都会自动跳转到结束页面
五、制作思路
核心思想：让单个场景里的动画和事件尽可能少，场景拆分逻辑清晰，图层结构简单
场景拆分：根据第四部分的玩法梳理，我们可以将本案例拆分为以下5个场景
场景1：诱导选择（三选一）
场景2：选择结果展示
场景3：选择结果展示
场景4：选择结果展示
场景5：结束页面
| 场景名称 | 场景1-诱导选择 | 场景2/3/4-选择结果展示 | 场景5-结束页 |
|---|---|---|---|
效果图 | |||
场景描述 | 角色解锁场景，引导玩家点击任意一个卡牌按钮解锁新角色 | 玩家完成选择后，出现待开启的角色宝箱，引导玩家点击打开宝箱； 玩家点击后，出现新角色卡牌，然后跳转至结束页 | 展示产品内丰富的角色信息； 展示产品信息和CTA按钮 |
动画 | 【手指】：位移缓动+透明度缓动 【按钮外发光×3】：透明度缓动 【指引文案】：透明度缓动 【主角色】：缩放缓动 | 【散射光】：放大出现+旋转缓动 【宝箱】：放大出现+位移缓动+Q弹晃动+放大消失 【手指】：淡入+缩放缓动 【新角色卡牌】：放大出现+位移缓动 | 【角色】：位移缓动 【CTA按钮】：缩放缓动 |
场景事件 | 触发对象：按钮×3 触发操作：按下 响应事件：跳转指定场景2/3/4 | 触发对象：宝箱 触发操作：按下 响应事件：（详见第五部分Step3） | 触发对象：CTA按钮 触发操作：按下 响应事件：跳转应用商店 |
核心物料清单 | 【图片】：主角色、卡牌按钮×3、按钮光晕×3（可选）、手指、logo、CTA按钮 【文本】：指引文案、下载文案 【背景音乐】【背景图片】 | 【图片】：宝箱×3、散射光、新角色卡牌×3、外发光序列帧、手指、logo、CTA按钮 【粒子】：爆炸、烟雾爆炸 【文本】：指引文案、下载文案 【音效】：礼花爆炸音效、闪光音效 【背景音乐】【背景图片】 | 【图片】：角色×3、CTA按钮×2、logo 【背景音乐】【背景图片】 |
六、制作指南
Step1 - 基础场景搭建
| 图示 | 步骤 |
|---|---|
全局设置 在【全局设置】中添加背景图片、背景音乐 |
Step2 - 制作场景1（诱导选择）
步骤概括：运用预设的场景模板快速完成动画制作
| 图示 | 步骤 | 事件设置 |
|---|---|---|
1.通过场景模板制作【操作指引】 场景模板会预设好某些指定的效果和功能，其中包括图层、音频、动画、事件等，通过直接替换元素，即可快速完成制作。 1）添加场景模板： 在顶部资产库点击【场景模板】按钮，找到循环三选一模板并添加，自动生成新场景，以此作为场景1； （Tips：可删除新建项目时默认出现的场景1） 2）替换卡牌按钮×3/手指样式 依次选中选项图层A/B/C和手指，在右侧参数设置区完成卡牌按钮和手指样式的替换； （选做：因本案例选择不使用场景模板自带的按钮缩放缓动动画，因此需要删除原本的动画，重新制作外发光的透明度缓动动画） 3）调整指引文案的内容和位置 可直接将指引文案拖动到想要的位置，并在右侧参数设置区修改文本内容，调整样式； Tips：如果想达到更完美、更个性化的效果，可自行添加外发光图片或指引文案背景图片 | 图层事件1
图层事件2
图层事件3
图层事件4
| |
2.添加主角色图片 1）导入主角色图片，调整图片位置大小至合适，并将图片拖动置于图层最底层； 2）选中主角色图层，将锚点修改为(50，100)，并添加缩放缓动动画，使人物看起来有呼吸感； | ||
3.添加产品信息+CTA按钮 1）导入logo，调整位置大小至合适； 2）添加CTA按钮及文本，并打组 |
Step3 - 制作场景2/3/4（选择结果展示）
步骤概括：先集中做其中一个选择结果，将这一个场景设置好后，再通过复制场景功能来快速搭建其余两个场景
（说明：因点击卡牌按钮后，触发的反馈仅在“宝箱”和“新角色卡牌”的样式上有所区分，场景内其余内容都是相同的，因此我们采用“复制场景”功能来实现快速制作）
| 图示 | 步骤（以场景2为例） | 事件设置 |
|---|---|---|
1.复制图层 1）直接将场景1内的“logo”、“CTA按钮”、“指引文案”、“手指”复制到场景2； 2）修改指引文案内容 （Tips：本场景内存在两条指引文案，因此在复制场景1内的指引文案组时，可再多复制一层，并修改文案内容） | 图层事件
| |
2.添加宝箱 1）添加宝箱图片至画布内，调整位置大小至合适； 2）为宝箱图层添加“进场动画-放大出现”、“通用-位移缓动”动画，为宝箱赋予动态效果； 3）将宝箱打组，继续在组上添加“强调动画-Q弹晃动”、“退场动画-放大消失”动画，模拟点击后宝箱爆开的动态效果； （注意：因为宝箱爆开是在玩家点击宝箱后才触发的，因此需要关闭宝箱爆开这两个动画的自动播放按钮） | ||
3.添加粒子动效 1）在资产库-公共资产库中添加粒子动效“爆炸”、“烟雾爆炸”（可视情况自行调整粒子参数） 2）添加散射光图片，调整位置大小至合适，并为散射光添加“进场动画-放大出现”、“通用-旋转缓动”动画 3）拖动三个动效图层置于宝箱图层之下 | ||
4.添加手指动画 为手指图层添加“进场动画-淡入”、“通用-缩放缓动”动画，模拟点击的效果 | ||
5.添加新角色卡牌 1）添加新角色卡牌与外发光序列帧动画，并打组，调整位置大小至合适； 2）为新角色卡牌组添加“进场动画-向上放大滑入”、“通用-位移缓动”动画，丰富画面效果 （Tips：在制作此步骤时，可暂时隐藏其余图层，方便操作） 3）调整完毕后，我们隐藏掉新角色卡牌组与第二组文案指引，通过事件设置，在玩家点击宝箱后再进行显示 | ||
6.复制场景 1）场景2设置完成后，我们选中场景2右键选择【复制场景】，以此快速复制出场景3、场景4； 2）依次替换掉两个场景中的“宝箱”与“新角色卡牌”图层，我们的场景3与场景4就完成了 |
Step4 - 制作场景5（结束页）
步骤概括：利用简单的缩放缓动动画，制作结束页CTA按钮交错呼吸的效果
| 图示 | 步骤 | 事件设置 |
|---|---|---|
1.添加多角色 1）添加多个角色图片，并调整位置大小； 2）依次为角色添加“通用-位移缓动”动画，增加角色呼吸感 （Tips：为使画面看起来更自然，可分别设置三个角色的位移距离，使其往不同方向运动） | 图层事件
| |
2.添加产品信息+CTA按钮 1）添加logo，调整位置大小至合适； 2）添加两个同风格但不同颜色的CTA按钮及文本，并打组； 3）依次为两个按钮组添加“通用-缩放缓动”动画，通过曲线的不同，来实现按钮交错呼吸的效果 |
Step5 - 整体预览
| 图示 | 步骤 |
|---|---|
补充说明-横屏排版 每个场景竖屏制作完成后，均需进行横屏排版（建议多使用“复用竖屏位置尺寸配置”按钮） | |
补充说明-屏幕适配 对各机型/横竖屏进行屏幕适配，并预览适配效果是否合适 | |
整体预览 全部制作完成后，可对不同机型/不同语言/横竖屏进行整体预览 |
最后更新于
