# 《三消装扮》空白制作教程

温馨提示：本篇教程主要讲解如何通过**空白制作**来做出"三消+装扮"玩法结合的2D可玩素材。因模板《[三消装扮](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001725%252F13715%252Fpv%252F24%252F11%252F23%252F6741da030403f%252Fproject.html%253Floading%253D1%2526preview%253Dtrue%2526lang%253Dzh-cn%2526preview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526loading%253D1%26mw_test%3D0%26is_browser_tips%3D1%26ptloading%3D1%26track_data%3D%257B%2522pid%2522%253A20001725%252C%2522uid%2522%253A8709%252C%2522skin_id%2522%253A13715%252C%2522sct%2522%253A%2522pt_template_index%2522%252C%2522env%2522%253A%2522p%2522%252C%2522cc%2522%253A%2522CN%2522%257D\&orientation=3\&name=\&language=en%2Czh-cn)》就是根据这个教程 由设计独立制作后设为模板的，没有代码，所以等同于空白制作，因此您可以直接使用模板创建"自由制作"项目来作为空白制作的参考，再结合本篇教程，学习效果更佳哦！

💡参照此种形式，您也可以制作其他*多种玩法相结合*的可玩素材！

## <mark style="color:blue;">一、特征标签</mark> <a href="#nubzy" id="nubzy"></a>

* 【制作难度】：⭐⭐⭐⭐
* 【适用产品】：消除 & 消除结合其他玩法 的产品
* 【交互方式】：按下
* 【自由度】：全自由
* 【核心资产】：静帧图片、序列帧
* 【核心功能】：按下-隐藏/显示素材；全局变量

## <mark style="color:blue;">二、效果预览</mark> <a href="#dlwsv" id="dlwsv"></a>

<table><thead><tr><th width="221.33333333333331">手机试玩效果最佳</th><th width="250">竖屏</th><th>横屏</th></tr></thead><tbody><tr><td><img src="/files/Sv8cgcpomsVhnC8uc11x" alt="" data-size="original"></td><td><img src="/files/lqRhMSS8N4bvcMZeBsaq" alt="" data-size="original"></td><td><img src="/files/RwBHl78kndNV0wNAKoab" alt="" data-size="original"></td></tr><tr><td>扫码试玩</td><td><a href="https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001725%252F13715%252Fpv%252F24%252F11%252F23%252F6741da030403f%252Fproject.html%253Floading%253D1%2526preview%253Dtrue%2526lang%253Dzh-cn%2526preview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526loading%253D1%26mw_test%3D0%26is_browser_tips%3D1%26ptloading%3D1%26track_data%3D%257B%2522pid%2522%253A20001725%252C%2522uid%2522%253A8709%252C%2522skin_id%2522%253A13715%252C%2522sct%2522%253A%2522pt_template_index%2522%252C%2522env%2522%253A%2522p%2522%252C%2522cc%2522%253A%2522CN%2522%257D&#x26;orientation=3&#x26;name=&#x26;language=en%2Czh-cn">点击试玩</a></td><td><a href="https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001725%252F13715%252Fpv%252F24%252F11%252F23%252F6741da030403f%252Fproject.html%253Floading%253D1%2526preview%253Dtrue%2526lang%253Dzh-cn%2526preview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526loading%253D1%26mw_test%3D0%26is_browser_tips%3D1%26ptloading%3D1%26track_data%3D%257B%2522pid%2522%253A20001725%252C%2522uid%2522%253A8709%252C%2522skin_id%2522%253A13715%252C%2522sct%2522%253A%2522pt_template_index%2522%252C%2522env%2522%253A%2522p%2522%252C%2522cc%2522%253A%2522CN%2522%257D&#x26;orientation=3&#x26;name=&#x26;language=en%2Czh-cn">点击试玩</a></td></tr></tbody></table>

## <mark style="color:blue;">三、玩法梳理</mark> <a href="#nbhek" id="nbhek"></a>

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

1. 进入试玩（场景1），展示【美女待机序列帧】和【两个服装选项】
2. 出现【操作指引】，引导玩家选择任一选项
3. 玩家按下任一选项，进入消除环节（场景2）
4. 出现【三消初始画面】和【操作指引】，玩家可按下任一方块，按下后该方块即显示在【消除坑位】
5. 当【消除坑位】出现三个相同图案的方块时，播放【消除成功反馈】
6. 玩家成功完成所有消除，播放【胜利反馈】，然后进入结束页（场景3）
7. 假关卡结束页：玩家全屏任意按下，跳转应用商店

