> 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/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).

# 擦除组件

✨模板自由制作入口：作品预览区>>>自由画线按钮 或 图层区>>>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来显示底图；④选择判断时机并设置事件判定；⑤为组件设置事件