# 《贴纸拼图》空白制作教程温馨提示：本篇教程主要讲解**如何通过空白制作来做出"拖拽拼图/拖拽合成"玩法的2D可玩素材**，建议搭配DEMO食用效果更佳哦！*（可联系AM分享至您的账号）* ## 一、特征标签 * 【制作难度】：⭐⭐⭐ * 【适用产品】：通用，尤其是拼图/合成玩法产品 * 【交互方式】：拖拽到指定位置、未拖拽到指定位置 * 【自由度】：全自由 * 【核心资产】：静帧图片 * 【核心功能】：拖拽到指定位置-隐藏/显示素材；全局变量 ## 二、效果预览

手机试玩效果最佳	竖屏	横屏

扫码试玩	点击试玩	点击试玩

## 三、玩法梳理 **我们在开始制作之前需要将本案例的玩法逻辑进行简单的梳理：** 1）进入试玩，展示【拼图布局】和【操作指引】，引导玩家拖拽碎片完成拼图 2）玩家可自由拖拽碎片A/B/C： * 若将碎片放置到正确位置，则播放【正确反馈】，如星光粒子/音效； * 若放置到错误位置，则播放【错误反馈】，如音效/震屏反馈； 3）每完成一组拼图，进度条则前进一格；直到成功完成三组拼图后跳转结束页面 4）结束页面玩家全屏任意按下，跳转商店 ## 四、制作思路 **核心思想：**场景拆分逻辑清晰，图层结构简单，单个场景里的动画和事件尽可能少 **场景拆分：**根据玩法梳理内容，我们可将本案例拆分为 2 个场景来制作，即核心玩法场景+结束页场景

场景名称	场景1-核心玩法	场景2-结束页
效果预览
场景描述	玩家拖拽碎片A/B/C，放置到正确位置，完成拼图	结束页面: 结算图片+跳转按钮
核心资产	静帧图片：灰色底图、碎片&最终效果图、背景图、进度条、指引手指粒子特效：拼图星光粒子音效：正确音效、错误音效	静帧图片：结算图片、跳转按钮粒子特效：彩带粒子音效：胜利音效
核心动画	手指拖拽指引：位移缓动+透明度缓动+缩放缓动进度条：缩放缓动	跳转按钮：脉冲向前
核心事件	触发对象：拼图碎片触发事件：拖拽到指定位置响应事件：隐藏碎片、显示最终效果图片、赋值 (全局变量) 触发对象：场景1 触发事件：条件判断响应事件：播放进度条动画、显示指引、跳转下一场景	触发对象：场景2 触发事件：按下响应事件：跳转应用商店

## 五、制作指南 \*核心内容为Step1【场景搭建】 & Step4【事件设置】 ### Step1 - 场景搭建建议您在创建项目后，先将所有资产上传进【项目资产】内，方便后续添加使用 #### **1.全局设置** 在【全局设置】中添加背景音乐、背景图片；设置语言

#### **2.场景1** 1）将与核心玩法相关的资产添加进场景1 2）调整各资产到合适的位置大小，根据资产类型对资产进行编组、排序、命名 ⚠️注意：此类玩法(指在玩家交互后,物品位置发生改变的玩法)的制作逻辑为 "**在物品可能出现的位置上都添加该物品，然后先隐藏初始状态不会出现的物品，再通过事件设置来显示放置后的物品，同时隐藏原位置的物品**"，以此来实现目标效果因此：除了每个选项上的碎片图片，还应在拼图成功放置后的位置上也添加上碎片图片，然后隐藏；同时因为有三组不同位置的手指指引，所以手指图片也需要添加三个，然后隐藏

3）调整图层初始状态：将初始状态不显示的图层都先隐藏（指引组2&指引组3&星光粒子1/2/3&放置后物品1/2/3），后续我们将通过事件来控制这些图层的显示 & 其他图层的隐藏

#### **3.场景2** 1）将与结束页面相关的资产添加进场景2 2）同样的，调整各资产到合适的位置大小，根据资产类型对资产进行编组、排序、命名 3）勾选场景2为【结束场景】，以便上报试玩结束

### Step2 - 横竖屏适配完成所有竖屏的排版后，我们还需对"横屏的排版"以及"横竖屏的屏幕适配方式"进行调整 #### 1.调整横屏排版 1）切换至横屏模式，选中**所有最高层级**的图层 2）使用【**复用竖屏位置尺寸配置**】功能一键排版 3）然后再适当调整各图层的【位置】和【缩放比例】即可，让画面展示出完整的内容 4）场景2同理

#### 2.调整屏幕适配方式本案例所有图层都默认居中适配，无需特别调整屏幕适配方式 ### Step3 - 动效设置在本案例中，使用到的动效如下： **动画**：拖拽指引、进度条前进、错误反馈、跳转按钮 **粒子特效**：拼图反馈(星光粒子)、结束页胜利反馈(彩带粒子) #### **1. 拖拽指引** 1）选中指引组\[guide1]，依次添加动画-通用-位移缓动、透明度缓动，来作为手指及物品的指引动画，参数设置如下：

2）选做：再选中手指图片\[guide\_finger]，添加动画-通用-缩放缓动，参数设置如下 3）选中指引物品图片\[guide\_prop1]，添加动画-通用-透明度缓动，参数设置如下

4）指引组\[guide2]和\[guide3]同理，复制指引组\[guide1]的动画，微调位移距离即可 #### **2. 进度条前进** 1）先选中进度条图片\[progress\_bar]，将其锚点调整为（0,50） 2）添加动画-通用-缩放缓动，参数设置如下（因进度条动画是分3次播放，将动画总时长设置为0.9s能更好地控制动画播放进度）