## <mark style="color:blue;">四、制作思路</mark> <a href="#agjmh" id="agjmh"></a>

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

**场景拆分：**&#x6839;据上一部分的玩法梳理内容，我们可将本案例拆分为 3 个场景来制作，即选择环节+核心玩法+假关卡结束页

<table data-full-width="false"><thead><tr><th width="117">场景名称</th><th width="211">场景1-选择环节</th><th width="226">场景2-核心玩法</th><th>场景3-假关卡结束页</th></tr></thead><tbody><tr><td><strong>效果预览</strong></td><td><img src="/files/kNPnASwp6ywTjBd0usY3" alt="" data-size="original"></td><td><img src="/files/J9XfKx9nIzll3o2RQBUc" alt="" data-size="original"></td><td><img src="/files/G9WoqWUksQ4fHgnFJZRu" alt="" data-size="original"></td></tr><tr><td><strong>场景描述</strong></td><td>二选一选择指引</td><td>方块三消：玩家可点击任意方块，满足消除条件即原地消除；消除所有方块后，播放胜利反馈并进入结束页面</td><td>假关卡结束页，玩家按下即跳转商店</td></tr><tr><td><strong>核心资产</strong></td><td><p><strong>静帧图片：</strong>服装选项*2、背景图、操作指引</p><p><strong>序列帧：</strong>美女待机序列帧</p><p><strong>音效：</strong>点击音效</p></td><td><p><strong>静帧图片：</strong>服装方块、消除坑位、遮罩</p><p><strong>粒子特效：</strong>星光粒子</p><p><strong>音效：</strong>点击音效、消除音效</p></td><td><p><strong>静帧图片：</strong>假关卡</p><p><strong>序列帧：</strong>美女脱衣序列帧</p><p><strong>粒子特效：</strong>爱心粒子、烟雾粒子</p><p><strong>音效：</strong>点击音效、换装音效、美女尖叫音效</p></td></tr><tr><td><strong>核心动画</strong></td><td><p><strong>手指指引</strong>：位移缓动+透明度缓动</p><p><strong>服装选项</strong>：弹性放大入场+位移缓动</p></td><td><p><strong>指引组</strong>：淡出</p><p><strong>消除组</strong>：淡入</p><p><strong>手指指引</strong>：位移缓动+淡出</p></td><td><p><strong>遮罩</strong>：淡出</p><p><strong>美女待机序列帧</strong>：淡出</p><p><strong>美女脱衣序列帧</strong>：淡入+缩放缓动</p><p><strong>假关卡组</strong>：淡入</p></td></tr><tr><td><strong>核心事件</strong></td><td><p><strong>触发对象</strong>：服装选项</p><p><strong>触发事件</strong>：按下</p><p><strong>响应事件</strong>：跳转到下一场景</p></td><td><p><strong>触发对象</strong>：服装方块</p><p><strong>触发事件</strong>：按下</p><p><strong>响应事件</strong>：隐藏原方块；显示坑位上的方块；赋值(全局变量)</p><hr><p><strong>触发对象</strong>：场景2</p><p><strong>触发事件</strong>：条件判断</p><p><strong>响应事件</strong>：隐藏坑位上的方块；赋值(全局变量)</p></td><td><p><strong>触发对象</strong>：手势区域</p><p><strong>触发事件</strong>：按下</p><p><strong>响应事件</strong>：跳转应用商店</p></td></tr></tbody></table>

## <mark style="color:blue;">五、制作指南</mark> <a href="#cria2" id="cria2"></a>

\*核心内容为Step1【场景搭建】 & Step4【事件设置】

### Step1 - 场景搭建 <a href="#wepzn" id="wepzn"></a>

建议您在创建项目后，先将所有资产上传进【项目资产】内，方便后续添加使用

#### **1.全局设置**

1）在【全局设置】中添加背景音乐

2）在【全局场景】下添加常驻下载按钮、logo等产品信息，并调整位置大小、合理编组

<figure><img src="/files/HvQNlU5IOK6b8U7IoCoq" alt=""><figcaption></figcaption></figure>

