# 《货架三消》空白制作教程

温馨提示：本篇教程主要讲解**如何通过空白制作来做出"拖拽"三消玩法的2D素材**，建议搭配DEMO食用效果更佳哦！

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

* 【制作难度】：⭐⭐⭐⭐
* 【适用产品】：消除玩法产品
* 【交互方式】：拖拽到指定位置
* 【自由度】：半自由
* 【核心资产】：静帧图片
* 【核心功能】：拖拽到指定位置-隐藏/显示素材；全局变量

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

| 手机试玩效果最佳                                                                                                                                                                                                                                                   | 竖屏                                                                                                                                                                                                                                                                | 横屏                                                                                                                                                                                                                                                               |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FmmeMYOQ9PWh2UXKTIun9%2Fimage.png?alt=media&#x26;token=aba0bafc-ab38-46fa-be03-2557b6c83888" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F5prjZaX0cE8NLg7QFD7g%2FAnimation001.gif?alt=media&#x26;token=de91da5a-cce5-4f77-972c-04a12b588f98" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FGuKRflNTZLGhfzQrx2O1%2FAnimation00.gif?alt=media&#x26;token=3064ef36-402c-40f8-abda-eb96f479b0d4" alt="" data-size="original"> |
| 扫码试玩                                                                                                                                                                                                                                                       | [点击试玩](https://tinyurl.com/yf989yf6)                                                                                                                                                                                                                              | [点击试玩](https://tinyurl.com/yf989yf6)                                                                                                                                                                                                                             |

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

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

1）进入试玩，展示图示【货架初始画面】

2）出现【操作指引】，引导玩家向下拖动白色盒子完成排序消除

3）玩家拖动白色盒子到指定位置，播放【成功反馈】；否则返回原位

注意：①所有物品都能被拖拽，但只有拖拽正确才放置；②当绿色瓶子完成排序消除，褐色瓶子的拖拽事件即生效

4）玩家每完成一组排序消除，星星数量+1；当玩家完成三组消除(即星星数量为"3/3")时，进入结束页面

5）结束页面玩家全屏任意按下，跳转商店

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F1524QD3HBX4BCCiXHclv%2Fimage.png?alt=media&#x26;token=70801943-5e3f-4306-8ac0-73b8c7dba7f8" alt=""><figcaption></figcaption></figure></div>

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

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

**场景拆分：**&#x6839;据玩法梳理内容，我们可将本案例拆分为 2 个场景来制作，即核心玩法场景+结束页场景

<table data-full-width="false"><thead><tr><th width="136">场景名称</th><th width="321">场景1-核心玩法</th><th>场景2-结束页</th></tr></thead><tbody><tr><td><strong>效果预览</strong></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F5prjZaX0cE8NLg7QFD7g%2FAnimation001.gif?alt=media&#x26;token=de91da5a-cce5-4f77-972c-04a12b588f98" alt="" data-size="original"></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FSdqGldl5EOTpovss8Qai%2FAnimation3.gif?alt=media&#x26;token=2d828409-c1ae-44a5-8882-573d79d75922" alt="" data-size="original"></td></tr><tr><td><strong>场景描述</strong></td><td>玩家依次拖动三个目标物品(白色盒子/绿色瓶子/褐色瓶子)到指定位置，即可成功放置完成消除；拖动其他物品则返回原位</td><td>结束页面: 奖励面板+跳转按钮</td></tr><tr><td><strong>核心资产</strong></td><td><p><strong>静帧图片：</strong>货架、物品&#x26;物品外发光图片、指引手指</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><tr><td><strong>核心动画</strong></td><td>手指指引：位移+透明度+旋转缓动</td><td><p>奖励面板：缩放+透明度缓动</p><p>跳转按钮：缩放+透明度缓动</p></td></tr><tr><td><strong>核心事件</strong></td><td><p>触发对象：单个物品</p><p>触发事件：拖拽；拖拽到指定位置</p><p>响应事件：隐藏素材；显示素材；赋值(全局变量)</p></td><td><p>触发对象：场景2</p><p>触发事件：按下</p><p>响应事件：跳转应用商店；上报试玩结束</p></td></tr></tbody></table>

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

\*核心内容为Step4【事件设置】

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

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

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

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

2）在【全局场景】下添加常驻下载按钮、logo等产品信息

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fc4EtS8y6gPxTra970hZH%2Fimage.png?alt=media&#x26;token=a7f62304-7bdc-4e18-8c9f-ff256d705ae6" alt=""><figcaption></figcaption></figure>

#### **2.场景1**

1）将与核心玩法相关的资产添加进场景1

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

<mark style="color:orange;">**注意:**</mark>&#x20;

a. 此类玩法(指在玩家交互后,物品位置发生改变的玩法)的制作逻辑为 "在不同位置添加相同的物品，然后先隐藏放置后的物品，再通过事件设置显示放置后的物品，隐藏原位置的物品"，以此来实现目标效果

因此，"可被拖拽并放置的物品"就需要准备两张相同的图片资源。在本案例中，我们想要物品在拖拽过程中有外发光效果，所以各准备了一张普通物品图片以及一张物品外发光图片

b. 此外在本案例中，我们想要实现"在拖拽起某个物品后，其层级是在其他所有物品之上的"。<mark style="color:orange;">因图层有前后顺序的层级影响，所以每个物品也都需要准备两张相同的图片资源，将其中一张设为"可被拖动的物品"，另一张则设为"不可被拖动/仅在原地显示的物品"，然后将前者所有的图片编组，并将其层级置于后者的上方</mark>

c. 因为有三次不同位置的手指指引，所以手指图片也需要添加三个

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F7lR3ERT1Fp3qYQZi7txc%2Fimage.png?alt=media&#x26;token=113f2162-8cf3-41f3-8092-dfc54437347a" alt=""><figcaption><p>示意图</p></figcaption></figure>

3）调整图层初始状态：将所有可被拖动的物品(即层级较高的)设为"隐藏"状态，将所有不可被拖动的物品(即层级较低的)设为"显示"状态；将指引手指1和3设为"隐藏"状态，指引手指2设为"显示"状态。后续我们将通过事件来控制这些图层的隐藏/显示

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FU57XGzpejIfoMIvtUsRZ%2Fimage.png?alt=media&#x26;token=b2575a69-2829-485a-adb4-5a938625ef6b" alt="" width="464"><figcaption></figcaption></figure></div>

#### **3.场景2**

1）将与结束页面相关的资产添加进场景2

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FntcAoBdwMePurZ8nEgOX%2Fimage.png?alt=media&#x26;token=60f9b4b7-f933-4ddd-9c40-4cd76ac38dd1" alt=""><figcaption></figcaption></figure>

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

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

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

1）切换到横屏模式，选中所有最高层级的图层

2）使用【复用竖屏位置尺寸配置】功能一键排版，然后再适当调整各图层的【位置】和【缩放比例】即可

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FOak0nfPCrYzjFNyMnOkJ%2Fimage.png?alt=media&#x26;token=6c8637bb-a28d-4bea-90f8-af3a501a882d" alt=""><figcaption></figcaption></figure>

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

在本案例中，我们想要竖屏下的产品信息始终位于屏幕最上方，所以我们要调整其适配方式。直接在竖屏模式下选中产品信息组\[group\_product]，在右侧【屏幕适配方式】处点击向上图标即可完成设置（其他图层默认居中适配，无需调整）

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F2RGG0LgVQhvI0z2DPSHx%2Fimage.png?alt=media&#x26;token=48af1708-7fc5-448f-9bc8-290604d2899c" alt=""><figcaption></figcaption></figure>

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

在本案例中，使用到的动效如下：

动画：手指指引、奖励面板+跳转按钮

粒子特效：消除反馈(星星粒子)、结束页胜利反馈(星星/彩带粒子)

#### **1.动画:**&#x20;

**1-1）手指指引**

1）选中手指组\[hand\_1]，依次添加动画-通用-位移缓动、透明度缓动，来作为手指及物品的指引动画，参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FPsoHoSqj107nA6e96qrs%2Fimage.png?alt=media&#x26;token=251fbe0b-748b-40d3-bbee-adba6b97641e" alt=""><figcaption><p>位移缓动</p></figcaption></figure>

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FDZ0evBhidQ5EA2vR844e%2Fimage.png?alt=media&#x26;token=fceec17b-58e0-434e-a1a0-ae53285ace7e" alt=""><figcaption><p>透明度缓动</p></figcaption></figure>

2）选做：再选中手指图片\[gf\_hand1]，添加动画-通用-旋转缓动，参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fa3kOTHFMGuy7bohhjtGS%2Fimage.png?alt=media&#x26;token=26bba561-d0a1-4380-b6ec-70bbe0973bdc" alt=""><figcaption></figcaption></figure>

3）hand2 和hand3 的动画设置同理，可直接复制-粘贴，然后调整位移动画的"位移距离"即可

**1-2）奖励面板+跳转按钮**

1）选中奖励面板组\[board]，依次添加动画-通用-缩放缓动、透明度缓动，来作为入场动画

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FRBRkmc2oZjmZdJHKAYqX%2Fimage.png?alt=media&#x26;token=c8a4b8a9-327e-4e5c-a347-6a24be83e1ec" alt=""><figcaption></figcaption></figure>

2）参数设置如下：

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FvQDItKWSBvTHFTdtRldX%2Fimage.png?alt=media&#x26;token=fbf5a5ee-ab16-46cf-948e-3482ece59b97" alt="" width="563"><figcaption></figcaption></figure></div>

3）复制该组图层的动画到跳转按钮组\[btn\_download]，然后再添加一个缩放动画，作为入场后的循环指引动画

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FIRF7kOhTcD71YOEwwNir%2Fimage.png?alt=media&#x26;token=8366e655-81b2-432f-82b6-307fb05ede93" alt=""><figcaption></figcaption></figure>

#### **2.粒子特效**

**2-1）消除反馈**

1）在【公共资产库】中选择合适的粒子特效并添加

2）因本案例有3处不同的消除区域，所以需要再复制两个粒子图层

3）依次调整三个粒子特效的位置到对应区域，然后进行编组

4）将三个粒子特效设为"隐藏"状态，后续我们通过事件来控制粒子的显示和播放

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FCTOPZbPCAAheOI8lVBRu%2Fimage.png?alt=media&#x26;token=7875e000-53ed-45bf-8e06-a674c61efa25" alt=""><figcaption></figcaption></figure>

**2-2）结束页胜利反馈**

同理，对场景2中的胜利反馈粒子特效进行设置（注:场景2的粒子特效因为是入场自动播放的，也可以直接设为"显示"状态）

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FhhZWQJhKggUad0beyuog%2Fimage.png?alt=media&#x26;token=830f1625-9006-485a-86d3-c3647b110bcc" alt=""><figcaption></figcaption></figure>

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

本案例的所有事件集中设置在"所有可被拖动的物品组"以及"场景"上，我们按操作顺序依次讲解

<mark style="background-color:green;">**Part1：全局变量**</mark>

首先，因为要实现：

a. 计算成功操作次数：玩家每完成一组消除，星星数量+1；当完成三组消除(即星星数量为3)时，进入结束页面

b. 无操作指引：当玩家完成任意一组消除后，出现下一组手指指引；玩家每3秒钟内无任何操作时，出现对应手指指引

要想实现以上效果，就需要使用[【全局变量】](https://doc.playturbo.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)，以下是对本案例所使用到的全局变量的梳理，我们以其中一个物品为例，展开介绍（若您在制作时不需要相关效果，可直接删除相关变量）

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FwDSV3GpGu7gTem705d4N%2Fimage.png?alt=media&#x26;token=6ab4342c-b5d9-41b0-820b-b2815ba26002" alt=""><figcaption></figcaption></figure></div>

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

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

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

3）按照同样的方法，依次添加Guidelines与Corresponding\_finger两个变量

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FgKmSXG9R1a0RMCOpEPrI%2Fimage.png?alt=media&#x26;token=85e5965b-e709-4963-ad20-fee35a4813d3" alt="" width="266"><figcaption></figcaption></figure></div>

#### <mark style="color:red;">2.为所有"可被拖动的物品组"添加触发事件与响应事件</mark>

以第一个物品即道具6\[Proper6\_a1]为例，选中该组图层

1）添加事件-拖拽，选择拖拽方向为"任意方向"

* 添加响应事件：赋值，赋值Guidelines=2 (对应: 玩家有操作，隐藏整个手指组并取消计时)
* 添加响应事件：显示外发光道具6；隐藏原位置道具6；隐藏初始外发光道具1(白色盒子)
* 添加响应事件：从头播放1次按下音效

2）添加事件-抬起

* 添加响应事件：赋值，赋值Guidelines=1 (对应: 玩家无操作，计时3秒后显示对应手指)
* 添加响应事件：显示原位置道具6；隐藏外发光道具6

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FVKzek9d31QNdrzhxyERb%2Fimage.png?alt=media&#x26;token=904e7336-ab74-439a-b684-ec3ca2cb63e8" alt=""><figcaption></figcaption></figure>

3）快速复制事件给其他所有"可被拖动的物品组"

* 设置好以上两类事件，点击复制图层\[Proper6\_a1]

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fgj0kz7WxY5wmmK8gM94o%2Fimage.png?alt=media&#x26;token=4e895954-9822-4ccc-9045-b88994d975d5" alt=""><figcaption></figcaption></figure></div>

* 按住Ctrl键，全选所有"可被拖动的物品组"
* 点击粘贴按钮，选择【仅粘贴图层事件】

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FVdzFxOOOJ7ruTvFyS3gS%2Fimage.png?alt=media&#x26;token=044cc96a-5b0e-4b90-a1a4-105c0772f001" alt=""><figcaption></figcaption></figure>

* 这样，所有"可被拖动的物品组"都有了对应的拖拽事件与抬起事件
* 然后将每个物品组所对应的响应对象进行微调即可

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Foo9qkZFR2OXFWLh1HzjL%2Fimage.png?alt=media&#x26;token=f51d0161-3d64-436e-8ade-09c07d0aed48" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">3.为三个"可被拖动并放置的物品组"添加触发事件与响应事件</mark>

以白色盒子即道具1\[Proper1\_a2]为例，选中该组图层

1）添加事件-拖拽到指定位置

2）编辑指定区域，并选择拖拽方向为"任意方向"

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FRdqWeSJLTtKAOYVm5NO8%2Fimage.png?alt=media&#x26;token=cedcd5d4-0c6b-42f6-b38d-7e30191eb86f" alt=""><figcaption></figcaption></figure></div>

* 添加响应事件：设置埋点，并填入埋点名称如"玩家正确放置白色盒子"
* 添加响应事件：赋值，赋值Guidelines=1 (对应: 玩家无操作，计时3秒后显示对应手指)；赋值Cumulative\_times+1 (对应: 已完成一组消除)；赋值Corresponding\_finger=2  (对应: ≠1,白色盒子已消除，显示指引手指2或3)
* 添加响应事件：禁用道具1白色盒子\[Proper1\_a2]的拖拽事件与抬起事件
* 添加响应事件：隐藏外发光道具1白色盒子；显示放置后的道具1
* 添加响应事件：执行延迟0.1s后，隐藏第三个格子整个组\[proper\_C]；同时显示并播放消除粒子特效；从头播放1次消除音效

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FF4Ov3rzQBM4FEoZ4zwcw%2Fimage.png?alt=media&#x26;token=36908c92-ba98-4da9-b231-ab8cf55f6785" alt=""><figcaption></figcaption></figure>

3）快速复制事件给其他两个"可被拖动并放置的物品组"

* 点击复制\[Proper1\_a2]的"拖拽到指定位置"事件

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FqdP3qb876R70wegxcPbt%2Fimage.png?alt=media&#x26;token=98fb8b1d-1068-4e4c-a640-35b6d0d6ec12" alt=""><figcaption></figcaption></figure></div>

* 按住Ctrl键，选中两外两个组\[Proper2\_a3]和\[Proper3\_a3\_yes]
* 点击粘贴按钮，选择【仅粘贴图层事件】
* 然后依次将两个物品组所对应的响应对象进行微调

4）<mark style="color:orange;">**注意：**</mark><mark style="color:orange;">在前期玩法梳理阶段，我们设定了"只有当绿色瓶子完成消除后，褐色瓶子的拖拽事件才生效"，所以对应地，相关指引手指的出现也是有先后顺序的，所以hand2和hand3不需要用全局变量来控制，只需在绿色瓶子被"拖拽到指定位置"后，隐藏hand2并显示hand3就可以</mark>

因此，我们需要对道具2\[Proper2\_a3]的响应事件进行额外调整

* 在执行延迟后添加响应事件：隐藏hand2；显示hand3
* 添加响应事件：隐藏"仅可被拖动"的道具3；显示"可被拖动并放置"的道具3

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FAUtfqOOqDQIV33YqzbJ6%2Fimage.png?alt=media&#x26;token=c0eca4ac-5a48-48e8-8a8a-f7e698d68c5b" alt=""><figcaption></figcaption></figure>

以上，我们就完成了所有"可被拖动的物品组"的事件设置。接下来，我们在场景上添加事件

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

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

**1）条件判断1-3：计算成功操作次数**

* 编辑条件判断1为：Cumulative\_times=1 (对应: 玩家已完成一组消除)
* 勾选"只生效一次"
* 添加响应事件：隐藏文本0；显示文本1

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FfmH4QoaUZqKiraPatAAV%2Fimage.png?alt=media&#x26;token=8764a36b-b664-4e99-8684-2adda25a57d1" alt=""><figcaption></figcaption></figure></div>

* 同理，依次添加条件判断2和条件判断3，并设置对应文本的显示/隐藏
* 在条件判断3额外添加响应事件：执行延迟0.7s后，跳转到下一场景

<mark style="color:orange;">注：也就是当玩家累计完成三组消除后，进入结束页面</mark>

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fn7j1Pk8z3tUAaLGgTL3D%2Fimage.png?alt=media&#x26;token=504505af-64a2-4116-86b2-38ba2f17bbe5" alt=""><figcaption></figcaption></figure></div>

<mark style="color:orange;">**注意：**</mark><mark style="color:orange;">前面有提到，hand2和hand3有出现的先后顺序，所以不需要用全局变量来控制。和"无操作指引"相关的变量仅用来判断道具1的状态：如果道具1未完成放置就显示hand1并播放其动画；如果道具1完成了放置就隐藏hand1，显示组\[hand\_2\_3]，并播放对应动画（组里hand2和hand3的状态由道具2的拖拽控制）</mark>

按照这个逻辑，我们设置条件判断4-7

**2）条件判断4-5：无操作指引（控制是否要出现无操作指引）**

* 编辑条件判断4：Guidelines=1 (对应: 玩家无操作，计时3秒后显示对应手指)。添加响应事件：执行延迟3s后，显示整个手指组；从头播放对应手指指引动画
* 编辑条件判断5：Guidelines=2 (对应: 玩家有操作，隐藏整个手指组并取消计时)。添加响应事件：隐藏整个手指组；取消3s执行延迟

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FcKn5nJW5iqIEHVH5EsAY%2Fimage.png?alt=media&#x26;token=29e52e22-ef73-499b-a336-6ad02c70b59b" alt="" width="522"><figcaption></figcaption></figure></div>

**3）条件判断6-7：无操作指引（控制实际要出现哪一个手指）**

* 编辑条件判断6：Corresponding\_finger=1 (对应: 白色盒子还未消除，显示初始指引手指1)。添加响应事件：显示hand1；隐藏组\[hand\_2\_3]
* 编辑条件判断7：Corresponding\_finger≠1 (对应: 白色盒子已消除，显示指引手指2或3)。添加响应事件：隐藏hand1；显示组\[hand\_2\_3]

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FBeeH2ZTQgZtIyGl2cWXc%2Fimage.png?alt=media&#x26;token=a16ca31c-e5d6-4f3f-8645-48fd6a3c4d9b" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:green;">**Part2：普通事件**</mark>

#### <mark style="color:red;">1.场景: Scene 1</mark>

1）选中场景1 - 添加事件 - 定时触发

2）添加响应事件：执行延迟0s即入场时，显示外发光道具1；显示并播放hand1全部动画

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fc1P2Q9s5nUr0oWfNxarf%2Fimage.png?alt=media&#x26;token=605514c2-fc19-4d70-bec1-0afe3d237561" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">2.场景: Scene 2</mark>

1）同理，选中场景2 - 添加事件 - 定时触发

2）添加响应事件：执行延迟0s即入场时，从头播放1次胜利音效；显示并播放彩带粒子特效；从头播放奖励面板与跳转按钮的全部动画

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F8Yrf7cvPlKgTVr0G1b0q%2Fimage.png?alt=media&#x26;token=953bb038-dfba-4f55-afdd-c835efec07aa" alt=""><figcaption></figcaption></figure></div>

<mark style="color:orange;">说明：以上两组【定时触发】事件，是针对"进入场景时需要立即播放相关效果"的设置。您也可以不设置这两组事件，在Step1-场景搭建时，将对应素材设置为"显示"状态/打开入场自动播放即可</mark>

3）继续在场景2下添加事件 - 按下

4）添加响应事件：设置埋点4，并填写埋点名称如"结束页触发跳转"

5）添加响应事件：上报试玩结束；跳转应用商店

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fs7bB7lslOVRMB3HXLx1t%2Fimage.png?alt=media&#x26;token=50af3f39-adf0-4cc6-8b28-e818318a812c" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">3.图层：常驻下载按钮组</mark>

1）进入全局场景，选择图层\[group\_download]

2）添加事件 - 按下

3）添加响应事件 - 跳转应用商店

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FV4QUdEQoIlGf98p8qOZ1%2Fimage.png?alt=media&#x26;token=8ea45bcf-f4cd-4c72-a784-e89793c0547a" alt=""><figcaption></figcaption></figure></div>

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

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

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

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FvAXpAEt1x1TLfDA9U37y%2Fimage.png?alt=media&#x26;token=7cc4a6af-0bef-4768-9dcf-f12203b698d2" alt=""><figcaption></figcaption></figure>

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

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

{% file src="<https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FpoSF1rkvsj3f1AXWyV8Y%2F%E8%B4%A7%E6%9E%B6%E4%B8%89%E6%B6%88%E7%A9%BA%E7%99%BD%E5%88%B6%E4%BD%9C_%E8%B5%84%E6%BA%90.zip?alt=media&token=929a6795-ffaa-41b0-8021-80e55a82ac7d>" %}

<mark style="background-color:blue;">**补充说明：**</mark>

当前受工具功能限制，**暂时无法通过空白制作做出全自由的"货架三消玩法"的素材**(也就是像模板"货架物品三消"那样能拖动任意物品到任意位置)，因此，在您制作此类玩法的素材时，我们建议：

1）优先使用模板[【货架物品三消】](https://tinyurl.com/65wy2v5m)进行 换肤制作 或 自由制作；

2）若您想自行设计货架布局或加入其它玩法，则推荐您参考本案例DEMO和教程进行空白制作(拖拽到正确位置才放置，不正确就返回原位)

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FqHoLt5mi8QHLD6jazpEK%2Fimage.png?alt=media&#x26;token=a5c1e73d-1594-4a08-bb4e-fb8d54472a08" alt="" width="563"><figcaption></figcaption></figure></div>