# Mask Component - Blank Canvas Tutorial Please Note：This tutorial mainly explains **how to create interactive materials using the Mask Component to display target images through clicking, dragging, and other interactive methods.** It is recommended to use it together with the [demo](https://tinyurl.com/4j5t5z3u) and [feature introduction document ](/playable-tools-content-editor/content-editor-user-guide/component-and-quick-layout/mask-component.md) for a better understanding! ## 1. Basic Info * \[Difficulty]: ⭐⭐ * \[Applicable Products]: Universal * \[Interaction]: Drag and drop to the specified location * \[Freedom]: Fixed process * \[Core Assets]: Image * \[Features]: Mask Shape、Masking Group、Drag event ## 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, display \[black and white background] and \[operation guide], guide the player to slide to color * Player drags the rainbow bar * If not dragged to the specified position, the rainbow bar returns to its original position * If dragged to the specified position, the coloring is successful and the ending scene is redirected to * In the ending scene, when the player presses the button, redirect him to 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:** Based on the gameplay overview from the previous section, we can divide this case into 2 scenes for production.

Scene Name	Scene 1 - Core Gameplay	Scene 2 - End Page
Visual Rendering
Scene Description	Player drags the rainbow bar to color the image.	Success feedback & Redirect button
Core Assets	Static Images: Colored image (Masking Group) Rainbow bar (Follow Element) Black and white background Guiding finger Audio-visual packaging: Rainbow bar particle effect (Follow Element) Click sound effect	Static Images: Colored image Redirect button Audio-visual packaging: Star particle effect Success sound effect
Core Animations	Guiding finger: Displacement Easing Guiding text: Flash	Feedback text & Redirect button: PulseFront Background light: Spin Easing
Core Events	Trigger Object: Mask Shape Trigger Event: Drag and drop to the specified location Response Event: Redirect to the next scene	Trigger Object: Redirect button Trigger Event: Press Response Event: Redirect to app store

## 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. #### **1. 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 the position and size of each asset. Group and sort the assets reasonably.

#### **2. G**eneral **Scene** 1）In Scene 1, click on "Gameplay Template" and select the Mask Component from the "Component" to add it.

2）Add the guiding finger, guiding text, and click sound effect. Adjust the position and size of each asset.

3）In Scene 2, add corresponding feedback assets and adjust their positions and sizes (you can group all assets together for easier landscape adaptation). 4）Set the parameters of the feedback sound effect to "autoplay 1 time upon open."

5）Check Scene 2 as the "Ending Scene."

### Step 2 - Component Parameter Setting #### 1.Exterior Select the Mask Component and adjust its size to the desired dimensions under the Exterior parameters.

#### 2.Mask Settings **2.1 Masking Group** The "Masking Group" contains the content that will be displayed within the coverage area of the "Mask Shape." First, add the final image (colored image) that needs to be displayed into the "Masking Group."

**2.2 Custom Groups** 1）Add mask custom group 1 (named "background\_image"). Add the initial image (black-and-white image) to the group and adjust its layer order to the lowest.

2）Add mask custom group 2 (named "outer\_frame"). Add the frame image to the group and adjust its layer order to the highest (decorative image that should always stay on top).

**2.3 Mask Shape** 1）In this case, we choose a rectangle as the Mask Shape. 2）Click on "Rectangle" to open the parameter window and adjust the size of the Mask Shape to cover the final displayed image. 3）Move the Mask Shape to the right side (without overlapping the Masking Group).

Clicking on "Preview Mask Effect" allows you to view the actual effect.

**2.4 Follow Element** Under "Follow Element," add the rainbow bar and rainbow particles, and adjust their positions and sizes accordingly.

### 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." #### 1. Adjust the layout for landscape orientation 1）In Scene 1, switch to landscape mode. Select all the top-level layers, including the Mask Component, and use the "Reuse vertical screen position configuration" feature to automatically arrange them for landscape mode.

2）Then, individually adjust the position and scale of each layer to display the complete core gameplay-related content.

3）Similarly, repeat the process for Scene 2 and the Global Scene to complete the layout for landscape mode.

#### 2. Adjust the Screen adaptation In this case, we want the persistent information group in portrait mode to always be at the top of the screen for each device model. Therefore, we adjust its "Screen adaptation" to "Top-Fit" (other layers remain centered without adjustment).

### Step 4 - Animation Setting In this case, the animations and particle effects used are as follows. Let's go through them one by one: Scene 1: Guiding finger displacement animation、Guiding text blinking animation Scene 2: Feedback text & Redirect button scaling animation、Background light rotation animation、Star particles #### 1. Guiding finger：Displacement Easing Select the hand image \[gf\_hand], Add Animation - Universal - Displacement Easing, as a looping guiding animation. Set the parameters as follows:

#### 2.Guiding text：Displacement Easing Select the guiding text \[text\_guide], Add Animation - Emphasize - Flash, as a looping guiding animation. Set the parameters as follows:

#### 3.Redirect button & Feedback text:PulseFront 1）Select the redirect button group \[btn\_end], Add Animation - Emphasize - PulseFront, as a looping guiding animation. Set the parameters as follows:

2）Duplicate the animation to the feedback text \[text\_feedback], adjust the parameters slightly, and use it as a looping display animation. Set the parameters as follows:

#### 4.Background light：Spin Easing Select the background light image \[light], Add Animation - Universal - Spin Easing, as an additional effect animation. Set the parameters as follows:

#### 5.Particle Effects 1）Open the "Asset Library"- "Particle", choose suitable particle effects (such as star particles) to enhance the visual effect of the scene. 2）Adjust the position of the particles to suitable locations (remember to adjust for both portrait and landscape modes).

### Step 5 - **Event** Setting To complete the setup of all animations, we need to configure the logic of the gameplay using "events." The contents related to events and settings in this case include: hiding the guiding interaction when the Mask Shape is pressed, redirecting to the end scene after dragging the Mask Shape to a specific position, and redirecting to app store after pressing the redirect button. Next, we will explain each step in sequence. #### 1. Layer: Mask Component 1）Select the \[Rectangle]. **Add Event - Press**. Add response events: * Set Tracking Event, select tracking ID 1, and edit the tracking name as "Player First Press." * Hide the guiding interaction * Play the click sound effect once

2）**Add Event -Drag and drop to the specified location.** Edit the \[Specified Area] and \[Custom Draggable Range], selecting the drag direction as horizontal.

*(If the draggable range is set to "Full Screen", there might be a possibility of dragging too far, revealing the black-and-white background image.)*

3） Add response events: * Set Tracking Event, select tracking ID 2, and edit the tracking name as "Successfully completed coloring." * Redirect to the next scene

#### 2. Layer: Redirect button group Select the redirect button group \[btn\_end]. **Add Event - Press**. Add response events: * Set Tracking Event, select tracking ID 3, and edit the tracking name as "Ending Page Trigger redirection." * Redirect to app store.

#### 3. Layer: Persistent download button group Select the persistent download button group \[group\_ctat] . **Add Event - Press**. Add 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 and Mask Component to make such materials as soon as possible. {% file src="/files/8vOFB6vSzbjm9HFNxzjo" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://doc.playturbo.com/playturbo-case-study/playable-content-editor/painting-gameplay-cases/mask-component-blank-canvas-tutorial.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.