> For the complete documentation index, see [llms.txt](https://doc.playturbo.cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](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).

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

温馨提示：本篇教程主要讲解如何通过**空白制作**来做出"三消+装扮"玩法结合的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" %}