# 擦除组件

✨模板自由制作入口：作品预览区>>>自由画线按钮 或 图层区>>>Erase Component

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

✨空白制作入口：玩法模板>>>组件库>>>擦除组件

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

相关案例教学可查阅 [擦除组件-空白制作教程](/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)

## <mark style="color:blue;">一、擦除组件通俗介绍</mark>

* 组件使用底层逻辑：设置「蒙层」与「底图」，让玩家通过"擦除蒙层后显示底图"来实现擦除效果
* 当前，【**模板自由制作**】和【**空白制作**】都支持使用"擦除组件"。使用【模板自由制作】，您可以基于原模板的玩法对组件进行调整；使用【空白制作】或新增擦除组件，需完成组件的 「外观」、「擦除笔触」、「组件图层」、「事件判定」、「事件」等参数的设置，擦除组件才可正式生效
* <mark style="color:red;">注意：同个场景仅支持添加一个组件，但可跨场景添加组件或复制组件</mark>

## <mark style="color:blue;">二、擦除组件适用玩法示例</mark>

"擦除组件"适用于"擦除遮罩以显示底图"或"涂抹上色"等在区域内滑动进行擦除/涂抹的玩法

* [示例1 - 美妆擦除](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001239%252F12884%252Fpv%252F24%252F07%252F02%252F6683a348e7041%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%BE%8E%E5%A6%86%E6%93%A6%E9%99%A4\&language=undefined)
* [示例2 - 趣味擦除](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001252%252F12909%252Fpv%252F24%252F06%252F27%252F667d33c167d25%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E8%B6%A3%E5%91%B3%E6%93%A6%E9%99%A4\&language=undefined)
* [示例3 - 选择道具擦除](https://tinyurl.com/ywyce8fc)
* [示例4 - 清洁擦除](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001288%252F12980%252Fpv%252F24%252F06%252F03%252F665d6af571d53%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E6%B8%85%E6%B4%81%E6%93%A6%E9%99%A4\&language=undefined)

## <mark style="color:blue;">三、擦除组件使用说明</mark>

### 1.添加擦除组件

* 点击擦除组件右下方的"+"号即可成功添加一个擦除组件

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

擦除组件可调整的参数分四部分：「外观」、「动画」、「擦除设置」、「事件」。接下来，我们依次介绍。

### 2.参数: 外观

* 组件是否启用：可在「外观」参数下通过调节此开关来启用/禁用擦除组件（默认启用）
* 其他参数的使用同常规图层一样，在此不作说明

<figure><img src="/files/2QVOS8T0oiKol0p8Ch70" alt=""><figcaption></figcaption></figure>

### 3.参数: 动画

在此处设置的动画是对整个擦除组件生效的，具体的使用同常规图层一样，在此不作说明

### 4.参数: 擦除设置

擦除设置包含三部分：「擦除笔触设置」、「组件图层(蒙层与底图)」、「事件判定」

* 擦除笔触 决定了擦除的笔触形状、大小及样式
* 组件图层(蒙层与底图) 决定了可被擦除及擦除后展示的图层样式
* 事件判定 决定了擦除是否到达指定阶段，是否需要触发后续事件

<mark style="color:red;">注意：「擦除设置」为擦除组件最核心的参数，请务必将各部分设置完成</mark>

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

#### <mark style="background-color:red;">Part1：擦除笔触设置</mark>

「擦除笔触设置」包含：笔触样式、跟手图片。其决定了擦除时手指移动过程中笔触的实际形状、大小及样式

**1）笔触样式**

* 圆形：擦除时笔触为一圆形，具体大小可通过【尺寸】进行设置
* 矩形：擦除时笔触为一矩形，具体大小可通过【尺寸】进行设置
* 图片识别：可上传png或序列帧图片，将识别该图片的轮廓作为擦除笔触。同样可设置图片的尺寸

<div align="left"><figure><img src="/files/gajbCrQOSFiTHsZbNmD8" alt="" width="545"><figcaption><p>不同的笔触样式效果对比</p></figcaption></figure></div>

**2）跟手图片**

* 决定擦除过程中跟随手指移动的图片样式（与擦除笔触无关），非必需上传
* 若添加跟手图片，可点击图片，在弹窗内修改其尺寸、旋转角度、跟手锚点等外观参数
* 跟手锚点：即笔触中心点，决定了在擦除时笔触出现的位置。可移动绿点进行调整

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

#### <mark style="background-color:red;">Part2：组件图层(蒙层与底图)</mark>

组件图层包含蒙层与底图

**1）蒙层（对应组件图层下的Mask）**

* 蒙层即"可被擦除的对象"
* 可上传单张或多张静帧图片共同作为蒙层
* 可通过开关按钮决定蒙层是默认启用或禁用。禁用后，可通过事件控制在特定时机下再启用

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

* 点击蒙层，可在弹窗内设置蒙层外观、动画等参数
* 支持在画布区直接拖拽蒙层图片来调整蒙层位置
* 擦除过程中，当擦除笔触移动到蒙层上时，根据笔触大小和轨迹将擦除蒙层（若蒙层多张图片发生了重叠，则重叠部分会被一并擦除）
* <mark style="color:red;">玩家可擦除的区域 = Mask的图片大小</mark>

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

**2）底图（对应组件图层下的Buttom image）**

* 底图即"不可擦除/不可被遮挡的对象"，会始终处于蒙层下方
* 底图支持上传单张或多张静帧图片、动图、序列帧

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

* 点击底图，可在弹窗内设置底图外观、动画等参数
* 同样支持在画布区直接拖拽底图来调整位置
* 擦除过程中，当上方蒙层被擦除时，底图会随之显现

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

**3）自定义图层**

支持添加自定义图层分组。添加时需要设定其【分组名称】及【是否可以被擦除】

* 可被擦除：相当于蒙层。在擦除过程中，该分组下的所有图层都可以被擦除
* 不可擦除：相当于底图。不可以被擦除

<figure><img src="/files/1MCY6cTXAQS1BjK7om9k" alt=""><figcaption></figcaption></figure>

自定义图层的适用场景：可用于设置某些特殊图层

如障碍物：既不是蒙层，也不是底图，但不可擦除，然后可通过事件设置来控制擦除时碰到该图层会触发某种效果

#### <mark style="background-color:red;">Part3：事件判定</mark>

判定某个区域擦除是否达到了某个百分比（如蒙层是否擦除了80%），并以此作为后续事件的触发条件

举例：如设置"抬手时判定"、"蒙层区域擦除超过80%时"触发后续的跳转场景事件。这里的「超过80%」的判断，就需要通过「事件判定」参数来设置

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

**1）判断时机**

分为抬手时判定和擦除过程实时判定

* 抬手时判定：在擦除抬手时进行判定，判定区域擦除情况是否达到设定阶段
* 擦除过程实时判定：在擦除过程中实时计算，判定区域擦除情况是否达到设定阶段(该选项可能会引起性能问题，建议非必要不设置为实时判定)

**2）事件判定**

2-1）判定区域选择：可选择若干个蒙层图层，或若干个自定义判定区域

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

<mark style="background-color:yellow;">自定义判定区域</mark>

* 添加自定义判定区域：可点击【添加/管理自定义判定区域】调起弹窗，然后点击【添加自定义判定区域】，并编辑名称、添加矩形，完成添加
* 添加矩形：点击「添加矩形」，在画布中添加若干个矩形并编辑其位置、大小。若添加了多个矩形，范围会取多个矩形的并集
* 每个自定义区域可进行预览、编辑、复制、删除

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

2-2）阶段设置

* 通过「新增阶段」按钮，可新增单个或多个阶段
* 可调节每个阶段的百分比，设定阶段的具体数值（如擦除区域到达60%为阶段1；到达80%为阶段2），以此作为后续事件的触发条件

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

### 5.参数: 事件

「擦除组件」存在独特的触发事件和响应事件

#### <mark style="background-color:red;">5-1）触发事件</mark>

擦除组件的独特「触发事件」包含：「开始擦除」、「抬手」、「到达某一阶段」、「未到达某一阶段」，<mark style="color:red;">只可以添加在「擦除组件」下</mark>

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

1）开始擦除：按下手指，在启用的可被擦除分组的图层上滑动，视为触发开始擦除

2）抬手：触发开始擦除后 抬起手指，视为触发抬手

3）到达某一阶段：根据「事件判定」中设置的条件，到达了某一阶段，视为触发到达某一阶段

4）未到达某一阶段：根据「事件判定」中设置的条件，若未到达某一阶段，视为触发未到达某一阶段

<mark style="color:red;">注：对于以上触发事件，均可设置「只生效一次」。若未勾选，则该事件可反复触发；若勾选，则只触发一次。</mark>

<div align="left"><figure><img src="/files/H7pbOWyEY1gzf9bFWE10" alt="" width="544"><figcaption></figcaption></figure></div>

#### <mark style="background-color:red;">5-2）响应事件</mark>

擦除组件独特的「响应事件」包含：①启用/禁用擦除组件、②清除擦除痕迹、③显示/隐藏分组、④启用/禁用可被擦除分组、⑤显示并播放/暂停播放 分组的全部序列帧、⑥播放/暂停播放/继续播放 分组的单个/全部动画、⑦替换跟手图片 七类。

以上响应事件，在添加了「擦除组件」的前提下，均可被添加设置

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

**1）启用/禁用擦除组件**

触发后，擦除组件可以被禁用或再次启用

*如设置：抬手-禁用擦除组件，则代表在擦除完抬手时，擦除组件将被禁用，不再生效*

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

**2）清除擦除痕迹**

触发后，会清除组件内已完成的擦除痕迹

*如设置：抬手-清除擦除痕迹，则效果对比如图所示*

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

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

**3）显示/隐藏分组**

需选择具体某个分组(蒙层、底图或自定义分组)，触发后，即可显示或隐藏对应分组

*如设置：到达某一阶段后-隐藏蒙层*

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

**4）启用/禁用可被擦除分组**

需选择具体某个可被擦除的分组(蒙层或自定义分组），触发后，使之允许被擦除/不允许被擦除

*如设置：到达某一阶段后-禁用蒙层，则在擦除到达指定阶段后，蒙层不能再被擦除掉*

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

**5）显示并播放/暂停播放 分组的全部序列帧**

需选择具体某个分组，触发后，可播放/暂停播放 此分组下的所有序列帧图层

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

**6）播放/暂停播放/继续播放 分组的单个/全部动画**

需选择具体某个分组，触发后，可播放/暂停播放/继续播放 此分组下的单个/全部图层的动画

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

**7）替换跟手图片**

需选择具体某张跟手图片，触发后，当前跟手图片将被替换为此处设置的这张图片

*如示例：触发后跟手图片由左图变成右图*

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

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

## <mark style="color:blue;">四、擦除组件常见FAQ</mark>

#### Q1：使用擦除组件，设置了"抬手"事件(如:抬手-暂停播放擦除音效；抬手-播放震屏反馈)，但预览时发现“玩家没抬手却触发了抬手事件”？

**A：**&#x8FD9;可能是因为您使用的Mask图片尺寸偏小。因<mark style="color:red;">玩家可擦除的区域 = Mask的图片大小</mark>，当玩家手指超出Mask的范围时则会被系统判定为"抬手"，从而被动触发抬手事件

**解决办法：**&#x61;.在Mask分组里上传任意一张图片，尺寸调整为您想要的擦除范围，将该图片透明度设为0即可；b.或先在外部将Mask图片的尺寸做得大一些，再替换掉当前图片

#### Q2：使用擦除组件做模拟装扮玩法，核心的制作逻辑是？

**A：**&#x2460;设置【笔触样式】；②添加【跟手图片】，如化妆刷/粒子效果等，跟随玩家手指一起运动；③添加Mask图片与底图，通过擦除Mask来显示底图；④选择判断时机并设置事件判定；⑤为组件设置事件


---

# 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/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?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.