《贴纸拼图》空白制作教程

温馨提示：本篇教程主要讲解如何通过空白制作来做出"拖拽拼图/拖拽合成"玩法的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的动画，以此类推

要想实现以上效果，就需要使用【全局变量】，以下是对本案例所使用到的全局变量的梳理，我们以 碎片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）全部制作完成后，可对不同机型/不同语言/横竖屏进行整体预览，确认无误

六、资源提供

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