# Erase Component

✨Entrance of **Template Content Creation**：Work Preview Area>>>Erase Component button  / Layer Area>>>Erase Component

<figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2F2pB8gzEAZKzvmwfOalCP%2Fimage.png?alt=media&#x26;token=6d0c1f86-8e9a-40e7-b003-d7ec897e3c15" alt=""><figcaption></figcaption></figure>

✨Entrance of **Blank Canvas**：Gameplay Template>>>Component>>>Erase Component

<figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2Fnp8hR7pQx6cDl2CgzJHJ%2Fimage.png?alt=media&#x26;token=8e47dcdc-1c0d-42ff-9250-0c520f726d21" alt=""><figcaption></figcaption></figure>

Related case tutorial can refer to [erase-component-blank-canvas-tutorial](https://doc.playturbo.com/playturbo-case-study/playable-content-editor/painting-gameplay-cases/erase-component-blank-canvas-tutorial "mention")

####

## <mark style="color:blue;">📒Erase Component Intro</mark>

* Underlying logic: Set the "mask" and "bottom image" layers so that players can achieve an erasing effect by erasing the mask layer to reveal the bottom image.
* The Erase Component can be used in both "**Blank Canvas**" and "**Template Content Creation**."  With Content Creation, you can adjust the components based on the gameplay of the original template.  With Blank Canvas or adding a new component, you need to complete the settings for parameters such as "Exterior," "Eraser Stroke Settings," "Component Layer," "Event Judgment," and "Event."
* <mark style="color:red;">Note: Only one component can be added per scene, but component can be added across scenes or copied.</mark>

####

## <mark style="color:blue;">📒Erase Component Sample Cases</mark>

It is suitable for gameplays such as **erasing the mask layer to reveal the bottom image** or **coloring** by dragging within a specific area for erasing or coloring.

* Sample1 - [Beauty cleansing](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)&#x20;
* Sample2 - [Funny erasing](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)
* Sample3 - [Select to Scratch and Clean](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%252F20001306%252F13011%252Fpv%252F24%252F06%252F20%252F6673f2dc8554b%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E9%80%89%E6%8B%A9%E9%81%93%E5%85%B7%E6%93%A6%E9%99%A4\&language=undefined)
* Sample4 - [Deep cleaning](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;">📒Erase Component Instruction</mark>

### 1.Adding Erase Component&#x20;

* Clicking the "+" button on the bottom right corner of the Erase Component will successfully add an Erase Component.&#x20;
* <mark style="color:red;">Note: Only one component can be added per scene, but component can be added across scenes or copied.</mark>

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FQZKogKgMnJbFtPMW73ur%2Fimage.png?alt=media&#x26;token=5ff12837-b3e2-4502-b4e8-eb48e73fae52" alt=""><figcaption></figcaption></figure></div>

The parameters that can be adjusted for the Erase Component are divided into four sections: "Exterior," "Animation," "Erase Settings," and "Event." Next, we will introduce them one by one.

### 2.Parameter: Exterior

* Enable Component: You can enable or disable the Erase Component by adjusting the toggle switch under the "Exterior" parameters (enabled by default).
* The usage of other parameters is the same as regular layers and will not be further explained here.

<figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FsJpJdAnK9tYBJus7ajJ8%2Fimage.png?alt=media&#x26;token=5c6cf065-c682-41ad-ac27-5b73fbdd9dc6" alt=""><figcaption></figcaption></figure>

### 3.Parameter: Animation&#x20;

The animation set here applies to the entire Erase Component.&#x20;

The specific usage is the same as regular layers and will not be further explained here.

### 4.Parameter: Erase Settings

Erase Settings consist of three parts: 'Eraser Stroke Settings', 'Component Layer (Mask and Bottom image)', and 'Event Judgment'.&#x20;

* Eraser Stroke Settings determines the shape, size, and style of the Eraser Stroke Settings during erasing.
* Mask and Bottom image determines the layer style that can be erased and what is displayed after erasing.
* Event Judgment determines whether erasing has reached a specified stage and whether subsequent events need to be triggered.

<mark style="color:red;">NOTE：Erase Settings are the most important parameters of this component; please ensure all parts are set up completely.</mark>

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2F4xxRjBZXBcnlZidjz1EN%2Fimage.png?alt=media&#x26;token=72ab18f1-e7b6-4f91-8fae-201d8d55baf7" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:red;">**Part1：Eraser Stroke Settings**</mark>

The Eraser Stroke Settings consist of two parts: Stroke Style、Image following fingers.

It determines the actual shape, size, and style of the erasing during the process and when the finger moves.

**1）Stroke Style**

* Circular: The Eraser Stroke Settings is circular during erasing, and the size can be set.
* Rectangle: The Eraser Stroke Settings is rectangle during erasing, and the size can be set.
* Image Recognition: You can upload PNG or sequence frame images, and the contour of the image is recognized as the Eraser Stroke Settings. The image size and scale can be set.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FqrgH63iZOKfSGudwnL7r%2Fimage.png?alt=media&#x26;token=f95f24e9-d2e3-42f1-8869-70b5a6bec113" alt="" width="536"><figcaption></figcaption></figure></div>

**2）Image following fingers**

* Determines the style of the image that follows the finger movement during the erasing process (unrelated to the Eraser Stroke Settings), not necessarily uploaded, multiple Image following fingerss can be uploaded (only one Image following fingers will take effect at a time).&#x20;
* For the Image following fingers, you can click to modify its size, scale, rotation angle, and other Exterior parameters.&#x20;
* The follow-hand anchor point parameter determines the position of the Eraser Stroke Settings during erasing and can be adjusted by moving the green dot.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FlpyYNAy3PB1fpDWM1uJQ%2Fimage.png?alt=media&#x26;token=7df36c34-e3c8-4de3-8b98-337108dd6792" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:red;">**Part2：Component Layer(Mask & Bottom image)**</mark>

Component Layer consists of Mask and Bottom image.

**1）Mask**

* Mask represents the "erasable object."
* You can upload a single or multiple static frame images as the mask.
* You can control whether erasing is enabled or disabled by using the switch.If it's disabled here, you can enable it again at specific times using events.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FikErt5d2LRpnpOwLW4no%2Fimage.png?alt=media&#x26;token=f3524b13-ac37-4b71-b63f-6ba5fe8d075f" alt=""><figcaption></figcaption></figure></div>

* The mask layer supports clicking to set exterior, animation, and other parameters, and supports dragging and adjusting in the canvas area.
* During the erasing process, when the Eraser Stroke Settings moves over the mask layer, parts of the mask layer are erased according to the Eraser Stroke Settings size and trajectory (if multiple images of the mask layer overlap, the overlapping parts will be erased together).
* <mark style="color:red;">The area that players can erase = the size of the Mask image.</mark>

<figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2F7kXhGnCTtKcA8ex8EeCh%2Fimage.png?alt=media&#x26;token=a05e9f57-46df-479d-a590-d6de72312738" alt=""><figcaption></figcaption></figure>

**2）Bottom image**

* The Bottom image represents the "non-erasable/non-obscured object" and will always be positioned below the mask.
* The Bottom image supports uploading single or multiple static frame images, GIFs, or sequence frames.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FVvJfIfxHU3ajW6WH1QMB%2Fimage.png?alt=media&#x26;token=9ebd5535-a588-4044-8703-f8b71206b705" alt=""><figcaption></figcaption></figure></div>

* You can click on a single layer to set exterior, animation, and other parameters.And it also supported dragging and adjusting in the canvas area.
* During the erasing process, when the mask layer above is erased, parts of the bottom image are revealed.

<figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FTWmjp8UjLGdfwvFzhefe%2Fimage.png?alt=media&#x26;token=354fd83e-b715-4ae1-bc5a-73efb473591a" alt=""><figcaption></figcaption></figure>

**3）Custom Layer**

You can add custom layer groups and need to set their names and whether they can be erased.

* If erasable, similar to the mask layer, during the erasing process, all layers under this group can be erased.
* If not erasable, similar to the bottom image, it cannot be erased.&#x20;

Custom Layer Application Scenario: Used to set some special layers.&#x20;

For example, obstacles: These layers are neither masks nor bottom images but cannot be erased. You can use events to control the effects triggered when the erase brush encounters these layers during the erasing process.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FzWq0MKMr59XSw1EPrSN4%2Fimage.png?alt=media&#x26;token=2a78893f-9409-4948-9905-177d3406298c" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:red;">**Part3：Event Judgment**</mark>

Event Judgment parameters:  Determine whether the erasure of a certain area has reached a certain percentage (e.g., whether the mask layer has been erased by 80%), and use this as the trigger condition for subsequent events.&#x20;

For example, when lifting the hand, if the mask layer area is erased by more than 80%, it triggers the subsequent scene transition event. The judgment of 'more than 80%' needs to be set through the 'Event Judgment'.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FfYJonYBSTITiNb9wvAeP%2Fimage.png?alt=media&#x26;token=f01fde70-4b07-47f4-8630-b28baeea1957" alt=""><figcaption></figcaption></figure></div>

**1）Timing of Judgment**

Timing of Judgment is divided into two categories: Judgment upon lifting finger & Real-time judgment during erasure process.

* Judgment upon lifting finger: Determine the erasure situation of the area when lifting the hand after erasing.
* Real-time judgment during erasure process: Calculate in real-time during the erasing process, if the erasure area reaches the set stage. (This option may cause performance issues; it is recommended not to set it to real-time judgment unless necessary)

**2）Event Judgment**

2-1）Region Selection for Detection

You can choose several mask layer images or several custom areas.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2F56Wp8u5y3CQ7GBOjlqan%2Fimage.png?alt=media&#x26;token=dd22455a-2086-4a47-a0ac-6d43cbac053d" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:yellow;">Custom Detection Regions</mark>

* Adding Custom Detection Regions: Click on "Add/Manage Custom Detection Regions" to bring up a popup window. Then click on "Add Custom Judgment Area" and edit the name and add rectangle to complete the addition.
* Adding Rectangles: Click on "Add Rectangle" to add multiple rectangles on the canvas and edit their positions and sizes. If multiple rectangles are added, the range will be the union of all the rectangles.
* Each custom region can be previewed, edited, copied, or deleted.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FgKGm7hG76VbWdADqR9Mr%2Fimage.png?alt=media&#x26;token=582dd3f1-be1c-4510-a830-281623e56995" alt=""><figcaption></figcaption></figure></div>

2-2）Stage Settings

* Add a new stage by clicking the 'New Stage' button.
* Set the specific values of the stage by setting the percentage of each node. (For example, reaching 60% is Stage 1; reaching 80% is Stage 2)  And use this as a trigger for subsequent events.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FnGCg1WafPSyR4JIisq4z%2Fimage.png?alt=media&#x26;token=1ac489e2-35f7-4523-b5a8-ba3ed5295bb3" alt=""><figcaption></figcaption></figure></div>

### 5.Parameter: Event

The 'Erase Component' has unique trigger events and response events.

<mark style="background-color:red;">**5-1）Trigger event**</mark>

The Erase Component includes four unique trigger events: 'Start Erasing', 'Lift Finger', 'Reach a certain stage', and 'Not reached a certain stage', <mark style="color:red;">which can only be configured under the 'Erase Component'.</mark>

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FtdV0aWyScVpqN25l0SJX%2Fimage.png?alt=media&#x26;token=e5e3ca2e-8f80-4594-9a7e-ef25bb1f64f8" alt=""><figcaption></figcaption></figure></div>

1）Start Erasing: Pressing a finger and moving it to an erasable area is considered triggering the start of erasing.

2）Lift Finger: After triggering the start of erasing, lifting the finger is considered triggering the 'Lift Hand' event.

3）Reach a certain stage: Based on the conditions set in 'Event Judgment', reaching a certain stage is considered triggering 'Reach a certain stage'.

4）Not reached a certain stage: Based on the conditions set in 'Event Judgment', whether not reaching a certain stage upon lifting the hand/real-time judgment, if so, it is considered triggering 'Not reached a certain stage'.

<mark style="color:red;">NOTE: For the above trigger events, you can set them to 'Valid only once'. If not checked, the event can be triggered repeatedly; if checked, it triggers only once.</mark>&#x20;

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FoudpB5Q4SzUDCuYCwEtE%2Fimage.png?alt=media&#x26;token=5a8ec277-6ea0-43a0-991b-f348cb73e842" alt="" width="533"><figcaption></figcaption></figure></div>

<mark style="background-color:red;">**5-2）Response event**</mark>

The unique 'Response events' of the 'Erase Component' include: ①Enable/Disable Erase Component、②Clear Erase Marks、③Show/Hide Groups、④Enable/Disable Erasable Groups、⑤Show and Play/Pause All Frames of Group、⑥Play/Pause/Resume Single Animation of Group  Single Animation/All Animations of Group、⑦Replace the image following the finger.

These response events can be set at any position under the condition of adding an 'Erase Component'.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FjgJ0shKOTER0EeKeLkla%2Fimage.png?alt=media&#x26;token=9eb842e4-e4d9-4fc8-931b-5ef4052da107" alt=""><figcaption></figcaption></figure></div>

**1）Enable/Disable Erase Component**

Upon triggering, the Erase Component can be disabled or enabled again.

*For example, if set to "Lift Finger - Disable Erase Component," it means that when the erasing is completed and the user lifts their finger, the Erase Component will be disabled and no longer function.*

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2F7TtaRwalzcuMot55kJQt%2Fimage.png?alt=media&#x26;token=37e3d498-a953-46f7-8a6d-88726918e439" alt=""><figcaption></figcaption></figure></div>

**2）Clear Erase Marks**

Upon triggering, it clears the completed erasing traces within the component.&#x20;

*For example, if set to "Lift Finger - Clear Erase Marks", the effect comparison is as shown in the figure.*

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FiJCh6aKfuaMewtZA0KRK%2Fimage.png?alt=media&#x26;token=923d30cb-5fb3-421a-a9d7-f33bc4607e45" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FsPvZAD53BkveMcga9c78%2Fimage.png?alt=media&#x26;token=f91fe3cd-c6ac-4b67-be42-e5c0c3b934da" alt=""><figcaption></figcaption></figure></div>

**3）Show/Hide Groups**

You need to select a group (mask layer, bottom image, or custom layer) to show/hide all layers under that group.

*For example, if set to "Reach a certain stage - Hide the mask layer"*

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FW7WvVhuDYJYBXC6wfG7N%2Fimage.png?alt=media&#x26;token=ddce38df-49d1-4a56-a9b0-bc6038b38b86" alt=""><figcaption></figcaption></figure></div>

**4）Enable/Disable Erasable Groups**

You need to select an erasable group (mask layer or erasable custom group) to allow/prevent erasing.

*For example, if set to "Reach a certain stage - Disable the mask layer", then after erasing reaches the specified stage, the mask layer can no longer be erased.*

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FF9Jn4vsgQlI8k4OfXPV6%2Fimage.png?alt=media&#x26;token=257b69db-469b-49a5-af90-079402d76f6d" alt=""><figcaption></figcaption></figure></div>

**5）Show and Play/Pause All Frames of Group**

You need to select a group and play/pause all sequence frame layers under that group.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FuLTMeT5tGWbY6DyeqCjl%2Fimage.png?alt=media&#x26;token=3c084b15-62d9-4115-89f3-1e544ee97aec" alt=""><figcaption></figcaption></figure></div>

**6）Play/Pause/Resume Single Animation of Group  Single Animation/All Animations of Group**

You need to select a group and play/pause/continue playing animations of a single/ all layers under that group.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2F948R9BKKq7hZHbRdEdH9%2Fimage.png?alt=media&#x26;token=bbfaaeb9-0416-4fd3-b156-756a704c4e2c" alt=""><figcaption></figcaption></figure></div>

**7）Replace the image following the finger**

You need to select a specific Image following fingers. After triggering, the current Image following fingers will be replaced by the picture set here.

*For example: after triggering, the Image following fingers changes from picture1 to picture2.*

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FEDCZkDwE6Nx1m1o8UNJn%2Fimage.png?alt=media&#x26;token=cc5fc2ff-99b5-4b3a-949d-5fe4e2dc797a" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FEoxUP85zAMRkhlvltkt9%2Fimage.png?alt=media&#x26;token=e662ffdc-fa91-400d-81a8-bb41c9f9e1ba" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">📒Erase Component</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**FAQs**</mark>

#### Q1: I set up "Lift up" events (e.g., Lift up - pause erase sound; Lift up - trigger vibration feedback) using the Erase Component, but during preview, I found that “the player didn’t raise their hand but still triggered the Lift up event.” What is the reason for this?

**A:** This may be due to the size of the Mask image being too small. <mark style="color:red;">The area that players can erase is = the size of the Mask image.</mark> When a player's finger goes beyond the Mask's range, the system will determine it as a "Lift up," inadvertently triggering the Lift up event.

**Solution:** a. Upload any image in the Mask group, adjusting its size to your desired erasing range, and then set the transparency of that image to 0;  b. Alternatively, enlarge the Mask image size externally first, and then replace the current image.

#### Q2: What is the core logic for creating a simulation dress-up gameplay using Erase Component?

**A:** ①Set \[Stroke Style];  ②Add \[Image following fingers], such as a makeup brush or particle effects, to move with the player's finger;  ③Add the Mask image and the background image, using the mask to reveal the background;  ④Choose the timing for judgment and set event conditions;  ⑤Set events for the component.