# 2D playable《三选一多场景》教程

本讲旨在讲解如何通过**自由编辑器**实现普通多场景的制作，同时将通过一个案例，教大家快速制作出“按钮三选一”玩法的可玩广告！

## <mark style="color:blue;">一、教学目的</mark>

* **多场景制作：**&#x7406;解什么是“场景”，并学会通过<mark style="color:red;">**复制场景**</mark>功能来快速搭建新场景；
* **交互事件：**&#x5B66;会通过<mark style="color:red;">**“事件”**</mark>【包含触发事件（例如：按下）和一系列响应事件（例如：跳转应用商店）】来实现“场景和场景”之间的串联，从而形成一个完成的可玩素材；
* **场景模板（按钮选择）：**&#x5B66;会运用预设的<mark style="color:red;">**场景模板**</mark>快速完成按钮三选一的手指动画制作；

## <mark style="color:blue;">二、特征标签</mark>

* 【制作难度】：⭐⭐
* 【适用产品】：普遍适用
* 【交互方式】：点击
* 【线程】：多线程
* 【功能】：复制场景、事件-按下、动画、场景模板

## <mark style="color:blue;">三、作品预览</mark>

<table><thead><tr><th>手机试玩效果最佳</th><th>竖屏</th><th>横屏</th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td><img src="/files/QZFgKedbUeOoHVpiy5oF" alt=""></td><td><img src="/files/XKHW0K528eTlvgOlQLrU" alt="" data-size="original"></td><td><img src="/files/yoDRrGY1pOIdN14wYSVD" alt="" data-size="original"></td><td><a href="https://mmp-cdn.rayjump.com/mindworks-interactive-ads.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fps%2Fpreview%2F1913727%2F23%2F08%2F02%2F64ca21629cbea%2Fgeneralscenes_0801.html%3Floading%3D1%26preview%3Dtrue%26lang%3Dzh-cn&#x26;mw_test=0&#x26;is_browser_tips=1&#x26;track_data=%7B%22pid%22%3A1913727%2C%22uid%22%3A109685%2C%22env%22%3A%22p%22%7D">https://mmp-cdn.rayjump.com/mindworks-interactive-ads.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fps%2Fpreview%2F1913727%2F23%2F08%2F02%2F64ca21629cbea%2Fgeneralscenes_0801.html%3Floading%3D1%26preview%3Dtrue%26lang%3Dzh-cn&#x26;mw_test=0&#x26;is_browser_tips=1&#x26;track_data=%7B%22pid%22%3A1913727%2C%22uid%22%3A109685%2C%22env%22%3A%22p%22%7D</a></td></tr><tr><td>扫码试玩</td><td><a href="https://tinyurl.com/ynkvvspb">点击试玩</a></td><td><a href="https://tinyurl.com/ynkvvspb">点击试玩</a></td><td></td></tr></tbody></table>

## <mark style="color:blue;">四、玩法梳理</mark>

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

* 进入试玩，初始画面展示一个主要角色，主角色下方有三张不同角色的卡牌按钮。出现操作指引，引导玩家点击任意一个卡牌按钮来解锁新角色
  * 若玩家点击左侧卡牌按钮，则会弹出红色宝箱，解锁新角色A；
  * 若玩家点击中间卡牌按钮，则会弹出紫色宝箱，解锁新角色B；
  * 若玩家点击右侧卡牌按钮，则会弹出绿色宝箱，解锁新角色C；
* 无论玩家点击哪一张卡牌按钮，解锁出哪一个新角色，最终都会自动跳转到结束页面

## <mark style="color:blue;">五、制作思路</mark>

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

**场景拆分：**&#x6839;据第四部分的玩法梳理，我们可以将本案例拆分为以下5个场景

* 场景1：诱导选择（三选一）
* 场景2：选择结果展示
* 场景3：选择结果展示
* 场景4：选择结果展示
* 场景5：结束页面

