<Match 3 Dress Up>Blank Canvas Tutorial
#Content Editor #Blank Canvas #Advanced difficulty #Global Variables
Last updated
#Content Editor #Blank Canvas #Advanced difficulty #Global Variables
Last updated
Please Note：This tutorial primarily explains how to create a "Match-3 & Dress Up" gameplay combination as a 2D playable ad through Blank Canvas. Since the template was independently designed following this tutorial, you can directly use the template to create a "Content Creation" project as a reference for Blank Canvas. By combining it with this tutorial, your learning experience will be even better!
💡 Based on this approach, you can also create playable ads that combine various other gameplay styles!
[Difficulty]: ⭐⭐⭐
[Applicable Products]: Match-3 & Match-3 combined with other gameplay mechanics
[Interaction]: Press
[Freedom]: Fully free
[Core Assets]: Image/Sequence
[Features]: Press-Show/Hide layer；Global Variables
Scan to play
Before starting the production, we need to outline the gameplay logic for this case：
Enter the playable (Scene 1): Display the "Idle Sequence of the Girl" and "Two Outfit Options."
Show the "Action Prompt": Guide the player to select either option.
When the player taps an option, they proceed to the Match-3 section (Scene 2).
Display the "Initial Match-3 Layout" and "Action Prompt": The player can tap any block, which will then appear in the "Match Slot."
When the "Match Slot" contains three blocks with identical patterns, play the "Successful Match Feedback."
After the player completes all matches, play the "Victory Feedback" and proceed to the end page (Scene 3).
Fake End Level Page: The player taps anywhere on the screen to redirect 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: Based on the gameplay logic from the previous section, this case can be divided into 3 scenes for production: Selection Phase + Core Gameplay + Fake Level End Page.
Visual Rendering
Scene Description
Two-Option Selection Guide
Match-3 Blocks: Players can tap any block. Blocks are eliminated in place when matching conditions are met. After eliminating all blocks, victory feedback is played, leading to the end page.
Players tap anywhere to redirect to the app store.
Core Assets
Static Images: Outfit Options ×2, Background Image, Action Prompt
Sequence Frame: Girl's Idle Sequence
Sound Effects: Tap Sound
Static Images: Outfit Blocks, Match Slots, Mask
Particle Effects: Sparkle Particles
Sound Effects: Tap Sound, Elimination Sound
Static Images: Fake Level Image
Sequence Frame: Girl Changing Outfi Sequence
Particle Effects: Heart Particles, Smoke Particles
Sound Effects: Tap Sound, Outfit Change Sound, Girl Scream Sound
Core Animations
Finger Guide: Displacement Easing + Alpha Easing
Outfit Options: Elastic Amplification Entry + Displacement Easing
Guide Group: FadeOut
Elimination Group: FadeIn
Finger Guide: Displacement Easing + FadeOut
Mask: FadeOut
Girl's Idle Sequence: FadeOut
Girl Changing Outfit Sequence: FadeIn + Scale Easing
Fake Level Group: FadeIn
Core Events
Trigger Object: Outfit Options
Trigger Event: Press
Response Event: Redirect to the next scenee
Trigger Object: Single block
Trigger Event: Press
Response Event: Hide the original block; display the block in the match slot; Assign the value(Global Variables)
Trigger Object: Scene 2 Trigger Event: Condition
Response Event: Hide the block in the match slot; Assign the value (global variable)
Trigger Object: Interactive Area
Trigger Event: Press
Response Event: Redirect to app store
*The core contents are Step1 [Scene Setup] & Step4 [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.
Add BGM in the "Global Settings."
In the "Global Scene," add persistent elements like the download button, logo, and other product information. Adjust their position and size, and group them logically.
Add the relevant assets to Scene 1.
Adjust all assets to appropriate positions and sizes. Name, group, and organize assets based on their types.
Duplicate Scene 1 to create Scene 2, and remove the two unnecessary finger guide groups.
Add other core gameplay-related assets to Scene 2.
Adjust all assets to appropriate positions and sizes. Name, group, and organize assets based on their types (details can be reviewed within the project).
⚠️Please Note: For this type of gameplay (where items change position after player interaction), the production logic is as follows: Add the item to all possible positions where it could appear. Initially, hide the items that won’t be visible at the start. Then, use events to display the item in the match slot while hiding the item at its original position. This achieves the desired effect.
Therefore, besides the block grid shown on the initial interface (red area), all possible outcomes should be added to each match slot. Specifically, 2 different outfit blocks × 5 match slots (green area).
Adjust the layer's initial state: Set all block images in the match slots to "hidden." Subsequent events will control the visibility of these layers.
Create Scene 3 and add the relevant assets.
Similarly, adjust all assets to appropriate positions and sizes. Name, group, and organize assets based on their types (details can be reviewed within the project).
Adjust the layer's initial state: Set the fake level group to "hidden" initially. Use timed events to control the visibility of these layers, creating smoother transition effects.
Mark Scene 3 as the "Ending Scene" to ensure proper reporting for the end of the playable.
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."
Switch to landscape mode and select all the top-level layers.
Use the "Reuse vertical screen position configuration" function to automatically adjust the layout, and then fine-tune the position and scale of each layer.
Scene 2, Scene 3, and the Global Scene follow the same principle.
If you want materials to perfectly adapt to various device types, you can also adjust the adaptation methods for certain layers.
In this case, we want the product information group to always appear at the top of the screen for all device models in portrait mode, so we adjust its "Screen adaptation" to centered and pinned to the top; for landscape mode, it is pinned to the top left corner (other layers remain centered without adjustment).
The animations and particle effects used in this case are as follows, and we will introduce them one by one:
Scene 1: Finger guide animation, Outfit option guide animation.
Scene 2: Guide group exit animation, Elimination group entrance animation, Finger guide animation, Sparkle particle elimination effect.
Scene 3: Mask exit animation, Girl’s idle sequence exit animation, Girl changing outfit sequence entrance animation, Fake level group entrance animation, Smoke & heart particles outfit change effect.
Select guide hand 1 image [gf_hand], Add Animation - Universal - Displacement Easing.
Select guide hand 1 group layer [gf_hand1], Add Animation - Universal - Alpha Easing.
Sequentially copy the two animations toguide hand 2 Image and the group layer, and fine-tune the curve for the Alpha Easing animation.
These animations work together to achieve the alternating finger guide effect. (If you only need a simple two-option effect, using a single finger image with back-and-forth displacement animation is sufficient.)
Select outfit option 1 image [bubble1], add Approach - Elastic Amplification Entry. The parameter settings are as follows
Continue adding Universal - Displacement Easing as the dynamic guide animation for the option. The parameter settings are as follows
Copy both animations to outfit option 2 image [bubble2].
Select the initial guide group [admission], add Exit - FadeOut, and set the parameters as follows:
Select the core elimination group [group_match_lv1], add Approach - FadeIn, and set the parameters as follows:
Copy the Displacement animation from Scene 1’s guide hand, and apply it to the guide hand [gf_hand] in Scene 2 as the guide animation.
Select the guide hand group layer [gf_hand3], add Exit - FadeOut, and disable auto-play. Later, control the playback of the animation via event settings.
Open the public particle library, select and add the appropriate particle effect to the [blockchose] group.
In this case, since all five elimination slots may contain blocks, duplicate four additional particle layers, one for each slot.
Remember to adjust the particle positions in landscape mode.
Once adjusted, hide these particle layers, and later control the playback of the particle effects via event settings.
Copy the FadeOut animation from the initial guide group in Scene 2 and apply it to the mask image [mask] in Scene 3 as the Exit animation.
Continue copying the animation to the girl idle sequence [animation_idle_1] as the Exit animation, and fine-tune the parameters.
Select the girl undressing sequence [animation_idle_2], add Approach - FadeIn, and set the parameters as follows:
Optionally, add Universal - Scale Easing for the entrance emphasis animation, and set the parameters as follows:
Copy the FadeIn animation to the fake level group [group_match_lv2], and fine-tune the parameters.
In the public particle library, select and add the appropriate particle effects to the [group_dressup] group, and adjust their positions.
Remember to adjust the particle positions in landscape mode.
After setting up all elements, we need to link the entire flow by configuring events.
Next, we will explain the setup step by step.
Select the outfit option 1 layer [bubble1], and Add Event - Press.
Add response events:
Set Tracking Event 2. And enter the tracking name, such as "Player clicked on option 1."
Play the FadeOut animation of the initial guide group from the beginning.
Play the click sound effect from the beginning.
Redirect to the next scene
Copy this event to the outfit option 2 layer [bubble2] (while modifying the tracking parameters).
Firstly, to achieve:
a. Display the slots: Determine the possible outcomes based on the player's actions and show the corresponding results.
b. Interaction Switch: Disable the clicking of blocks during elimination and clear the elimination slots.
c. Count Successful Eliminations: The player needs to eliminate all blocks (four sets) before entering the end page.
First, click on the [Global Variables] icon at the top and add a variable.
Enter the variable name, such as "blockchose1," and set the variable type and initial value, then save it.
Follow the same steps to add other types of variables.
Take one of the blocks as an example. Select the layer [block2_1] and Add Event - Press.
Since there are 5 elimination slots, we need to set 5 conditions for each block to decide which slot it should appear in.
3.1 Add Condition 1: blockchose1 = 0 and eliminate = false (This means: when the block is clickable and slot 1 is empty).
Add response events:
Assign the value, set blockchose1 = 2 (This means: block 2 is placed in slot 1).
Hide the original block 2; show block 2 in slot 1.
Play the click sound effect from the beginning.
3.2 Add Condition 2: blockchose1 ≠ 0 and blockchose2 = 0 and eliminate = false (This means: when the block is clickable, slot 1 already has a block, and slot 2 is empty).
Similarly, add response events:
Assign the value, set blockchose2 = 2 (This means: block 2 is placed in slot 2).
Hide the original block 2; show block 2 in slot 2.
Play the click sound effect from the beginning.
3.3 Similarly, complete the setup for Condition 3, Condition 4, and Condition 5 with their respective response events.
Condition 3: When the block is clickable, slot 1 & 2 have blocks, and slot 3 is empty.
Condition 4: When the block is clickable, slot 1, 2, & 3 have blocks, and slot 4 is empty.
Condition 5: When the block is clickable, slot 1, 2, 3, & 4 have blocks, and slot 5 is empty.
In this case, the event setup for each block follows the same logic. After completing the event setup for one block:
Click the "Copy" button to copy the entire "Press" event.
Hold down the Ctrl key and select all other block layers.
Click the "Paste" button above, and select "Paste layer events only". This will apply the same set of logic, events, and conditions to all blocks.
Then, fine-tune the response events for each block, adjusting the corresponding objects as needed (for detailed content, please refer within the project).
Once all the "Press" events for the blocks are completed, we can proceed with the Conditions in the scene to implement the subsequent effects.
Select Scene 2 - Add Event - Condition
5.1 Condition 1-5: Prevent clicking on blocks during elimination, while clearing the elimination slots.
Edit Condition 1: blockchose1 = 0 and eliminate = true (This means: when the block is not clickable and slot 1 is empty, i.e., during elimination).
Add response events: Hide the possible two blocks in slot 1.
For Conditions 2/3/4/5, do the same:
Condition 2: When the block is not clickable, and slot 2 is empty.
Condition 3: When the block is not clickable, and slot 3 is empty.
Condition 4: When the block is not clickable, and slot 4 is empty.
Condition 5: When the block is not clickable, and slot 5 is empty.
5.2 Condition 6-15: Elimination results and corresponding feedback.
Edit Condition 6: blockchose1 ≠ 0 and blockchose1 = blockchose2 and blockchose1 = blockchose3 (This means: slot 1 has block X, and the blocks in slot 2 & 3 are the same as in slot 1).
Add response events:
Assign the value, set elimination_time + 1 (This means: one elimination set is completed).
Assign the value, set blockchose1/blockchose2/blockchose3 = 0, eliminate = true (This means: blocks are not clickable, and the first three slots are cleared).
Display and play the elimination particle effects for the first three slots, and play the elimination sound effect from the beginning.
After a 0.5s delay, assign the value, eliminate = false (This means: the blocks become clickable again). Since both the elimination clear logic and the click-to-place logic are being checked at the same time, a delay of 0.5s is necessary to avoid conflicts between disabling clicks and clearing eliminated elements.
Following the same logic, conditions must be set for all possible elimination scenarios. There are 10 possible combinations, which are: "1-2-3", "1-2-4", "1-2-5", "1-3-4", "1-3-5", "1-4-5", "2-3-4", "2-3-5", "2-4-5", "3-4-5".
After organizing all possibilities, proceed to set Condition 7 to Condition 15 (for detailed content, please refer within the project).
5.3 Condition 16: First valid action.
Edit Condition 16: blockchose1 ≠ 0 (This means: slot 1 has a block, which indicates the player's first valid action).
Add response events:
Set Tracking Event 4, with the tracking name "Player pressed the first block".
Play the FadeOut animation for the guide hand group from the beginning.
5.4 Condition 17-18: Elimination count and corresponding feedback.
Edit Condition 17: elimination_time = 1 (This means: one elimination set is completed).
Add response events: Set Tracking Event 5, with the tracking name "Successfully eliminated one set of blocks".
Edit Condition 18: elimination_time = 4 (This means: four sets of eliminations are completed).
Add response events:
Set Tracking Event 6, with the tracking name "Successfully eliminated all blocks".
After a 0.5s delay, redirect to the next scene (i.e., the end screen).
Add Event - Timing trigger to Scene 3
Add response events:
After a delay of 0.4s, play the girl scream sound effect once.
After a delay of 1.6s, show the fake level group, show the guide hand, and play the guide animation.
Add Event - Press to the full-screen interactive area.
Add response events:
Set Tracking Event 7, with the tracking name "End screen trigger jump".
Play the click sound effect from the beginning.
Redirect to app store.
Since the interactive area is placed within the fake level group, the current interactive area will only appear after the previous Timing trigger events finish playing, and the "press" event can then be triggered.
Enter the Global scene, and Add Event - Press to the persistent redirect button group.
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.
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.
⚠️Please Note: The core event settings in this case are concentrated on "all block images" and "Scene 2." These events need to be implemented using the feature. Since there are many layers, the setup can be relatively tedious. It’s recommended to set up the events for one layer first, then quickly complete the setup by copying & pasting the events.
To achieve these effects, we need to use Here is an overview of Global Variables used in this case, starting with one block as an example.
