# 《贴纸拼图》空白制作教程温馨提示：本篇教程主要讲解**如何通过空白制作来做出"拖拽拼图/拖拽合成"玩法的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的动画，以此类推要想实现以上效果，就需要使用[【全局变量】](/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)，以下是对本案例所使用到的全局变量的梳理，我们以碎片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="/files/RkIwzLSqH1n2RGFIsric" %} --- # 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/qi-ta-yi-zhi-wan-fa-an-li/tie-zhi-pin-tu-kong-bai-zhi-zuo-jiao-cheng.md?ask= ``` 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.