#### **3. 错误反馈** 1）选中红叉图片\[error\_feedback]，添加动画-进场动画-弹动进入，参数设置如下 2）继续添加动画-退场动画-淡出，来实现错误反馈播放1次后自动隐藏的效果，参数设置如下

#### **4. 跳转按钮** 在场景2中选中跳转按钮组\[group\_cta]，添加动画-强调动画-脉冲向前，参数设置如下：

#### **5.粒子特效** 1）在【公共资产库】中选择合适的粒子特效来作为拼图成功的反馈 2）因本案例有3处不同的拼图区域，所以需要再复制两个粒子图层 3）依次调整三个粒子特效的位置到对应区域，然后设为"隐藏"状态，后续我们通过事件来控制粒子的显示和播放

4）场景2的胜利反馈粒子特效因为是入场自动播放的，直接添加即可，无需隐藏

### Step4 - 事件设置本案例的核心事件集中在"三个拼图碎片"以及"场景1"上，我们按操作顺序依次讲解 **【全局变量】** 首先，因为要实现： a. 计算成功操作次数：玩家每完成一组拼图，进度条前进一段；当完成三组拼图时，进入结束页面 b. 按顺序指引：默认播放指引组1的动画，当玩家完成碎片1的拼图，则按顺序播放指引组2的动画，以此类推要想实现以上效果，就需要使用[【全局变量】](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)，以下是对本案例所使用到的全局变量的梳理，我们以碎片1 为例，展开介绍（若您在制作时不需要相关效果，可直接删除相关变量）

#### 1.添加全局变量 1）点击上方【全局变量】图标，添加变量 placed 2）设置变量类型与初始值 3）按照同样的方法，继续添加 item1\_guide 与 item2\_guide 两个变量

#### 2.为"三个拼图碎片"添加触发事件与响应事件以第一个碎片\[drag\_prop1]为例，选中该图层 1）添加事件-**拖拽到指定位置**，编辑拖拽区域，并选择拖拽方向为"任意方向" * 添加响应事件：赋值，赋值 placed+1 (对应: 已完成一组拼图) * 添加响应事件：赋值，赋值 item1\_guide=false (对应: 碎片1已放置，指引组1可隐藏) * 添加响应事件：隐藏碎片1，显示成功放置的碎片1，显示并播放碎片1位置的粒子特效，播放1次正确音效 * 勾选【只生效1次】

2）添加事件-**未拖拽到指定位置**，编辑拖拽区域，并选择拖拽方向为"任意方向" * 打开【松手是否复位】 * 添加响应事件：震屏效果 * 添加响应事件：播放错误反馈动画，播放1次错误音效

3）添加事件-**按下** * 添加响应事件：隐藏整个指引组 4）添加事件-**抬起** * 添加响应事件：执行延迟1s后，显示整个指引组并播放全部动画

5）快速复制事件给其他"两个拼图碎片" * 设置好碎片\[drag\_prop1]的全部事件，点击复制图层 * 按住Ctrl键，依次选中\[drag\_prop2]和\[drag\_prop3] * 点击粘贴按钮，选择【仅粘贴图层事件】

* 这样，其他"两个拼图碎片"都有了对应的拖拽事件与按下、抬起事件 * 然后将两个拼图碎片的“拖拽到指定位置”事件所对应的响应对象进行微调即可（其余事件都一样，无需调整）

以上，我们就完成了三个拼图碎片的事件设置。接下来，我们在场景1上添加事件 #### 3.在"场景1"下添加条件判断与响应事件选中场景1 - 添加事件 - 条件判断 **1）条件判断1-3：计算成功操作次数** * 编辑条件判断1为：placed=1 (对应: 玩家已完成一组拼图) * 勾选"只生效一次" * 添加响应事件：播放进度条动画，执行延迟0.3s后暂停播放进度条动画（前面有提到，进度条动画的时长为0.9s，单次播放0.3s可实现进度条前进三分之一的效果）

* 同理，设置条件判断2为：placed=2 (对应: 玩家已完成二组拼图) * 添加响应事件：继续播放进度条动画，执行延迟0.3s后暂停播放进度条动画 * 条件判断3为：placed=3 (对应: 玩家已完成三组拼图) * 添加响应事件：继续播放进度条动画（到此进度条动画已播放完毕） * 添加响应事件：隐藏整个指引组，执行延迟1s后跳转到下一场景

**2）条件判断4-5：按顺序指引** * 编辑条件判断4：item1\_guide=false 且 item2\_guide=true (对应: 碎片1已放置，可显示指引组2) * 勾选"只生效一次" * 添加响应事件：隐藏指引组1，显示指引组2

* 编辑条件判断5：item1\_guide=false 且 item2\_guide=false (对应: 碎片1和碎片2都已放置，可显示指引组3) * 勾选"只生效一次" * 添加响应事件：隐藏指引组1和指引组2，显示指引组3

#### 4.场景: Scene 2 最后，记得为场景2或跳转按钮设置“跳转应用商店”的事件；不要勾选只生效一次

以上，就是本案例用到的全部事件。完成所有事件设置，我们的素材就制作完成了。 ### Step5 - 整体预览 1）建议在制作过程中，每完成一部分操作，就及时预览，检查设置是否正确 2）全部制作完成后，可对不同机型/不同语言/横竖屏进行整体预览，确认无误

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