Erase Component - Blank Canvas Tutorial

#Content Editor #Blank Canvas #Basic difficulty #Erase Component

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	Click to play	Click 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.

1MB

Erase Component_Blank Canvas_Assets.zip

archive