#### **2.场景1：选择环节**

1）将相关资产添加进场景1

2）调整各资产到合适的位置大小，根据资产类型对资产进行命名、编组、排序

<figure><img src="/files/YLtTAwQEOJRqjtduJyZn" alt=""><figcaption></figcaption></figure>

#### **3.场景2：核心玩法**

1）复制场景1 作为场景2，并删除两个不需要的指引手指组

<figure><img src="/files/7cEZOJKIglpo3ygMnjfu" alt=""><figcaption></figcaption></figure>

2）将其他核心玩法相关资产添加进场景2

3）调整各资产到合适的位置大小，根据资产类型对资产进行命名、编组、排序（详细内容可进项目内查看）

⚠️**注意：此类玩法(指在玩家交互后,物品位置发生改变的玩法)的制作逻辑为 "在物品可能出现的位置上都添加该物品，然后先隐藏初始状态不会出现的物品，再通过事件设置来显示消除坑位上的物品，同时隐藏原位置的物品"，以此来实现目标效果**

<mark style="color:orange;">因此，除了初始界面要展示的方块棋盘外(红色区域)，每个消除坑位上都应添加所有可能出现的结果，也就是 2张不同服装的方块\*5个坑位(绿色区域)</mark>

<div align="left"><figure><img src="/files/HABeyUOE7GojzWN29rsV" alt=""><figcaption></figcaption></figure></div>

4）调整图层初始状态：将消除坑位上的所有方块图片设为"隐藏"状态，后续通过事件来控制这些图层的显示/隐藏

<figure><img src="/files/ta9o1RCSY2kQNIXX6NZA" alt=""><figcaption></figcaption></figure>

#### **4.场景3：假关卡结束页**

1）新建场景3，并添加相关资产

2）同样地，调整各资产到合适的位置大小，根据资产类型对资产进行命名、编组、排序（详细内容可进项目内查看）

3）调整图层初始状态：将假关卡组先设为"隐藏"状态，后续通过定时事件来控制图层的显示，使过渡效果更自然

<figure><img src="/files/P2kLMp5h0PKeSTYYF94Z" alt=""><figcaption></figcaption></figure>

4）勾选场景3为【结束场景】，以便上报试玩结束

<figure><img src="/files/12i9X5DfuIGJKosnvfB8" alt=""><figcaption></figcaption></figure>

#### &#x20;<a href="#tpuup" id="tpuup"></a>

### Step2 - 横竖屏适配 <a href="#tpuup" id="tpuup"></a>

完成所有竖屏的排版后，我们还需对"横屏的排版"以及"横竖屏的屏幕适配方式"进行调整

#### 1.调整横屏排版

1）以场景1为例，切换至横屏模式，选中**所有最高层级**的图层

2）使用【**复用竖屏位置尺寸配置**】功能一键排版，然后再适当调整各图层的【位置】和【缩放比例】即可，让画面展示出完整的内容

3）场景2、场景3、全局场景同理

<div align="left"><figure><img src="/files/mICJ3DzAJpUUNUTgcfkv" alt=""><figcaption></figcaption></figure></div>

#### 2.调整屏幕适配方式 <a href="#tpuup" id="tpuup"></a>

若想让素材完美适配各类机型，还可对部分图层的适配方式进行调整

在本案例中，我们想要竖屏下的产品信息组始终位于各机型屏幕的顶部，所以我们调整其"屏幕适配方式"为居中贴顶适配；横屏模式为贴左上角适配（其他图层默认居中适配，无需调整）

<div><figure><img src="/files/XQW1V3hAbLSJ0wagbZAA" alt=""><figcaption><p>竖屏</p></figcaption></figure> <figure><img src="/files/054hrktW8LpOaTHkNdR7" alt=""><figcaption><p>横屏</p></figcaption></figure></div>

#### &#x20;<a href="#tpuup" id="tpuup"></a>

### Step3 - 动效设置 <a href="#tpuup" id="tpuup"></a>

本案例用到的动画和粒子特效如下，我们依次展开介绍：

* 场景1：手指指引动画、服装选项指引动画
* 场景2：指引组退场动画、消除组入场动画、手指指引动画、星光粒子消除特效
* 场景3：遮罩退场动画、美女待机序列帧退场动画、美女脱衣序列帧入场动画、假关卡组入场动画、烟雾粒子&爱心粒子换装特效

