# 擦除组件-空白制作教程

温馨提示：本篇教程主要讲解空白制作如何**通过擦除组件制作出"擦除玩法"的可玩素材**，建议搭配[DEMO](https://tinyurl.com/4xby5rvh)和[功能介绍文档](/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/te-shu-gong-neng-zu-jian-ku-kuai-jie-pai-ban/ca-chu-zu-jian.md)食用效果更佳哦！

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

* 【制作难度】：⭐⭐
* 【适用产品】：擦除玩法
* 【交互方式】：开始擦除/到达某一阶段
* 【自由度】：固定流程
* 【核心资产】：图片
* 【核心功能】：到达某一阶段-隐藏擦除层

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

| 手机试玩效果最佳                                                            | 竖屏                                                                  | 横屏                                                                  |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- |
| <img src="/files/DOfbsnlLF2uKHJ3uUulA" alt="" data-size="original"> | <img src="/files/ZgY8GeGW4BXyftFH0njY" alt="" data-size="original"> | <img src="/files/lLotmrV5O0VAYKLuflro" alt="" data-size="original"> |
| 扫码试玩                                                                | [点击试玩](https://tinyurl.com/4xby5rvh)                                | [点击试玩](https://tinyurl.com/4xby5rvh)                                |

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

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

1）进入试玩，展示【美女被遮挡画面】，美女角色默认进行序列帧播放

2）出现【操作指引】，引导玩家滑动擦除遮罩

3）玩家在遮罩位置任意滑动，遮罩即被实时擦除，露出美女身体

4）当遮罩区域被擦除60%，遮罩消失，并出现完整的美女图片和重玩按钮

5）玩家按下按钮，跳转应用商店

<div align="left"><figure><img src="/files/pFrJxsIoyNO2VbphWIxT" alt=""><figcaption></figcaption></figure></div>

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

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

**场景拆分：**&#x56E0;本案例玩法较简单，我们只需用 1 个场景来制作即可

<table data-full-width="false"><thead><tr><th width="164">场景名称</th><th>场景1-核心玩法</th></tr></thead><tbody><tr><td><strong>效果图</strong></td><td><img src="/files/ZgY8GeGW4BXyftFH0njY" alt="" data-size="original"></td></tr><tr><td><strong>场景描述</strong></td><td>玩家在遮罩位置任意滑动擦除遮罩，来显示出完整的美女图片</td></tr><tr><td><strong>核心资产</strong></td><td><p><strong>静帧图片：</strong><mark style="color:red;">遮罩(擦除层)</mark>、操作指引、重玩按钮</p><p><strong>序列帧：</strong><mark style="color:red;">美女底图</mark></p><p><strong>视听包装：</strong>爱心粒子特效、擦除音效、美女害羞音效</p></td></tr><tr><td><strong>核心动画</strong></td><td><p>手指指引：位移缓动</p><p>美女放大出现：缩放缓动+位移缓动</p></td></tr><tr><td><strong>核心事件</strong></td><td><p>触发对象：擦除组件Erase Component</p><p>触发事件：到达某一阶段</p><p>响应事件：隐藏擦除层</p></td></tr></tbody></table>

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

\*核心内容为Step2【组件参数设置】和Step5【事件设置】

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

建议您在创建项目后，先将所有资产上传进【项目资产】内，方便后续添加使用

#### **1.全局场景**

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

2）在【全局场景】下添加常驻下载按钮、logo等产品信息，并调整位置大小

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

#### **2.普通场景**

1）添加擦除组件：点击【玩法模板】，在【组件库】下将擦除组件添加进场景1

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

2）将指引手、指引文案和底板、重玩按钮、音效相继添加进场景1

3）调整各资产到合适的位置大小，并根据资产类型对资产进行编组、排序、命名

4）在本案例中，我们只需要一个普通场景，所以可以删除场景2

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

### <mark style="color:red;">Step2 - 组件参数设置</mark> <a href="#tpuup" id="tpuup"></a>

1.点击右上方【擦除设置】，进入擦除组件参数编辑面板

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

2.依次在**擦除层（Mask）**&#x4E2D;添加擦除飘带图片，在**底图层（Bottom image）**&#x4E2D;添加角色序列帧图片，然后将资产调整到合适的位置大小

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

3.然后我们根据实际需求，调整【擦除笔触设置】。在本案例中，我们选择使用60\*60大小的圆形笔触，不添加跟手图片

<div align="left"><figure><img src="/files/RsJ6emOyhbSSNymqqbOh" alt=""><figcaption></figcaption></figure></div>

4.针对擦除层进行**事件判定**设置

1）判断时机：在本案例中，我们想要在擦除过程中实时判定擦除进度，所以我们选择判断时机为【擦除过程实时判定】

2）添加事件判定：在本案例中，我们想要实现"当擦除面积达到60%时，触发相应反馈"，所以在这里，我们选择要判定的区域为擦除层"erase\_mask"，然后点击【新增阶段】，将阶段1设置为60%

<div align="left"><figure><img src="/files/skJgOGjOREO4Wl4RjkuW" alt=""><figcaption></figcaption></figure></div>

完成以上，我们擦除组件的基本参数就设置好了。

### Step3 - 横竖屏适配 <a href="#tpuup" id="tpuup"></a>

完成竖屏的排版后，我们还需对"横屏的排版"以及"横竖屏的屏幕适配方式"进行调整

#### 1.调整横屏排版

1）切换到横屏模式，选中所有最高层级的图层(包含擦除组件图层)

2）使用【复用竖屏位置尺寸配置】功能一键排版，然后再适当调整各图层的【位置】和【缩放比例】，让画面展示出完整的擦除组件相关内容

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

3）同理，我们再切换到【全局场景】，选择LOGO和常驻下载按钮组，使用【复用竖屏位置尺寸配置】功能一键排版，再微调其位置大小

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

#### 2.调整屏幕适配方式 <a href="#tpuup" id="tpuup"></a>

1）在本案例中，我们想让常驻信息在竖屏下依次贴顶、贴底适配，在横屏下靠左上角适配，所以我们分别调整横竖屏下的屏幕适配方式

<div align="left"><figure><img src="/files/beArhq72WTHSn4NwMA8f" alt=""><figcaption></figcaption></figure></div>

2）在场景1中，我们想要横屏下的重玩按钮组和指引文本组始终位于屏幕底部，所以我们依次将其屏幕适配方式调整为贴底适配（其他图层默认居中适配，无需调整）

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

### Step4 - 动效设置 <a href="#tpuup" id="tpuup"></a>

在本案例中，我们用到的动画和粒子特效有：美女序列帧(底图层)动画、指引手指动画、重玩按钮组动画、爱心粒子特效

#### **1.美女序列帧**

1）在擦除组件中点击底图层（Bottom image）的美女序列帧，在弹窗面板中选择【动画】

2）然后我们依次添加缩放动画和位移动画，作为角色擦除成功后的展示动画效果

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

3）动画参数设置如下：

<div align="left"><figure><img src="/files/tJwVchJTSf8jdaSX1wWB" alt="" width="556"><figcaption></figcaption></figure></div>

#### **2.指引手指**

在图层区选中手指图片\[gf\_hand]，添加动画-通用-位移缓动，作为指引动画，参数设置如下：

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

#### **3.重玩按钮组**

1）选中重玩按钮组\[group\_retry\_btn]，添加透明度动画，作为重玩按钮的渐显出场效果，然后添加缩放动画，引导用户点击重玩

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

2）动画参数设置如下：

<div align="left"><figure><img src="/files/SyG319sDVaAuGQadLeTR" alt="" width="563"><figcaption></figcaption></figure></div>

#### 4.爱心粒子特效

1）打开公共粒子库，选择添加爱心粒子，以增强露出美女图片后的画面氛围

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

2）然后将爱心粒子特效设为"隐藏"状态，在后续我们通过事件来控制粒子的显示和播放

<div align="left"><figure><img src="/files/IRNAcL9klZaukYTm3Llh" alt=""><figcaption></figcaption></figure></div>

### <mark style="color:red;">Step5 - 事件设置</mark> <a href="#umduz" id="umduz"></a>

本案例与事件设置相关的内容有：开始擦除时隐藏操作指引并播放擦除音效；抬手时暂停播放擦除音效；当擦除区域达到60%时擦除层消失，同时显示并播放相关反馈。接下来，我们按顺序依次讲解

#### <mark style="color:red;">1.图层: 擦除组件</mark>

1）选中擦除组件图层，点击【添加事件】，选择触发事件&#x4E3A;**【开始擦除】**

* 依次添加响应事件：隐藏指引文本组、隐藏指引手指组、从头播放擦除音效
* 擦除音效的参数设置为【无限循环】

<div align="left"><figure><img src="/files/ygCpO9hLSSXesW9gwA02" alt=""><figcaption></figcaption></figure></div>

2）继续【添加事件】，选择触发事件&#x4E3A;**【抬手时】**

* 添加响应事件：暂停播放擦除音效

<div align="left"><figure><img src="/files/0NxbFC2UGb9EvCUkQKyu" alt=""><figcaption></figcaption></figure></div>

3）继续【添加事件】，选择触发事件&#x4E3A;**【到达某一阶段】**

* 注意：因为擦除面积达到目标后，反馈只需触发一次，所以在这里我们勾选该事件"只生效一次"
* 选择【事件判定1】，然后选择【阶段1: 60%】

<div align="left"><figure><img src="/files/7MkLnavP4FNuJQRjXlMX" alt=""><figcaption></figcaption></figure></div>

* 依次添加响应事件：隐藏擦除组Mask、播放美女序列帧分组的全部动画、从头播放重玩按钮组的全部动画、显示并播放爱心粒子特效、从头播放美女害羞音效
* 音效的参数设置为【关闭无限循环】，并【禁用其他音效】

<div align="left"><figure><img src="/files/jxAjIyjzc2vxpapbjqv7" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">2.图层: 重玩按钮组</mark>

选中重玩按钮组，点击【添加事件】，选择触发事件&#x4E3A;**【按下】**

依次添加响应事件：跳转应用商店、上报试玩结束

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

#### <mark style="color:red;">3.图层: 常驻下载按钮组</mark>

选中常驻下载按钮组，点击【添加事件】，选择触发事件&#x4E3A;**【按下】**

添加响应事件：跳转应用商店

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

以上，就是本案例用到的全部事件。完成所有事件设置，我们的素材就制作完成了。

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

1）建议在制作过程中，每完成一部分操作，就及时预览，检查设置是否正确

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

<figure><img src="/files/454PHBh6mCfx7cUrTH9G" alt=""><figcaption></figcaption></figure>

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

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

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


---

# 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/hui-zhi-wan-fa-an-li/ca-chu-zu-jian-kong-bai-zhi-zuo-jiao-cheng.md?ask=<question>
```

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.