<table><thead><tr><th width="117">场景名称</th><th width="203">场景1-诱导选择</th><th width="219">场景2/3/4-选择结果展示</th><th>场景5-结束页</th></tr></thead><tbody><tr><td><strong>效果图</strong></td><td><img src="/files/Pm8fwPlGGQdJ4uKpP4Jo" alt=""></td><td><img src="/files/cbItGFreVTYdzrBWV0yv" alt=""><img src="/files/y0GlDJnkue6uUzESTDPc" alt=""></td><td><img src="/files/nKM0kWXdadJJIfy8KMf2" alt=""></td></tr><tr><td><strong>场景描述</strong></td><td>角色解锁场景，引导玩家点击任意一个卡牌按钮解锁新角色</td><td><p>玩家完成选择后，出现待开启的角色宝箱，引导玩家点击打开宝箱；</p><p>玩家点击后，出现新角色卡牌，然后跳转至结束页</p></td><td><p>展示产品内丰富的角色信息；</p><p>展示产品信息和CTA按钮</p></td></tr><tr><td><strong>动画</strong></td><td><p>【手指】：位移缓动+透明度缓动</p><p>【按钮外发光×3】：透明度缓动</p><p>【指引文案】：透明度缓动</p><p>【主角色】：缩放缓动</p></td><td><p>【散射光】：放大出现+旋转缓动</p><p>【宝箱】：放大出现+位移缓动+Q弹晃动+放大消失</p><p>【手指】：淡入+缩放缓动</p><p>【新角色卡牌】：放大出现+位移缓动</p></td><td><p>【角色】：位移缓动</p><p>【CTA按钮】：缩放缓动</p></td></tr><tr><td><strong>场景事件</strong></td><td><p>触发对象：按钮×3</p><p>触发操作：按下</p><p>响应事件：跳转指定场景2/3/4</p></td><td><p>触发对象：宝箱</p><p>触发操作：按下</p><p>响应事件：（详见第五部分Step3）</p></td><td><p>触发对象：CTA按钮</p><p>触发操作：按下</p><p>响应事件：跳转应用商店</p></td></tr><tr><td><strong>核心物料清单</strong></td><td><p>【图片】：主角色、卡牌按钮×3、按钮光晕×3（可选）、手指、logo、CTA按钮</p><p>【文本】：指引文案、下载文案</p><p>【背景音乐】【背景图片】</p></td><td><p>【图片】：宝箱×3、散射光、新角色卡牌×3、外发光序列帧、手指、logo、CTA按钮</p><p>【粒子】：爆炸、烟雾爆炸</p><p>【文本】：指引文案、下载文案</p><p>【音效】：礼花爆炸音效、闪光音效</p><p>【背景音乐】【背景图片】</p></td><td><p>【图片】：角色×3、CTA按钮×2、logo</p><p>【背景音乐】【背景图片】</p></td></tr></tbody></table>

## <mark style="color:blue;">六、制作指南</mark>

### Step1 - 基础场景搭建

| 图示                               | 步骤                                                     |
| -------------------------------- | ------------------------------------------------------ |
| ![](/files/QB1zJKZVohmS6Lv5kRFC) | <p><strong>全局设置</strong></p><p>在【全局设置】中添加背景图片、背景音乐</p> |

### Step2 - 制作场景1（诱导选择）

**步骤概括：**&#x8FD0;用预设的<mark style="color:red;">**场景模板**</mark>快速完成动画制作

<table><thead><tr><th width="248.33333333333331">图示</th><th width="304">步骤</th><th>事件设置</th></tr></thead><tbody><tr><td><p><img src="/files/LofaC9hqL2UfzZVOFpFq" alt=""></p><p></p><p></p><p></p><p></p><p></p><p><img src="/files/U80e17KgEAZ0DegJZgTD" alt=""></p><p></p><p></p><p></p><p></p><p></p><p><img src="/files/ZAem2zBqYpjqtZJwXYZe" alt=""></p></td><td><p><strong>1.通过场景模板制作【操作指引】</strong></p><p>场景模板会预设好某些指定的效果和功能，其中包括图层、音频、动画、事件等，通过直接替换元素，即可快速完成制作。</p><p>1）添加场景模板：</p><p>在顶部资产库点击【场景模板】按钮，找到循环三选一模板并添加，自动生成新场景，以此作为场景1；</p><p><em>（Tips：可删除新建项目时默认出现的场景1）</em></p><p>2）替换卡牌按钮×3/手指样式</p><p>依次选中选项图层A/B/C和手指，在右侧参数设置区完成卡牌按钮和手指样式的替换；</p><p><em>（选做：因本案例选择不使用场景模板自带的按钮缩放缓动动画，因此需要删除原本的动画，重新制作外发光的透明度缓动动画）</em></p><p>3）调整指引文案的内容和位置</p><p>可直接将指引文案拖动到想要的位置，并在右侧参数设置区修改文本内容，调整样式；</p><p><em>Tips：如果想达到更完美、更个性化的效果，可自行添加外发光图片或指引文案背景图片</em></p></td><td><p><strong>图层事件1</strong></p><ul><li>选中卡牌按钮A1组</li><li>添加事件-按下；</li><li>添加响应事件-跳转指定场景 场景2</li></ul><p><strong>图层事件2</strong></p><ul><li>选中卡牌按钮B1组</li><li>添加事件-按下；</li><li>添加响应事件-跳转指定场景 场景3</li></ul><p><strong>图层事件3</strong></p><ul><li>选中卡牌按钮C1组</li><li>添加事件-按下；</li><li>添加响应事件-跳转指定场景 场景4</li></ul><p><strong>图层事件4</strong></p><ul><li>选中CTA按钮组</li><li>添加事件-按下；</li><li>添加响应事件-跳转应用商店</li></ul></td></tr><tr><td><img src="/files/XBsfxG23IIWW0SZCAaK9" alt=""></td><td><p><strong>2.添加主角色图片</strong></p><p>1）导入主角色图片，调整图片位置大小至合适，并将图片拖动置于图层最底层；</p><p>2）选中主角色图层，将锚点修改为(50，100)，并添加缩放缓动动画，使人物看起来有呼吸感；</p></td><td></td></tr><tr><td><img src="/files/E8ztjhJiw91G8DXCFBSY" alt=""></td><td><p><strong>3.添加产品信息+CTA按钮</strong></p><p>1）导入logo，调整位置大小至合适；</p><p>2）添加CTA按钮及文本，并打组</p></td><td></td></tr></tbody></table>