#### <mark style="background-color:yellow;">1.场景1-指引手：位移缓动&透明度缓动</mark>

* 选中指引手1图片\[gf\_hand]，添加动画-通用-位移缓动
* 选中指引手1组图层\[gf\_hand1]，添加动画-通用-透明度缓动

<div><figure><img src="/files/03bTVpkH3IP05Hko37nI" alt=""><figcaption></figcaption></figure> <figure><img src="/files/cEKcSVxIP4XblSy3MVBC" alt=""><figcaption></figcaption></figure></div>

* 依次复制两个动画给指引手2图片及组图层，并微调透明度动画的曲线
* 以上动画共同实现手指交替指引的效果(若只需要简单的二选一效果，使用一个手指图片做来回位移动画即可)

<div align="left"><figure><img src="/files/WJ0G0R29Ua8h2mii03Dm" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:yellow;">2.场景1-服装选项：弹性放大入场+位移缓动</mark>

* 选中服装选项1图片\[bubble1]，添加动画-进场动画-弹性放大入场。参数设置如下
* 继续添加动画-通用-位移缓动，作为选项动态指引动画。参数设置如下
* 复制两个动画给服装选项2图片\[bubble2]即可

<div><figure><img src="/files/g0aB3EmFxByZ6oXxJ3sJ" alt=""><figcaption></figcaption></figure> <figure><img src="/files/7n5ZTZnPZJqckUDUUUYK" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:yellow;">3.场景2-指引组：淡出</mark>

选中初始指引组\[admission]，添加动画-退场动画-淡出，参数设置如下：

<figure><img src="/files/wFejhtYIckAuF4AlQJD6" alt=""><figcaption></figcaption></figure>

#### <mark style="background-color:yellow;">4.场景2-消除组：淡入</mark>

选中核心消除组\[group\_match\_lv1]，添加动画-进场动画-淡入，参数设置如下：

<figure><img src="/files/9NfAUbQV3OaQBAAYLeEw" alt=""><figcaption></figcaption></figure>

#### <mark style="background-color:yellow;">5.场景2-指引手：位移缓动+淡出</mark>

* 复制场景1指引手的位移动画，给场景2的指引手\[gf\_hand]，作为指引动画
* 选中指引手组图层\[gf\_hand3]，添加动画-退场动画-淡出，并关闭自动播放，在后续通过事件设置控制动画的播放

<figure><img src="/files/WOokNxj7W2MrrPrLV0mU" alt=""><figcaption></figcaption></figure>

#### <mark style="background-color:yellow;">6.场景2-消除特效：星光粒子</mark>

* 打开公共粒子库，选择并添加合适的粒子特效到\[blockchose]组内
* 在本案例中，因五个消除坑位都可能出现方块，所以需要再复制四个粒子图层，每个坑位对应一个
* 注意同步调整横屏模式下的粒子位置
* 调整完毕后，先隐藏这些粒子图层，在后续通过事件设置来播放粒子特效

<figure><img src="/files/lLmPJkQuPIRE4XrzHyup" alt=""><figcaption></figcaption></figure>

#### <mark style="background-color:yellow;">7.场景3-遮罩：淡出</mark>

复制场景2初始指引组的淡出动画，给场景3的遮罩图片\[mask]，作为退场动画

<figure><img src="/files/HYQ240VPJMa5EEFqJD7e" alt=""><figcaption></figcaption></figure>

#### <mark style="background-color:yellow;">8.场景3-美女待机序列帧：淡出</mark>

继续复制动画给美女待机序列帧\[animation\_idle\_1]，作为退场动画，并微调参数

<figure><img src="/files/njtiQXaxDSAG05IlqGeO" alt=""><figcaption></figcaption></figure>

#### <mark style="background-color:yellow;">9.场景3-美女脱衣序列帧：淡入+缩放缓动</mark>

* 选中美女脱衣序列帧\[animation\_idle\_2]，添加动画-进场动画-淡入，参数设置如下
* 选做：继续添加动画-通用-缩放缓动，作为入场强调动画，参数设置如下

<div><figure><img src="/files/hWhfoRIaTKyDAt4vbXFR" alt=""><figcaption></figcaption></figure> <figure><img src="/files/YiGYCImZIGpdmowybwza" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:yellow;">10.场景3-假关卡组：淡入</mark>

