Erase Component - Blank Canvas Tutorial
#Content Editor #Blank Canvas #Basic difficulty #Erase Component
Last updated
#Content Editor #Blank Canvas #Basic difficulty #Erase Component
Last updated
Please Note：This tutorial mainly explains how to create interactive materials with the "erase gameplay" through Erase Component in Blank Canvas. It is recommended to use it together with the and for a better understanding!
[Difficulty]: ⭐⭐
[Applicable Products]: Erase gameplay
[Interaction]: Start Erasing/Reach a certain stage
[Freedom]: Fixed process
[Core Assets]: Image
[Features]: Reach a certain stage - Hide the mask layer
Scan to play
Before starting the production, we need to outline the gameplay logic for this case：
Upon entering the trial, displaying the scene of "a girl being obscured," with the default animation of the girl playing as a sequence of images.
Show the "operation guide" to instruct players to swipe and erase the mask.
Allow players to freely swipe at the mask position, causing it to be instantly erased and revealing the girl's body.
When 60% of the mask area is erased, the mask disappears, and the complete image of the girl along with a retry button appears.
When the player presses the button, redirect him to the app store.
Core Concept: Minimize the number of animations and events within each scene, maintain clear logic in scene segmentation, and keep the layer structure simple.
Scene Segmentation: Since the gameplay for this case is relatively simple, we only need one scene to create it.
Visual Rendering
Scene Description
Player can slide the mask anywhere to erase the mask to display the complete picture of the girl.
Core Assets
Static Images: Mask (erase layer), operation guide, replay button
Sequence frame: Background image of the girl.
Audio-visual packaging: Love particle special effects, erasing sound effect, shy sound effect of the girl.
Core Animations
Operation guide: Displacement Easing
The girl zooms in and appears: Scale Easing+Displacement Easing
Core Events
Trigger Object: Erase Component
Trigger Event: Reach a certain stage
Response Event: Hide the mask layer
*The core content consists of Step 2"Component Parameter Setting," and Step 5"Event Setting."
It is recommended to upload all assets into the "Project Assets" after creating the project for easier access and usage in the future.
1）Add BGM and Background Image in the "Global Settings" section.
2）Add permanent download button, logo and other product information under [Global Scene], and adjust their position size.
2）Add the guiding hand, guiding text and background board, replay button, and sound effects to Scene 1.
3）Adjust the position and size of each asset accordingly and group, arrange, and name the assets based on their types.
4）In this case, since we only need one general scene, you can delete Scene 2.
I. Click on the "Eraser Settings" button in the top right corner to access the Erase Component parameter editing panel.
II. Add the eraser ribbon image to the Mask layer and add the character sprite frames to the Bottom image layer. Adjust the assets to the appropriate position and size.
III. Next, adjust the "Eraser Stroke Settings" according to your needs. In this case, we select a circular brush with a size of 60*60 and do not add the Image following fingers.
IV.Set up Event Judgment for the Mask layer.
1）Timing of Judgment: In this case, we want to dynamically detect the erasing progress, so we choose "Real-time judgment during erasure process" as the timing option.
2）Add Event Detection: In this case, we want to trigger a corresponding feedback when the erased area reaches 60%, so we set the detection area to the "erase_mask" layer. Click on "New Stage" and set Stage 1 to 60%.
With the above steps completed, the basic parameters of Erase Component are now properly set up.
After completing the layout for portrait orientation, we need to adjust the "layout for landscape orientation" and the "screen adaptation for both landscape and portrait orientations."
1）Switch to landscape mode and select all the top-level layers (including the Erase Component layer).
2）Use the "Reuse vertical screen position configuration" function to automatically adjust the layout, and then fine-tune the position and scale of each layer appropriately to display the complete content related to the Erase Component.
3）Similarly, switch to the "Global Scene" and select the logo and permanent download button group. Use the "Reuse vertical screen position configuration" function to automatically adjust the layout, and then make minor adjustments to their position and size.
1）In this case, we want the persistent information to be adapted by sticking to the top or bottom in portrait mode and aligning to the top left corner in landscape mode. Therefore, we adjust the screen adaptation separately for landscape and portrait orientations.
2）In Scene 1, we want the replay button group and guiding text group to always be at the bottom of the screen in landscape mode. So, we adjust their screen adaptation method to stick to the bottom. (Other layers can remain centered without adjustment.)
In this case, we use the following animations and particle effects:
Animation for the girl sprite frames (Bottom image layer)
Animation for the guiding hand
Animation for the retry button group
Particle effect for love particles
1）Click on the girl sequence frame in the Bottom image layer of Erase Component.
2）In the popup panel, select "Animation."
3）Add scale and displacement animations in sequence to create a visual effect when the character is successfully revealed.
4）Set the parameters as follows:
1）Select the hand image [gf_hand] in the layer area.
2）Add Animation - Universal - Displacement Easing for position transition to create a guiding animation.Set the parameters as follows:
1）Select the retry button group [group_retry_btn].
2）Add Animation - Universal - Alpha Easing for a fade-in effect and Scale Easing animation to guide users to click the retry button.
3）Set the parameters as follows:
1）Click on [Asset Library] - [Particle]
2）Select the love particle effect to enhance the atmosphere after revealing the girl's image.
3）Set the love particle effect to "hidden" initially. We will control its display and playback through event later.
The contents related to event settings in this case are as follows:
Hide the operation guide and play the erasing sound effect when starting erasing.
Pause the playback of the erasing sound effect when lifting the hand.
When the erasing area reaches 60%, make the erase layer disappear and display/play relevant feedback.
Next, we will explain them in order.
1）Select the Erase Component, and click on "Add Event."Choose the trigger event as "Start Erasing."
Add the following response events in sequence:
Hide guiding text group
Hide guiding hand group
Play the erasing sound effect from the beginning(Set the parameters for the sound effect to loop infinitely.)
2）Continue to "Add Event" and choose the trigger event as "Lift Finger."
Add the following response event:
Pause the playback of the erasing sound effect.
3）Continue to "Add Event" and choose the trigger event as "Reach a certain stage."
Note: Since the feedback is only triggered once the erasing area reaches the target, we check the option "Valid only once" for this event.
Choose "Event Judgment 1" and then select "Stage 1: 60%".
Add the following response events in sequence:
Hide the mask group
Play all animations in the girl sequence frames group from the beginning
Play all animations in the retry button group from the beginning
Show and play the love particle effect
Play the shy sound effect of the girl from the beginning(Set the parameters for the sound effect to disable infinite looping and disable other sound effects.)
1）Select the retry button group and click on "Add Event." Choose the trigger event as "Press."
2）Add the following response events in sequence:
Redirect to app store
Report the end of the playable ads
1）Select the permanent download button group and click on "Add Event." Choose the trigger event as "Press."
2）Add the following response event: Redirect to app store.
These are all the events used in this case. With the completion of all event settings, our material is completed.
1）It is advisable to preview your work promptly after completing each step in the creation process to check if the settings are correct.
2）Once everything is completed, it is recommended to perform an overall preview on different devices, languages, and orientations to ensure everything is working correctly.
At the end of the tutorial, we have provided all the assets used in this case for you. Click on the compressed file to download it.
You can use these assets to follow the tutorial and try to make it, so that you can start using the Content editor to make such materials as soon as possible.