### Step3 - 制作场景2/3/4（选择结果展示）

**步骤概括：**&#x5148;集中做其中一个选择结果，将这一个场景设置好后，再通过<mark style="color:red;">**复制场景**</mark>功能来快速搭建其余两个场景

*（说明：因点击卡牌按钮后，触发的反馈仅在“宝箱”和“新角色卡牌”的样式上有所区分，场景内其余内容都是相同的，因此我们采用“复制场景”功能来实现快速制作）*

<table><thead><tr><th>图示</th><th width="277.3333333333333">步骤（以场景2为例）</th><th>事件设置</th></tr></thead><tbody><tr><td><img src="/files/QSxZfIMhfVNCcdMSz8th" alt=""></td><td><p><strong>1.复制图层</strong></p><p>1）直接将场景1内的“logo”、“CTA按钮”、“指引文案”、“手指”复制到场景2；</p><p>2）修改指引文案内容</p><p><em>（Tips：本场景内存在两条指引文案，因此在复制场景1内的指引文案组时，可再多复制一层，并修改文案内容）</em></p></td><td><p><strong>图层事件</strong></p><ul><li>选中宝箱组</li><li>添加事件-按下；</li><li>添加响应事件-隐藏操作指引1</li><li>添加响应事件-从头播放宝箱组的动画-从头播放闪光音效（即宝箱爆开时的动画与音效）</li><li>添加响应事件-执行延时，设置定时器时长为1s，继续添加响应事件-显示素材新角色卡牌组-显示操作指引2</li><li>添加响应事件-执行延时，设置定时器时长为2s，继续添加响应事件-跳转指定场景 场景5（结束页）</li></ul></td></tr><tr><td><p><img src="/files/2qCQINtqmUF49VZc2dEZ" alt=""></p><p></p><p></p><p><img src="/files/4NpdQwI6qUdOHhkAHH6p" alt=""></p></td><td><p><strong>2.添加宝箱</strong></p><p>1）添加宝箱图片至画布内，调整位置大小至合适；</p><p>2）为宝箱图层添加“进场动画-放大出现”、“通用-位移缓动”动画，为宝箱赋予动态效果；</p><p>3）将宝箱打组，继续在组上添加“强调动画-Q弹晃动”、“退场动画-放大消失”动画，模拟点击后宝箱爆开的动态效果；</p><p><em>（注意：因为宝箱爆开是在玩家点击宝箱后才触发的，因此需要关闭宝箱爆开这两个动画的<strong>自动播放</strong>按钮）</em></p></td><td></td></tr><tr><td><img src="/files/VaUhDybtgGTfeaK9126k" alt=""></td><td><p><strong>3.添加粒子动效</strong></p><p>1）在资产库-公共资产库中添加粒子动效“爆炸”、“烟雾爆炸”<em>（可视情况自行调整粒子参数）</em></p><p>2）添加散射光图片，调整位置大小至合适，并为散射光添加“进场动画-放大出现”、“通用-旋转缓动”动画</p><p>3）拖动三个动效图层置于宝箱图层之下</p></td><td></td></tr><tr><td><img src="/files/mV1Anh5cc9ljTg7bdMAU" alt=""></td><td><p><strong>4.添加手指动画</strong></p><p>为手指图层添加“进场动画-淡入”、“通用-缩放缓动”动画，模拟点击的效果</p></td><td></td></tr><tr><td><img src="/files/ObFMbtmleK2lIG1m2Rfj" alt=""></td><td><p><strong>5.添加新角色卡牌</strong></p><p>1）添加新角色卡牌与外发光序列帧动画，并打组，调整位置大小至合适；</p><p>2）为新角色卡牌组添加“进场动画-向上放大滑入”、“通用-位移缓动”动画，丰富画面效果</p><p><em>（Tips：在制作此步骤时，可暂时隐藏其余图层，方便操作）</em></p><p>3）调整完毕后，我们隐藏掉新角色卡牌组与第二组文案指引，通过事件设置，在玩家点击宝箱后再进行显示</p></td><td></td></tr><tr><td><img src="/files/T0rh3QPDIkO5cogQ0oJ7" alt=""></td><td><p><strong>6.复制场景</strong></p><p>1）场景2设置完成后，我们选中场景2右键选择【复制场景】，以此快速复制出场景3、场景4；</p><p>2）依次替换掉两个场景中的“宝箱”与“新角色卡牌”图层，我们的场景3与场景4就完成了</p></td><td></td></tr></tbody></table>