复制淡入动画给假关卡组\[group\_match\_lv2]，并微调参数

<figure><img src="/files/AnVONui77DhfouBIGR25" alt=""><figcaption></figcaption></figure>

#### <mark style="background-color:yellow;">11.场景3-换装特效：烟雾粒子&爱心粒子</mark>

* 在公共粒子库选择并添加合适的粒子特效到\[group\_dressup]组内，并调整位置
* 注意同步调整横屏模式下的粒子位置

<figure><img src="/files/zdgh70tp2D1iGuGlz8Vf" alt=""><figcaption></figcaption></figure>

#### &#x20;<a href="#umduz" id="umduz"></a>

### <mark style="background-color:red;">Step4 - 事件设置</mark> <a href="#umduz" id="umduz"></a>

完成所有内容的搭建后，我们需要通过设置事件来串联起整个流程

⚠️注意：本案例核心的事件设置集中在"所有可被点击的方块图片"以及"场景2"上，这部分事件需结合【[全局变量](https://playturbo-doc.mindworks-creative.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/bian-ji-ye-mian-fen-qu-jie-shao/ding-bu-zi-chan-ku/quan-ju-bian-liang)】功能来实现。因图层较多制作会相对繁琐一些，<mark style="color:orange;">可优先设置好一个图层的事件，再通过事件的复制&粘贴功能快速完成制作！</mark>

接下来，我们按顺序依次讲解

#### **1.场景1：服装选项**

* 选中服装选项1图层\[bubble1]，添加事件-按下
* 添加响应事件：
  * 设置埋点2，并填入埋点名称如"玩家按下选项1"
  * 从头播放初始指引组的淡出动画
  * 从头播放一次点击音效
  * 跳转到下一场景
* 复制该事件给服装选项2图层\[bubble2]即可（同时修改埋点参数）

<figure><img src="/files/2QUS35qcQb9Ky0zKgVn5" alt=""><figcaption></figcaption></figure>

#### 🌟<mark style="color:red;">**2.添加全局变量**</mark>

因为要实现：

a. 放置坑位显示：判断玩家所有操作的可能性，来显示对应的结果

b. 交互开关：消除中禁止点击方块，同时清空消除坑位

c. 计算成功消除次数：玩家需消除所有方块（四组）后，进入结束页面

**要想实现以上效果，就需要使用**[**【全局变量】**](/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/bian-ji-ye-mian-fen-qu-jie-shao/ding-bu-zi-chan-ku/quan-ju-bian-liang.md)**。以下是对本案例全局变量用途的梳理，我们将以其中一个方块为例，展开介绍**

<figure><img src="/files/IrCQisgKdXJcuDs2mfTd" alt=""><figcaption></figcaption></figure>

1）首先，点击上方【全局变量】图标，添加变量

2）填写变量名称，如blockchose1，并设置变量类型与初始值，保存

<div align="left"><figure><img src="/files/i6sXlWSpKji6z93YYJ7x" alt=""><figcaption></figcaption></figure></div>

3）按照同样的操作方法，依次添加其他类型的变量

<div align="left"><figure><img src="/files/LZO9THWzxClCQV4V49nz" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">3.为其中一个方块添加事件与条件判断</mark>

以其中一个方块为例，选中图层\[block2\_1]，添加事件-按下

<mark style="color:orange;">因消除坑位共有5个，我们需要给每个方块设置5个条件判断 来决定方块该出现在哪个坑位</mark>

1）**添加条件判断1**：blockchose1=0 且 eliminate=false (对应: 当方块可点击且坑位1为空时)

<div align="left"><figure><img src="/files/BRgnEV4JdbHCRJ2g5DCE" alt=""><figcaption></figcaption></figure> <figure><img src="/files/PEN7y1yhqrfimVMTwcZS" alt=""><figcaption></figcaption></figure></div>

添加响应事件：

* 赋值，赋值blockchose1=2(对应: 坑位1已放置方块2)
* 隐藏原位置方块2；显示坑位1上的方块2
* 从头播放1次按下音效

<div align="left"><figure><img src="/files/ADtS43i0TnysECmbqwWu" alt=""><figcaption></figcaption></figure></div>

2）**继续添加条件判断2**：blockchose1≠0 且 blockchose2=0 且 eliminate=false (对应: 当方块可点击，且坑位1已有方块，坑位2为空时)

<div align="left"><figure><img src="/files/PX2p2K9e7J73t0wt3hZk" alt=""><figcaption></figcaption></figure> <figure><img src="/files/lWIayDQp3kxnbgIpNzos" alt=""><figcaption></figcaption></figure></div>

同理，添加响应事件：

* 赋值，赋值blockchose2=2 (对应: 坑位2已放置方块2)
* 隐藏原位置方块2；显示坑位2上的方块2
* 从头播放1次按下音效

<div align="left"><figure><img src="/files/TA68TJRk8vA61lOdQsSN" alt=""><figcaption></figcaption></figure></div>

3）同理，依次完成条件判断3、条件判断4、条件判断5的设置及其响应事件

* 条件判断3对应：当方块可点击，且坑位1&坑位2都已有方块，坑位3为空时
* 条件判断4对应: 当方块可点击，且坑位1&坑位2&坑位3都已有方块，坑位4为空时
* 条件判断5对应: 当方块可点击，且坑位1&坑位2&坑位3&坑位4都已有方块，坑位5为空时

<div align="left"><figure><img src="/files/e1qo4xhOW6SDjdRQ75Zl" alt=""><figcaption></figcaption></figure> <figure><img src="/files/RoEJsDE5MFkjvGl94x4I" alt=""><figcaption></figcaption></figure> <figure><img src="/files/OpVLtQLecrlq45BoU7Qq" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">4.快速复制事件给其他所有方块</mark>

在本案例中，每个方块的事件设置都是相同的逻辑，所以按照以上步骤完成一个方块的事件设置后：

1）我们点击"复制"按钮复制整个"按下"事件

<figure><img src="/files/mgZGuvxtYUUzvwEB9OFy" alt=""><figcaption></figcaption></figure>

2）按住Ctrl键，全选其他所有方块图层

3）点击上方"粘贴"按钮，选择【仅粘贴图层事件】。这样，所有方块都有了相同一套逻辑的事件与条件判断

4）然后逐一将每个方块的响应事件 **对应的响应对象** 进行微调即可（详细内容可进项目内查看）

<figure><img src="/files/p60BB5FrivVTqbXC0fvQ" alt=""><figcaption></figcaption></figure>

以上，我们就完成了所有方块的"按下"事件。接下来，我们通过场景上的条件判断来完成后续效果的实现。

#### <mark style="color:red;">5.在"场景2"添加条件判断与响应事件</mark>

选中场景2 - 添加事件 - 条件判断

**1）条件判断1-5：消除中禁止点击方块，同时清空消除坑位**

* 编辑条件判断1为：blockchose1=0 且 eliminate=true (对应: 当方块不可点击且坑位1为空时，即消除中)
* 添加响应事件：隐藏坑位1上 可能出现的两种方块
* 条件判断2/3/4/5同理：
  * 条件判断2：当方块不可点击，且坑位2为空时
  * 条件判断3：当方块不可点击，且坑位3为空时
  * 条件判断4：当方块不可点击，且坑位4为空时
  * 条件判断5：当方块不可点击，且坑位5为空时

<div align="left"><figure><img src="/files/qqBKi88CfvqMxwvJlTJH" alt=""><figcaption></figcaption></figure> <figure><img src="/files/2mlPBZWz4P1jX2PEmSIT" alt=""><figcaption></figcaption></figure> <figure><img src="/files/UODwv2CR3eodXW9NmQl8" alt=""><figcaption></figcaption></figure></div>

**2）条件判断6-15：消除结果与对应反馈**

* 编辑条件判断6：blockchose1≠0 且 blockchose1=blockchose2 且 blockchose1=blockchose3 (对应: 坑位1已有方块X，且坑位2&坑位3的方块图案与坑位1相同时)

<div align="left"><figure><img src="/files/O7mtXWkohohgQHxUhMg4" alt=""><figcaption></figcaption></figure> <figure><img src="/files/cDP3P5leODUl79epPObk" alt=""><figcaption></figcaption></figure></div>

* 添加响应事件：
  * 赋值，赋值elimination\_time+1 (对应: 已完成一组消除)
  * 赋值，赋值blockchose1/blockchose2/blockchose3=0、eliminate=true  (对应: 方块不可点击，同时清空前三个坑位)
  * 显示并播放前三个坑位的消除粒子特效、从头播放1次消除音效
  * 执行延迟0.5s后，赋值，eliminate=false (对应: 方块变为可点击状态）*<mark style="background-color:yellow;">因消除清空的逻辑和点击放置的逻辑同时判断可能会出错，所以需要做个时间差(即延迟0.5s)在禁用点击的同时控制已消除的元素清空</mark>*

<div align="left"><figure><img src="/files/ukicrT33mdX7S0aQcyZf" alt=""><figcaption></figcaption></figure></div>

* 按照同样的逻辑，需要<mark style="color:orange;">为所有消除的可能性设置条件判断</mark>。可能性共包含10种，依次为： "1-2-3"、 "1-2-4"、"1-2-5"、"1-3-4"、"1-3-5"、"1-4-5"、"2-3-4"、"2-3-5"、"2-4-5"、"3-4-5"
* 理清所有可能性后，依次设置条件判断7-条件判断15（详细内容可进项目内查看）

<div align="left"><figure><img src="/files/X2K50He8hK49T5SQD1uB" alt=""><figcaption></figcaption></figure></div>

**3）条件判断16：第一次有效操作**

* 编辑条件判断16为：blockchose1≠0  (对应: 坑位1已有方块，即玩家第一次有效操作)
* 添加响应事件：
  * 设置埋点4，编辑埋点名称为"玩家按下第一个方块"
  * 从头播放指引手组的淡出动画

<div align="left"><figure><img src="/files/joVkhWFv4HNcyFzzZkj9" alt=""><figcaption></figcaption></figure></div>

**4）条件判断17-18：消除次数及对应反馈**

* 编辑条件判断17为：elimination\_time=1  (对应: 完成一组消除)
* 添加响应事件：设置埋点5，编辑埋点名称为"成功消除一组方块"
* 编辑条件判断18为：elimination\_time=4  (对应: 完成四组消除)
* 添加响应事件：
  * 设置埋点6，编辑埋点名称为"成功消除所有方块"
  * 执行延迟0.5s后，跳转到下一场景（即结束页面）

<div align="left"><figure><img src="/files/VuFtKebsTKjs4wfSHZRY" alt=""><figcaption></figcaption></figure></div>

#### 6.场景3：定时触发

* 在场景3上添加事件 - 定时触发
* 添加响应事件：
  * 执行延迟0.4s后，播放1次美女尖叫音效
  * 执行延迟1.6s后，显示假关卡组、显示指引手、播放指引动画

<div align="left"><figure><img src="/files/F4GAJGsrBaKDXOenS8S4" alt=""><figcaption></figcaption></figure></div>

#### 7.场景3：手势区域

* 在覆盖全屏的手势区域上添加事件 - 按下
* 添加响应事件：
  * 设置埋点7，编辑埋点名称为"结束页触发跳转"
  * 从头播放1次点击音效
  * 跳转应用商店

*因手势区域放置于假关卡组内，当上一部分定时触发事件播完后，才会显示当前手势区域，"按下"事件才可被触发*

<figure><img src="/files/b1JbbPQGcwe2ZYw53AxS" alt=""><figcaption></figcaption></figure>

#### 8.全局场景：常驻跳转按钮

* 进入全局场景，给常驻跳转按钮组添加事件 - 按下
* 添加响应事件：跳转应用商店

<div align="left"><figure><img src="/files/W57UvyRJo6pghdoBtd9c" alt=""><figcaption></figcaption></figure></div>

以上，就是本案例用到的全部事件。完成所有事件设置，我们的素材就制作完成了。

#### &#x20;<a href="#j1kmp" id="j1kmp"></a>

### Step5 - 整体预览 <a href="#j1kmp" id="j1kmp"></a>

1）建议在制作过程中，每完成一部分操作，就及时预览，检查设置是否正确

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

<figure><img src="/files/3hjBXZKc0bjsXsKzzN8V" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">六、资源提供</mark>

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

{% file src="/files/cSWjTEgNhKeY9ualGoyC" %}


---

# 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/xiao-chu-pi-pei-wan-fa-an-li/san-xiao-zhuang-ban-kong-bai-zhi-zuo-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.