Erase Component
#Content Editor #Template Content Creation #Blank Canvas
Last updated
#Content Editor #Template Content Creation #Blank Canvas
Last updated
✨Entrance of Template Content Creation：Work Preview Area>>>Erase Component button / Layer Area>>>Erase Component
✨Entrance of Blank Canvas：Gameplay Template>>>Component>>>Erase Component
Related case tutorial can refer to Erase Component - Blank Canvas Tutorial
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."
Note: Only one component can be added per scene, but component can be added across scenes or copied.
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.
Clicking the "+" button on the bottom right corner of the Erase Component will successfully add an Erase Component.
Note: Only one component can be added per scene, but component can be added across scenes or copied.
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.
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.
The animation set here applies to the entire Erase Component.
The specific usage is the same as regular layers and will not be further explained here.
Erase Settings consist of three parts: 'Eraser Stroke Settings', 'Component Layer (Mask and Bottom image)', and 'Event Judgment'.
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.
NOTE：Erase Settings are the most important parameters of this component; please ensure all parts are set up completely.
Part1：Eraser Stroke Settings
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.
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).
For the Image following fingers, you can click to modify its size, scale, rotation angle, and other Exterior parameters.
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.
Part2：Component Layer(Mask & Bottom image)
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.
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).
The area that players can erase = the size of the Mask image.
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.
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.
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.
Custom Layer Application Scenario: Used to set some special layers.
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.
Part3：Event Judgment
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.
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'.
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.
Custom Detection Regions
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.
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.
The 'Erase Component' has unique trigger events and response events.
5-1）Trigger event
The Erase Component includes four unique trigger events: 'Start Erasing', 'Lift Finger', 'Reach a certain stage', and 'Not reached a certain stage', which can only be configured under the 'Erase Component'.
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'.
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.
5-2）Response event
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'.
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.
2）Clear Erase Marks
Upon triggering, it clears the completed erasing traces within the component.
For example, if set to "Lift Finger - Clear Erase Marks", the effect comparison is as shown in the figure.
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"
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.
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.
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.
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.
👉Recommended Reading： Component Issues
Sample1 -
Sample2 -
Sample3 -
Sample4 -