### Step4 - 制作场景5（结束页）

**步骤概括：**&#x5229;用简单的<mark style="color:red;">**缩放缓动动画**</mark>，制作结束页CTA按钮交错呼吸的效果

<table><thead><tr><th>图示</th><th width="300.3333333333333">步骤</th><th>事件设置</th></tr></thead><tbody><tr><td><img src="/files/9G9EsvWJZ8Ip1sAFq2Z6" alt=""></td><td><p><strong>1.添加多角色</strong></p><p>1）添加多个角色图片，并调整位置大小；</p><p>2）依次为角色添加“通用-位移缓动”动画，增加角色呼吸感</p><p><em>（Tips：为使画面看起来更自然，可分别设置三个角色的位移距离，使其往不同方向运动）</em></p></td><td><p><strong>图层事件</strong></p><ul><li>选中CTA按钮组</li><li>添加事件-按下；</li><li>添加响应事件-跳转应用商店</li></ul></td></tr><tr><td><p><img src="/files/mppW1PLAYpue6akqpQXq" alt=""></p><p><img src="/files/G5WKUugnqjw3lrjpJTTc" alt=""></p></td><td><p><strong>2.添加产品信息+CTA按钮</strong></p><p>1）添加logo，调整位置大小至合适；</p><p>2）添加两个同风格但不同颜色的CTA按钮及文本，并打组；</p><p>3）依次为两个按钮组添加“通用-缩放缓动”动画，通过曲线的不同，来实现按钮交错呼吸的效果</p></td><td></td></tr></tbody></table>

### Step5 - 整体预览

<table><thead><tr><th width="407">图示</th><th>步骤</th></tr></thead><tbody><tr><td><img src="/files/CTBp7vLWFBofqqv3Va2k" alt=""></td><td><p><mark style="color:red;"><strong>补充说明-横屏排版</strong></mark></p><p>每个场景竖屏制作完成后，均需进行横屏排版（建议多使用“复用竖屏位置尺寸配置”按钮）</p></td></tr><tr><td><img src="/files/fK4cChsIRaKxq0g9BYSR" alt=""></td><td><p><mark style="color:red;"><strong>补充说明-屏幕适配</strong></mark></p><p>对各机型/横竖屏进行屏幕适配，并预览适配效果是否合适</p></td></tr><tr><td><img src="/files/vR67ToSmnmyrxFNCI3gT" alt=""></td><td><p><strong>整体预览</strong></p><p>全部制作完成后，可对不同机型/不同语言/横竖屏进行整体预览</p></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.playturbo.cn/playturbo-an-li-jiao-xue-ji-di/ke-wan-zi-you-bian-ji-qi-an-li/tong-yong-zhi-zuo-an-li/chu-ji-jiao-xue-kong-bai-zhi-zuo-jiao-cheng/2d-playable-san-xuan-yi-duo-chang-jing-jiao-cheng.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.