> For the complete documentation index, see [llms.txt](https://doc.playturbo.cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.playturbo.cn/playturbo-an-li-jiao-xue-ji-di/ke-wan-zi-you-bian-ji-qi-an-li/tong-yong-zhi-zuo-an-li/chu-ji-jiao-xue-kong-bai-zhi-zuo-jiao-cheng/2d-playable-tuo-zhuai-fang-zhi-jiao-cheng.md).

# 2D playable《拖拽放置》教程

温馨提示：入门难度模板《拖拽到指定位置放置》就是按照这个教程制作的哦！

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

* 【制作难度】：⭐⭐
* 【适用产品】：普遍适用（尤其是拼图/放置类玩法）
* 【交互方式】：拖拽
* 【交互次数】：2步跳转
* 【线程】：单线程
* 【核心资产】：静态图片
* 【功能】：动画-通用、动画-淡入、事件-拖拽到指定位置、事件-拖拽

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

| 手机试玩效果最佳                                                            | 竖屏                                                                  | 横屏                                                                  |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- |
| <img src="/files/9aS6w4ZpdwpX21OKmJKB" alt="" data-size="original"> | <img src="/files/Ux5uU3vldRbjJtMkmn9I" alt="" data-size="original"> | <img src="/files/bYe31ajBnOhnMDiLXBjx" alt="" data-size="original"> |
| 扫码试玩                                                                | [点击试玩](https://tinyurl.com/46t968a2)                                | [点击试玩](https://tinyurl.com/46t968a2)                                |

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

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

* 进入试玩，展示【待拼图案轮廓】和【两块碎片按钮】；
* 出现【第一次操作指引】，提示玩家拖动碎片A到待拼图案中；
* 玩家拖动碎片A到指定区域，触发【成功反馈】；
* 出现【第二次操作指引】，提示玩家拖动碎片B到待拼图案中；
* 玩家拖动碎片B，抬起即跳转商店

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

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

**场景拆分：**&#x6839;据第三部分的玩法梳理，我们判断本案例设置1个场景即可

<table><thead><tr><th width="178">场景名称</th><th>场景1-诱导拖拽</th></tr></thead><tbody><tr><td><strong>效果图</strong></td><td><img src="/files/Ux5uU3vldRbjJtMkmn9I" alt="" data-size="original"></td></tr><tr><td><strong>场景描述</strong></td><td>显示灰色底图和两个拼图碎片，引导玩家拖拽完成拼图</td></tr><tr><td><strong>动画</strong></td><td><p>【指引文案】：缩放缓动</p><p>【操作指引】：旋转缓动+位移缓动+透明度缓动</p><p>【拼图碎片】：缩放缓动；淡入</p></td></tr><tr><td><strong>核心事件</strong></td><td><p>触发对象：图层-碎片A</p><p>触发操作：拖拽到指定位置</p><p>响应事件：隐藏素材；禁用事件；启用事件</p></td></tr><tr><td><strong>资产清单</strong></td><td><p>【音频】：背景音乐、音效（点击音效/成功放置音效）</p><p>【图片】：背景图片、拼图灰色底图、拼图碎片、拼图碎片拖拽版、指引手指、logo、CTA按钮</p><p>【文本】：指引文案、产品名称、下载文案</p><p>【粒子特效】</p></td></tr></tbody></table>

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

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

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

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

<figure><img src="/files/YVImGpzK0Vest88ns4IM" alt=""><figcaption></figcaption></figure>

#### **2.全局场景**

1）在【全局场景】中添加常驻信息：logo、产品名称、CTA按钮

2）调整各资产到合适的位置大小

3）根据资产类型对资产进行编组、排序、命名

<figure><img src="/files/Td07kS6Leyvr2xB0NN9V" alt=""><figcaption></figcaption></figure>

#### **3.场景1**

1）在【场景1】中添加音效、拼图灰色底图、拼图碎片、拼图碎片拖拽版、指引手指、指引文案、粒子特效

2）调整各资产到合适的位置大小

3）根据资产类型对资产进行编组、排序、命名

<figure><img src="/files/47HsEtV0TndStxRvE3q5" alt=""><figcaption></figcaption></figure>

### Step2 - 动效制作 <a href="#tpuup" id="tpuup"></a>

#### **1.第一次操作指引**

1）在左侧图层处选中拼图碎片A剪影【cat\_A\_silhouette】，添加动画-通用-缩放缓动。参数设置如下：

<figure><img src="/files/DC9ckcr2tQSoamDEsfW9" alt=""><figcaption></figcaption></figure>

2）选中手指组【group\_hand】，添加动画-通用-旋转缓动。参数设置如下：

<figure><img src="/files/PhFkd5V01nL4MjMpwQXT" alt=""><figcaption></figcaption></figure>

3）选中整个操作指引组【cat\_A\_guide】，添加动画-通用-位移缓动与透明度缓动。参数设置如下：

<figure><img src="/files/tEUrepr86oD5A773JAfy" alt=""><figcaption></figcaption></figure>

注：第二次操作指引同理第一次操作指引，可通过【复制/粘贴动画】来快速完成制作。

#### **2.拼图碎片A被按下/松开**

由模板可知，当按下碎片A时，碎片A呈放大状态；当松开碎片A且碎片A未被放置到正确位置上时，碎片A呈缩小状态。因此，我们要为碎片A设置两个缩放缓动动画。

1）选中碎片A选项图片【cat\_A\_Options】，添加动画-通用-缩放缓动，并命名为“放大”。参数设置如下：

<figure><img src="/files/IRlnejd7YzG2mX3uc8AF" alt=""><figcaption></figcaption></figure>

2）继续添加动画-通用-缩放缓动，并命名为“缩小”。参数设置如下：

<figure><img src="/files/4roztQGgqzn3dxtjB7DF" alt=""><figcaption></figcaption></figure>

#### **3.拼图碎片A正确放置**

选中正确放置后的拼图碎片A【cat\_A】，添加动画-进场动画-淡入。参数设置如下：

<figure><img src="/files/NDvSelpFSJxYEXRLjx1l" alt=""><figcaption></figcaption></figure>

### Step3 - 逻辑设置 <a href="#umduz" id="umduz"></a>

#### **1.图层事件-碎片A**

我们需要为碎片A添加三个触发事件，分别为：按下碎片时、碎片未被放置到正确位置时、碎片被成功放置到正确位置时，即对应的触发事件为“按下”、“抬起”、“拖拽到指定位置”。

<mark style="background-color:orange;">**按下**</mark>

1）选中碎片A图层，添加事件-按下；

2）添加响应事件-从头播放点击音效；播放碎片A“放大”的单个动画；

3）添加响应事件-隐藏素材操作指引相关，并暂停播放相关指引动画；

4）其他响应事件：设置埋点信息；取消执行延迟（在“抬起”事件中讲解）

<figure><img src="/files/mwFWXvfS3GlQXzqYVU1e" alt=""><figcaption></figcaption></figure>

<mark style="background-color:orange;">**抬起**</mark>

1）选中碎片A图层，添加事件-抬起；

2）添加响应事件-播放碎片A“缩小”的单个动画；

3）添加响应事件-执行延迟0.2s，显示素材操作指引相关，并从头播放相关指引动画；

*（因为我们设置了“抬起”碎片后重新出现操作指引的定时器，因此我们要在“按下”的响应事件中取消该定时器，否则会出现当我们按下碎片的同时出现操作指引）*

<figure><img src="/files/ULEtUe1PeLRuGaoA5iVy" alt=""><figcaption></figcaption></figure>

<mark style="background-color:orange;">**拖拽到指定位置**</mark>

1）选中碎片A图层，添加事件-拖拽到指定位置；

2）点击【编辑拖拽区域】，将区域调整到合适位置大小后保存，并选择拖拽方向为【任意方向】；

<figure><img src="/files/I1vTk1cQEwDF0KiDxfF8" alt=""><figcaption></figcaption></figure>

3）添加响应事件-禁用事件“抬起”；禁用事件“按下”；

4）添加响应事件-隐藏素材碎片A；隐藏素材灰色碎片B，并播放碎片B透明度动画；

5）添加响应事件-播放正确放置后的碎片A的淡入动画；播放相关音效与粒子特效；

6）添加响应事件-执行延迟0.2s，显示第二次操作指引组；启用碎片B的“拖拽”事件；

7）其他响应事件：设置埋点信息

<figure><img src="/files/FZ0RA4XK7yuZ1sXbpCmP" alt=""><figcaption></figcaption></figure>

#### **2.图层事件-碎片B**

<mark style="background-color:orange;">**拖拽**</mark>

1）选中碎片B图层，添加事件-拖拽，选择拖拽方向为【任意方向】；

2）添加响应事件-从头播放点击音效；播放碎片B放大的单个动画；隐藏素材操作指引相关；

3）其他响应事件：设置埋点信息

<figure><img src="/files/WwqUSYKvLvtl9JdwJppi" alt=""><figcaption></figcaption></figure>

<mark style="background-color:orange;">**抬起**</mark>

1）选中碎片B图层，添加事件-抬起

2）添加响应事件-隐藏素材碎片B；隐藏素材第二次操作指引相关；播放碎片B“缩小”的单个动画；

3）添加响应事件-执行延迟0.2s，重新显示素材碎片B；显示素材操作指引相关

4）其他响应事件：跳转应用商店；设置埋点信息；上报试玩结束

<figure><img src="/files/vn248BE3WJRRXVCcvMul" alt=""><figcaption></figcaption></figure>

#### **3.图层事件-CTA按钮**

选中【全局场景】中的下载按钮组，添加事件-按下，添加响应事件-跳转应用商店

<figure><img src="/files/xnoDbVU6wMDqNQORAOrw" alt=""><figcaption></figcaption></figure>

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

#### <mark style="color:red;">**1.横屏排版**</mark>

每个场景竖屏制作完成后，均需进行横屏排版（建议多使用“复用竖屏位置尺寸配置”按钮）

<figure><img src="/files/GoKd4SWRKX6i8WW5pqKP" alt=""><figcaption></figcaption></figure>

#### <mark style="color:red;">**2.屏幕适配**</mark>

对各机型及其横竖屏进行屏幕适配，并预览适配效果是否合适

<figure><img src="/files/yvNJ1b0ILQfIvqZkhHrk" alt=""><figcaption></figcaption></figure>

**3.整体预览**

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

<figure><img src="/files/ol4wScbhq5qm1LhvZZDD" alt=""><figcaption></figcaption></figure>

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

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

{% file src="/files/TZbhwKNwLQU2op9rDtuk" %}