# 2D playable《点击物品后隐藏》教程

温馨提示：入门难度模板《点击物品后隐藏》就是按照这个教程制作的哦！

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

* 【制作难度】：⭐⭐
* 【适用产品】：普遍适用
* 【交互方式】：点击
* 【交互次数】：3步跳转
* 【线程】：单线程
* 【核心资产】：静态图片
* 【功能】：动画-淡入、动画-缩小消失、动画-放大出现、事件-按下隐藏素材、事件-按下显示素材

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

| 手机试玩效果最佳                                                                                                                                                                                                                                                   | 竖屏                                                                                                                                                                                                                                                         | 横屏                                                                                                                                                                                                                                                         |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FBc2IcGUfKIYOzuvg1vDO%2Fimage.png?alt=media&#x26;token=30975667-47f3-48d6-a403-5ff01ba76252" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FN9XyzQCBV1sGeAfkQWUf%2Fimage.png?alt=media&#x26;token=9294d05e-078a-43ae-a356-454b81fc383b" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FGdXWqVeUBEGOaTlJQr4v%2Fimage.png?alt=media&#x26;token=eea9b0cd-4a7e-4e68-ab89-9e0e0ba2c7d6" alt="" data-size="original"> |
| 扫码试玩                                                                                                                                                                                                                                                       | [点击试玩](https://tinyurl.com/muy57s72)                                                                                                                                                                                                                       | [点击试玩](https://tinyurl.com/muy57s72)                                                                                                                                                                                                                       |

## <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="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FyZ2CILBW3lqDxlsrblGj%2Fimage.png?alt=media&#x26;token=13a17180-bee6-4327-a133-76913d8144b8" 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><p>【散射光】：放大出现+旋转缓动</p></td></tr><tr><td><strong>核心事件</strong></td><td><p>触发对象：图层-手势区域</p><p>触发操作：按下</p><p>响应事件：隐藏素材；显示素材</p></td></tr><tr><td><strong>资产清单</strong></td><td><p>【音频】：背景音乐、音效（解锁音效/奖励音效/胜利音效）</p><p>【图片】：背景图片、人物图片、礼盒图片、金额面板图片、奖励弹窗图片、指引手指、logo、CTA按钮</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="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FQAsiFZ93oljkS5oHJVC4%2Fimage.png?alt=media&#x26;token=7b47681b-5683-4671-881d-a03a2153be75" alt=""><figcaption></figcaption></figure>

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

1）在【场景1】中添加音频、金额面板图片及文本、奖励弹窗图片及文本、礼盒图片及文本、角色图片、操作指引、常驻信息及免责声明

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

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FdwtoASRfoUAc7Pl5UWME%2Fimage.png?alt=media&#x26;token=bd526c81-e072-4db9-837f-96a20e7092d9" alt=""><figcaption></figcaption></figure>

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

本案例涉及动画较多，但大多为丰富礼盒效果所做的动画，且相关动画在前面的教学案例中有涉及，所以在此不做详细教学，仅针对此前未介绍过的动画进行教学。

#### **1.**&#x4EBA;物呼吸感

1）在左侧图层处选中人物图片【role】，将锚点改为（50,100）

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FpHUuQEci87QHTROCpFqS%2Fimage.png?alt=media&#x26;token=99c55539-654f-4161-a16e-bcb1c340eef1" 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%2FOTfcHbwZdfTb92ijxtyR%2Fimage.png?alt=media&#x26;token=52216ad3-f838-48fa-8f2e-be6956dcde06" alt=""><figcaption></figcaption></figure>

#### **2.金额文本**

在左侧图层处选中金额文本【money\_0】，添加动画-退场动画-缩小消失。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FeF8npu9vcXDgHNTBuDGp%2Fimage.png?alt=media&#x26;token=4a6a02a9-e11b-469e-a515-e8f4de64220b" alt=""><figcaption></figcaption></figure>

注：金额文本【money\_1】和【money\_2】需额外添加淡入+缩放缓动动画，具体参数设置可进项目内查看。

#### **3.奖励弹窗**

1）在左侧图层处选中奖励弹窗组【endboard】，添加动画-进场动画-淡入。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FzvPjFZzpfcDcy9wkK1i4%2Fimage.png?alt=media&#x26;token=8c6b6bd4-a157-4584-966d-57eae41825bf" 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%2Faj38lC7WAfeLziv7KdRD%2Fimage.png?alt=media&#x26;token=f1455fd5-7153-4d97-a3e6-4cc07b3ed52e" alt=""><figcaption></figcaption></figure>

**4.散射光**

1）在左侧图层处选中散射光图片【light】，添加动画-进场动画-放大出现。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FJ5jvZKXT3QUqxqOQblKn%2Fimage.png?alt=media&#x26;token=45bb3be6-d4dd-474d-a512-87e17e5a4120" 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%2FQMQnfBuiwBFbKSaG3YBm%2Fimage.png?alt=media&#x26;token=41cff6af-706f-4bb2-8b31-005b6c582359" alt=""><figcaption></figcaption></figure>

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

#### **1.图层事件-手势区域1（红礼盒）**

1）选中左侧手势区域1图层；

2）添加事件-按下；

3）添加响应事件-隐藏素材手势区域1；（即保证玩家仅可点击1次红礼盒）

4）添加响应事件-隐藏素材操作指引相关；

5）添加响应事件-从头播放红礼盒的退场动画；显示素材奖励，并播放相关奖励动画及特效音效；

6）添加响应事件-从头播放金额文本0的退场动画；显示素材金额文本1，并播放相关文本动画；

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fc8McCVM4FHJ2ZLaUba1X%2Fimage.png?alt=media&#x26;token=aa699dc2-bab5-4646-9b6d-28d425e7ae32" alt=""><figcaption></figcaption></figure>

7）添加响应事件-执行延迟1s；

8）添加响应事件-播放蓝礼盒相关动画；显示素材操作指引相关，并播放相关动画；

9\)其他响应事件：设置埋点信息

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F7XJ9VTAdztxw96PBDcmi%2Fimage.png?alt=media&#x26;token=3b6b388b-5023-4604-8987-b7a7b8b16a50" alt=""><figcaption></figcaption></figure>

