Erase Component - Blank Canvas Tutorial
#Content Editor #Blank Canvas #Erase Component #Simple difficulty
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 demo and feature introduction document for a better understanding!
1. Basic Info
[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
2.Effect Preview
| Best experience for playable on mobile devices | Vertical screen | Horizontal screen |
|---|---|---|
Scan to play |
3. Gameplay Overview
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.
4.Production Approach
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.
| Scene Name | Scene 1 - Core Gameplay |
|---|---|
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 |
5. Production Guidelines
*The core content consists of Step 2"Component Parameter Setting," and Step 5"Event Setting."
Step 1 - Scene Setup
It is recommended to upload all assets into the "Project Assets" after creating the project for easier access and usage in the future.
I. Global Scene
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.
Step 2 - Component Parameter Setting
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.
Step 3 - Landscape & Portrait Orientation Adaptation
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."
I. Adjust the layout for landscape orientation.
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.
II. Adjust the screen adaptation.
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.)
Step 4 - Animation Setting
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
I. Girl sequence frame
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:
II. Guiding hand
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:
III. Retry button group
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:
IV. Love particles
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.
Step 5 - Event Setting
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.
I. Layer: Erase Component
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.)
II. Layer: Retry button group
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
III. Layer: Permanent download button group
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.
Step 6 - Overall Preview
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.
6.Assets Provision
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.
Last updated
