# 《纸牌接龙》空白制作教程

温馨提示：本篇教程主要讲解如何**通过空白制作来做出"纸牌接龙"玩法的2D可玩素材**，建议搭配[DEMO](https://tinyurl.com/2p89uz5r)食用效果更佳哦！

*\*如需DEMO，可联系您的创意顾问 推到您的Playturbo账号中*

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

* 【制作难度】：⭐⭐⭐
* 【适用产品】：纸牌接龙
* 【交互方式】：拖拽、按下
* 【自由度】：半自由
* 【核心资产】：静帧图片
* 【核心功能】：拖拽到指定位置 - 隐藏拖拽纸牌/显示目标位置纸牌；全局变量

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

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

<table><thead><tr><th width="210.33333333333331">手机试玩效果最佳</th><th>竖屏</th><th>横屏</th></tr></thead><tbody><tr><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FGc2ma8de6T2EUIRa15jW%2Fimage.png?alt=media&#x26;token=214981c1-fd14-48c6-b4a1-e35440a51e1a" 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%2FDRLnkOIC7uaOjKjjMZgx%2FAnimation1.gif?alt=media&#x26;token=5bacfe82-c32e-43f6-b008-037781064619" 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%2FbePIx3SnSdwFB14rwcjw%2FAnimation2.gif?alt=media&#x26;token=01eef647-cea5-4dfe-82aa-f7a29e9419d4" alt="" data-size="original"></td></tr><tr><td>扫码试玩</td><td><a href="https://tinyurl.com/2p89uz5r">点击试玩</a></td><td><a href="https://tinyurl.com/2p89uz5r">点击试玩</a></td></tr></tbody></table>

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

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

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

1）进入试玩，扑克布局展示如图。出现【操作指引】，引导玩家拖动**红心A**到上方坑位；

2）此时，玩家操作的可能性有3种，都可拖动：

* 拖动**红心A**到目标坑位，播放【成功反馈】，露出下一张 方片8；
* 拖动黑桃4到红心5下方，播放【接龙反馈】，露出下一张 黑桃2；
* 拖动红心7到黑桃8下方，播放【接龙反馈】，露出下一张 **梅花A**；

3）玩家拖动**梅花A**到目标坑位，播放【成功反馈】，露出下一张 方片9；

4）此时，玩家操作的可能性有2种，都可拖动：

* 拖动方片9到梅花10下，播放【接龙反馈】，露出下一张 黑桃3；
  * 再拖动红7黑8到方9花10下，播放【接龙反馈】，露出下一张 **方片A**；
* 拖动红7黑8到方片9下，播放【接龙反馈】，露出下一张 **方片A**；
  * 再拖动7-8-9到梅花10下，播放【接龙反馈】，露出下一张 黑桃3；

5）<mark style="color:orange;">当玩家成功拖动</mark><mark style="color:orange;">**方片A**</mark><mark style="color:orange;">到目标坑位后</mark>，播放【成功反馈】，露出下一张 方片J，并<mark style="color:orange;">判定试玩结束</mark>；

6）诱导跳转：出现【操作指引】，引导玩家拖动梅花10(9-8-7)到方片J下，此时玩家全屏按下，即跳转商店

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FY8JsKdH5lrPQh5Kcjk6S%2Fimage.png?alt=media&#x26;token=d010e0f7-f36b-4f2e-995e-c10c585d766f" alt=""><figcaption></figcaption></figure></div>

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

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

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

**场景拆分：**&#x56E0;本案例都在一种牌型上交互，为了便于理解&操作，我们只用1个场景来制作

<table data-full-width="false"><thead><tr><th width="156">场景名称</th><th width="591">场景1-核心玩法</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%2FZOrztfLHXEgyUsYB7Fu1%2Fimage.png?alt=media&#x26;token=6a341f84-8799-47f8-ad27-d42cd74dd443" alt="" data-size="original"></td></tr><tr><td><strong>场景描述</strong></td><td>玩家根据游戏规则完成纸牌接龙，当成功拖动方片A到目标坑位后，结束试玩</td></tr><tr><td><strong>核心资产</strong></td><td><p><strong>静帧图片：</strong>各花色扑克牌、扑克牌背面图、花色A坑位图、分数面板、指引手</p><p><strong>粒子：</strong>星光粒子</p><p><strong>音频：</strong>翻牌音效、错误音效、正确音效、放置音效</p></td></tr><tr><td><strong>核心动画</strong></td><td><p><strong>入场&#x26;结束指引手：</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><hr><p><strong>触发对象：</strong>不可被拖拽的纸牌</p><p><strong>触发事件：</strong>按下</p><p><strong>响应事件：</strong>播放错误反馈</p><hr><p><strong>触发对象：</strong>场景</p><p><strong>触发事件：</strong>条件判断</p><p><strong>响应事件：</strong>隐藏旧分数/显示新分数</p></td></tr></tbody></table>

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

## <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="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FN7tHZ7rbWosSexB1zKxr%2Fimage.png?alt=media&#x26;token=f8f68b81-050e-48f2-9cc3-1fcbbedc74a3" alt=""><figcaption></figcaption></figure>

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

1）在场景1中添加核心玩法相关资产：

* **图片：**&#x5404;花色扑克牌、扑克牌背面图、花色A坑位图、分数面板、指引手
* **音频：**&#x7FFB;牌音效、错误音效、正确音效、放置音效

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FViFSu9b9gcUhJ13DDUMv%2Fimage.png?alt=media&#x26;token=02fefd1a-beeb-4c38-aca9-f860c1bccc2f" alt=""><figcaption></figcaption></figure>

⚠️注意:

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

<mark style="color:orange;">因此，对于可拖拽的纸牌，应被添加在各个可能出现的位置上。</mark>以纸牌黑桃4为例，除了初始状态位于第三列位置，它还可能被放置于第一列的红心5之下，因此黑桃4就需要添加两次，分别放置于对应的组内

b. **此外在本案例中，我们要实现"被拖拽的纸牌，其层级是在其他所有纸牌之上的"。因图层受前后顺序的层级影响，所以可拖拽的纸牌不能只有一张，还需要额外再添加一张，用来处理层级问题**

<mark style="color:orange;">处理方式：一张作为"可被拖拽的"，另一张作为"不可被拖拽的/仅在原地显示的"，然后将前者编组，层级置于后者的上方</mark>

3）调整图层初始状态：显示"初始就要展示"的图层；隐藏"初始不展示 要通过玩家交互后才显示"的图层

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

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

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

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

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

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

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

3）全局场景同理

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FhYEa9U9Llimi0RnXE67F%2Fimage.png?alt=media&#x26;token=9836cb4d-9e65-42a3-ad6e-b1a5017eef18" alt=""><figcaption></figcaption></figure>

#### **2.调整屏幕适配方式**

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

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FfSWUtEYjjzTDGewu7xRf%2Fimage.png?alt=media&#x26;token=5c97a337-8935-44b7-a440-b5e2cb240d04" alt=""><figcaption></figcaption></figure>

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

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

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

手指指引动画、翻牌旋转动画、错误点击旋转动画、成功放置后的星光粒子特效

#### **1.入场&结束指引手：**&#x4F4D;移缓动&透明度缓动&旋转缓动

* 选中入场指引手图片\[gf\_hand]，添加动画-通用-旋转缓动
* 选中入场指引手组图层\[gf\_begin]，添加动画-通用-位移缓动&透明度缓动
* 三个动画共同实现入场指引效果(若只需要简单的效果，使用一个位移动画即可)。具体参数设置如下：

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FuzPPXDmlsIuMOI4DATo6%2Fimage.png?alt=media&#x26;token=d2598f3e-9aa3-4cb9-b939-20d6c566568a" alt=""><figcaption></figcaption></figure></div>

* 因入场指引和结束指引的动画是类似的，分别复制以上两个图层的动画到结束指引手上，微调参数即可

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F8gjnb3fZlpe2Znm3XKn2%2Fimage.png?alt=media&#x26;token=85fec53a-11ab-4078-932c-aa804bc39d95" alt=""><figcaption></figcaption></figure></div>

#### **2.无操作指引手：**&#x6DE1;入&位移缓动

选中通用指引手组图层\[gf\_common]，添加动画-通用-位移缓动，添加动画-进场动画-淡入，作为无操作时的通用指引动画。参数设置如下：

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fgp7PpiZplArJ7CuR5qJJ%2Fimage.png?alt=media&#x26;token=397496ba-4211-4cb8-a14c-28005a0a576b" alt=""><figcaption></figcaption></figure></div>

#### 3.**翻牌效果：**&#x5DE6;右展开

* 选中其中一张待翻开的纸牌，添加动画-进场动画-左右展开，作为纸牌出现的翻转动画。参数设置如下：
* 复制该动画，按住Ctrl键选中其余所有待翻开的纸牌图层，一键粘贴即可

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FSA2QbVQ69u2Ce1YGy0kO%2Fimage.png?alt=media&#x26;token=297d88db-8844-47eb-a248-9813f9ac47be" alt=""><figcaption></figcaption></figure>

#### 4.**错误反馈：**&#x65CB;转缓动

当点击不可拖拽的纸牌时，会触发纸牌晃动的错误反馈

* 选中其中一张不可拖拽的纸牌，添加动画-通用-旋转缓动。参数设置如下：
* 同理，复制该动画，按住Ctrl键选中其余所有不可拖拽的纸牌图层，一键粘贴即可

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FELizG1HZHDVJjgvzlx8Z%2Fimage.png?alt=media&#x26;token=f1cd8935-a00d-4611-a552-7026d4f1af5b" alt=""><figcaption></figcaption></figure>

#### 5.星光粒子**特效**

* 打开公共粒子库，选择并添加合适的粒子特效到\[group\_set]组内
* 在本案例中，因前三个坑位都可能出现纸牌A被放置，所以需要再复制两个粒子图层，每个坑位对应一个粒子特效
* 注意同步调整横屏模式下的粒子位置
* 调整完毕后，隐藏三个粒子图层，在后续通过触发事件来播放粒子特效

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FnpeogaVYNAP6l3hv7VH0%2Fimage.png?alt=media&#x26;token=369f65b6-e125-4abd-8863-ec0c0db3d4f6" alt=""><figcaption></figcaption></figure>

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

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

完成所有内容的搭建后，我们需要通过设置事件来串联起整个流程。本案例的事件设置可分为四类：

* **可被拖拽的其他纸牌：**&#x62D6;拽后未放置到指定位置 & 拖拽后放置到指定位置 分别触发什么效果
* **可被拖拽的纸牌A：**&#x62D6;拽后未放置到指定位置 & 拖拽后放置到指定位置 分别触发什么效果(事件设置逻辑同上)，<mark style="color:red;">且需额外使用【条件判断】 来判定当前目标坑位是否可以放置纸牌A</mark>
* **不可被拖拽的纸牌：**&#x6309;下后播放错误反馈
* **跳转事件：**&#x5728;所有需要跳转商店的位置设置跳转事件

注意，前两类事件需结合【[全局变量](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)】来实现完整的效果。但本案例事件设置的难度并不算高，因图层较多会相对繁琐一些，<mark style="color:orange;">可优先设置好一个图层的事件，再通过事件的复制&粘贴功能快速完成制作</mark>

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

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

因为要实现：

a. 当拖拽纸牌A放置到上方坑位时，需按从左到右的顺序依次放置。如拖拽梅花A时，若坑位1还没有纸牌，则梅花A可以被放置在坑位1；若坑位1已有红心A，则梅花A只能按顺序被放置在坑位2

b. 计算成功接龙的分数：玩家每正确放置一次纸牌，分数+10

要想实现以上效果，就需要使用【全局变量】功能。首先，添加变量

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

2）填写变量名称如"pit1"，为了便于理解，在此可将变量类型设置为"文本"，并命名初始值为"empty">>>代表坑位1的初始状态

3）按照同样的方法，依次添加"pit2"、"pit3"两个变量>>>分别代表坑位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%2FVAgIeB4sPhdS3jxLD2B4%2Fimage.png?alt=media&#x26;token=914c16ce-6b8e-4cd3-af25-8563c769f0e8" alt=""><figcaption></figcaption></figure></div>

4）再添加一个"数值"类型的变量score，将初始值设为"0">>>代表初始的分数值

5）保存以上变量，开始进行事件设置

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FGQJ2gyvwxXDx823GqfxZ%2Fimage.png?alt=media&#x26;token=3591c221-0324-40a6-b72d-2dcf77359f00" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">2.为所有"</mark><mark style="color:red;">**可被拖拽的其他纸牌**</mark><mark style="color:red;">"添加触发事件与响应事件</mark>

（💡此类事件设置集中在红色区域图层）

以纸牌黑桃4为例，选中可被拖拽的黑桃4组图层\[3\_spade4\_drag]

1）添加事件-**拖拽**，选择拖拽范围为"全屏"，拖拽方向为"任意方向"。添加响应事件：

* 显示素材\[spade4]，即组内可被拖拽的黑桃4
* 隐藏素材\[3\_spade4]，即初始展示的黑桃4
* 隐藏素材\[gf\_begin]&\[gf\_common]，即入场指引手&无操作指引手
* 从头播放1次纸牌拖拽音效

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FVUtgzos1e3ajiH7RNMi3%2Fimage.png?alt=media&#x26;token=0265d714-ab3c-40bb-a29d-7f4586564b60" alt=""><figcaption></figcaption></figure></div>

2）添加事件-**抬起**。添加响应事件：

* 隐藏素材\[spade4]，即组内可被拖拽的黑桃4
* 显示素材\[3\_spade4]，即初始展示的黑桃4
* 显示素材\[gf\_common]，即无操作指引手，并从头播放指引动画

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FfJPwqrC5x8WnFizcHrvB%2Fimage.png?alt=media&#x26;token=871f1ae1-3c79-4202-b3bf-c0a7895c4196" alt=""><figcaption></figcaption></figure></div>

<mark style="color:orange;">以上两组事件为"拖拽但未放置到指定位置"的效果设置</mark>

3）继续添加事件-**拖拽到指定位置**，编辑拖拽区域为红心5所在位置，选择拖拽范围为"全屏"，拖拽方向为"任意方向"。添加响应事件：

* 设置埋点1，并填入埋点名称如"成功放置黑桃4或红心7"
* 赋值，赋值score+10 (对应: 正确放置一次纸牌，分数+10)
* 禁用\[3\_spade4\_drag]的抬起事件（因为在此事件下，黑桃4已被正确放置，无需再触发抬手事件）
* 禁用\[1\_heart5]的按下事件（即不可被拖拽的红心5，按下后会播放错误反馈的事件。后续会设置）
* 隐藏素材\[3\_spade4\_drag]，即可被拖拽的黑桃4组
* 显示素材\[1\_spade4]，即正确放置后的黑桃4
* 隐藏素材\[3\_spade2\_back]，即黑桃2的纸牌背面
* 显示素材\[3\_spade2]，即被翻出的黑桃2（因黑桃2初始状态为"隐藏"，且黑桃2的"左右展开"动画已设为"自动播放"，默认在黑桃2初次显示的时候自动播放其动画，因此无需单独设置播放动画的响应事件）
* 显示素材\[gf\_common]，即无操作指引手，并从头播放指引动画
* 从头播放1次正确音效

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FC4af4FdFO8ALIIU4hpNE%2Fimage.png?alt=media&#x26;token=322defaf-658e-4b83-b55b-441637ddf617" alt=""><figcaption></figcaption></figure></div>

<mark style="color:orange;">以上事件为"拖拽且放置到了指定位置"的效果设置</mark>

4）快速**复制事件**给其他所有"可被拖拽的其他纸牌"

* 设置完以上事件，点击复制图层\[3\_spade4\_drag]
* 按住Ctrl键全选所有"可被拖拽的其他纸牌"图层，点击粘贴按钮，选择【仅粘贴图层事件】
* 这样，所有"可被拖拽的其他纸牌"都有了对应的拖拽与抬起事件
* 然后微调每个纸牌图层所对应的**拖拽区域**和**响应事件**即可

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fkk9BlkHrHgH3aQPCEa8l%2Fimage.png?alt=media&#x26;token=bd90d389-b6c2-4f3c-93da-2e7cd31baf6e" 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%2FSrfmp15ED4RLlAd4F29Q%2Fimage.png?alt=media&#x26;token=4a0f7879-447c-4645-87cc-e5dad702e576" alt=""><figcaption><p>粘贴</p></figcaption></figure>

#### <mark style="color:red;">3.为所有"</mark><mark style="color:red;">**可被拖拽的纸牌A**</mark><mark style="color:red;">"添加触发事件与响应事件</mark>

（💡此类事件设置集中在红色区域图层）

以纸牌红心A为例，选中可被拖拽的红心A组图层\[6\_hearta\_drag]

1）可先**粘贴**以上事件，**调整**对应的响应对象

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F3eg9MuSZ3Y0M99qFguKP%2Fimage.png?alt=media&#x26;token=0fcce136-8fb8-4597-912a-40d5f4dc082d" alt=""><figcaption><p>拖拽&#x26;抬起 事件</p></figcaption></figure></div>

2）在【拖拽到指定位置】事件下，先**编辑该拖拽区域**为坑位1的区域，再**调整响应事件**：

* 删除'按下播放错误反馈'的禁用事件
* 添加响应事件：显示并播放坑位1的粒子特效

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FpOIktWW8txYFbfgkmPpK%2Fimage.png?alt=media&#x26;token=039011a7-401b-433a-a37c-d680e0ca14bc" alt=""><figcaption><p>拖拽到指定位置 事件</p></figcaption></figure></div>

3）在【拖拽到指定位置】事件下，**添加【条件判断】**：当pit1=empty (对应: 坑位1为空)

并添加响应事件：赋值，赋值pit1=hearta (对应: 坑位1不为空，已放置红心A)

4）**复制&粘贴**两次该【拖拽到指定位置】事件到本图层上，分别编辑拖拽区域并修改条件判断的内容和赋值事件

* 当pit1≠empty 且pit2=empty (对应: 坑位1不为空且坑位2为空)：赋值pit2=hearta (对应: 坑位2不为空，已放置红心A)
* 当pit1≠empty 且pit2≠empty (对应: 坑位1和坑位2都不为空)：赋值pit3=hearta (对应: 坑位3不为空，已放置红心A)

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fyc7CSKi0v2K8wIv9sDXh%2Fimage.png?alt=media&#x26;token=68c91603-3462-419f-a810-9deb32a0fb28" alt=""><figcaption></figcaption></figure></div>

5）快速**复制事件**给其他所有"可被拖拽的纸牌A"

* 设置完以上事件，点击复制组图层\[6\_hearta\_drag]
* 按住Ctrl键，全选所有"可被拖拽的纸牌A"图层（即梅花A和方片A）
* 点击粘贴按钮，选择【仅粘贴图层事件】
* 然后微调每个图层对应的**拖拽区域&条件判断&响应对象**即可

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FCdSmlJcnLSVS0DL51oh7%2Fimage.png?alt=media&#x26;token=79c077d4-c8e0-4794-aa44-4156b41c72df" alt=""><figcaption></figcaption></figure></div>

⚠️<mark style="color:orange;">**注意：**</mark>

* 因方片A没有可能被放置在坑位1，所以只需考虑坑位2和坑位3的状态，所以可删除"坑位1为空"的条件判断事件
* 在本案例中，我们设定"当玩家成功拖动方片A到目标坑位后，判定试玩结束"，因此在方片A的【拖拽到指定位置】事件下，需额外添加响应事件：
  * 上报试玩结束
  * 显示素材\[手势区域]（即试玩最后的跳转事件所在的图层）

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Ftb56HHknoGmCcWkGLRP3%2Fimage.png?alt=media&#x26;token=d64c11a3-1b57-484f-92ea-113a8814a9d8" alt=""><figcaption></figcaption></figure>

6）<mark style="color:red;">添加条件判断</mark>

计算成功接龙的分数：玩家每正确放置一次纸牌，分数+10

* 在场景下 添加事件-**条件判断**
* 添加条件判断1：当score=10，并勾选【只生效一次】
* 添加响应事件：隐藏文本0；显示文本10
* 以此类推，完成所有条件判断的设置

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FoonPHmZViMpmoknqxM9A%2Fimage.png?alt=media&#x26;token=66c048d4-acbe-4b19-91e0-9da2c9e08d82" alt=""><figcaption></figcaption></figure>

<mark style="color:orange;">以上事件为"拖拽纸牌A但未放置到指定位置" 和 "拖拽纸牌A并放置到对应坑位"的效果设置</mark>

#### <mark style="color:red;">4.为所有"不可被拖拽的纸牌"添加触发事件与响应事件</mark>

（💡此类事件设置集中在黄色区域图层）

1）以纸牌红心5为例，选中不可被拖拽的红心5图层\[1\_heart5]

2）添加事件-**按下**。添加响应事件：

* 从头播放1次错误音效
* 从头播放红心5的摇晃动画(旋转缓动)

3）**复制该事件**给其他所有"不可被拖拽的纸牌"，并微调响应对象

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FabvflQZZxy6sPEt1823w%2Fimage.png?alt=media&#x26;token=c4ec495c-13cb-4bb8-a0d7-44ec4492bdcf" alt=""><figcaption></figcaption></figure>

#### 5.跳转事件

1）结尾跳转：选中手势区域\[interactive area]，添加事件 - 按下，添加响应事件 - 设置埋点5"结束页触发跳转" & 跳转应用商店

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FiaGRXpjHETAXBvkwTS32%2Fimage.png?alt=media&#x26;token=26460942-f641-4294-abc5-691c8b61ae80" alt=""><figcaption></figcaption></figure>

2）常驻跳转：进入"全局场景"，选中常驻下载按钮组\[btn]，添加事件 - 按下，添加响应事件 - 跳转应用商店

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FBvAZKDi2t6wlngfOZ7Xf%2Fimage.png?alt=media&#x26;token=a9835106-8678-4a50-97d9-f0b8e9d79617" alt=""><figcaption></figcaption></figure>

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

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

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

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%2F37paQMfxN4grKwHucpWR%2Fimage.png?alt=media&#x26;token=53ccb60d-f878-4ac3-81ad-c0323478a2e9" alt=""><figcaption></figcaption></figure></div>

####

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

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

{% file src="<https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F7CFfnVxb0179RxqqlhgE%2F%E7%BA%B8%E7%89%8C%E6%8E%A5%E9%BE%99_%E7%A9%BA%E7%99%BD%E5%88%B6%E4%BD%9C_%E8%B5%84%E6%BA%90.zip?alt=media&token=d292506a-c7ef-4757-8b6d-28c880736e03>" %}