#### **2.图层事件-手势区域2（蓝礼盒）**

蓝礼盒的事件设置同理红礼盒，可通过【复制/粘贴事件】后微调来快速完成制作。

有所区别的事件设置：

1）添加响应事件-执行延迟1s；

2）添加响应事件-显示奖励弹窗相关，并播放相关动画及特效音效；

3）其他响应事件：设置埋点信息；上报试玩结束

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F6bi1UL7OTyLfNTYWtgrQ%2Fimage.png?alt=media&#x26;token=90147be7-9e04-408d-96ff-7ad0eb233b3c" alt=""><figcaption></figcaption></figure>

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

选中奖励弹窗下载按钮组，添加事件-按下，添加响应事件-跳转应用商店；设置埋点信息

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FsUk8q6vqReec0mdIYGdO%2Fimage.png?alt=media&#x26;token=46bba70f-fb42-4865-878c-931a4ac301cd" alt=""><figcaption></figcaption></figure>

选中常驻下载按钮组，添加事件-按下，添加响应事件-跳转应用商店

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FpLLwVqzbEW1hf46UzxBS%2Fimage.png?alt=media&#x26;token=a5d03ed5-5f31-429c-8168-98f16150a092" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F4LBLih3kXRT0KlfdjrQp%2Fimage.png?alt=media&#x26;token=4b8a26fc-37c1-424a-9a49-4dd04eced436" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F7TUHjQMzVD4OuV2Pw50j%2Fimage.png?alt=media&#x26;token=78de6ab2-990c-4b97-beb4-294f99d36e84" alt=""><figcaption></figcaption></figure>

**3.整体预览**

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FrvtjmxLFQAZyAXXdO6Zw%2Fimage.png?alt=media&#x26;token=499a91a8-532c-4ceb-9524-9874ee73716e" alt=""><figcaption></figcaption></figure>

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

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

{% file src="<https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F43VtED0TvKpwhizsfdGu%2F%E7%82%B9%E5%87%BB%E7%89%A9%E5%93%81%E5%90%8E%E9%9A%90%E8%97%8F_%E8%B5%84%E6%BA%90.zip?alt=media&token=8b53b13a-65fb-4fb0-84aa-7baf128f0789>" %}