<Sticker Puzzle>Blank Canvas Tutorial
#Content Editor #Blank Canvas #Advanced difficulty #Global Variables
Please Note：This tutorial mainly explains how to create a 2D playable with a drag puzzle / drag‑and‑merge mechanic using Blank Canvas. For the best experience, we recommend checking it together with the DEMO (you can contact your AM to share it to your account).
📒Basic Info
[Difficulty]: ⭐⭐⭐
[Applicable Products]: Especially suitable for products with puzzle/merge mechanics
[Interaction]: Drag to target position、Not dragged to target position
[Freedom]: Fully free
[Core Assets]: Image
[Features]: Drag to target position - Show/Hide layer；Global Variables
📒Effect Preview
📒Gameplay Overview
Before starting the production, we need to outline the gameplay logic for this case：
When entering the playable, display the puzzle layout and operation guide, leading players to drag puzzle pieces to complete the puzzle.
Players can freely drag puzzle pieces A/B/C:
If a piece is placed in the correct position, play a success feedback, such as starlight particles or a sound effect;
If placed in the wrong position, play a failure feedback, such as an error sound or a screen jitter effect.
Every time a puzzle set is completed, the progress bar advances by one step. After three puzzle sets are completed, the flow redirects to the end page.
On the end page, the player can tap anywhere on the full screen to redirect to the store.
📒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 content of the "Gameplay Overview," we can split this case into 2 scenes for production: the core gameplay scene and the end page scene.
Visual Rendering
Scene Description
Player interaction: Drag puzzle pieces A/B/C into the correct positions to complete the puzzle.
End page: Settlement image + redirect button
Core Assets
Static Images: gray background, puzzle pieces & final result image, background image, progress bar, guiding finger
Particle effects: puzzle starlight particles
Sound effects: correct feedback sound, error feedback sound
Static Images: settlement image, redirect button
Particle effects: confetti particles
Sound effects: victory sound
Core Animations
Finger drag guidance: Displacement Easing+Alpha Easing+Scale Easing
Progress bar: Scale Easing
Redirect button: PulseFront
Core Events
Trigger Object: puzzle piece
Trigger Event: Drag to target position
Response Event: hide the puzzle piece, show the final effect image, Assign the value(Global Variables)
Trigger Object: Scene 1
Trigger Event: Condition
Response Event: play progress bar animation, show guide, redirect to the next scene
Trigger Object: Scene 2
Trigger Event: Press
Response Event: Redirect to app store
📒Production Guidelines
*The core contents are Step 1 [Scene Setup] & Step4 [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 Settings
In "Global Settings", add BGM and Background Image; set the language.
2. Scene 1
1）Add assets related to the core gameplay to Scene 1.
2）Adjust the position and size of each asset accordingly. And group, arrange, and name the assets based on their types.
⚠️Note: For this type of gameplay (referring to mechanics where an object’s position changes after player interaction), the production logic is as follows: “Place the object at every possible position where it might appear, then hide the objects that are not shown in the initial state. Through events, show the object at the new position after placement while hiding the original object at its previous position,” in order to achieve the desired effect.
Therefore: In addition to adding the fragment images on each selectable option, you also need to add those fragment images at the target positions where they will appear after being placed, then hide them. And because there are three sets of finger guidance in different positions, you also need to add three finger images and hide them initially.
3）Adjust the initial state of layers: Hide all layers that should not be visible at the start (e.g., Guidance Group 2 & Guidance Group 3 & Star Particle 1/2/3 & Placed Object 1/2/3).
Later on, we will use events to control when these layers appear or when other layers are hidden.
3. Scene 2
1）Add assets related to the end page to Scene 2.
2）Similarly, adjust the position and size of each asset accordingly. And group, arrange, and name the assets based on their types.
3）Tick Scene 2 as the [Ending Scene] so that the system can report the end of the playable session.
Step 2 - 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）Switch to landscape mode and select all the top-level layers.
2）Use the "Reuse vertical screen position configuration" function to automatically adjust the layout.
3）Then fine-tune the position and scale of each layer.
4）The same applies to scene 2.
2. Adjust the screen adaptation
All layers in this case are set to center adapt by default, so there is no need to make special adjustments for screen adaptation.
Step 3 - Animation Setting
In this case, the following motion effects are used:
Animations: Drag Guide, Progress Bar Forward, Error Feedback, Redirect Button
Particle Effects: Puzzle Feedback (Star Particles), Victory Feedback on End Page (Confetti Particles)
1. Drag Guide
Select the guide group [guide1], then add animations in this order: Universal – Displacement Easing and Universal – Alpha Easing, to create the guiding animation for the finger and the object. Parameter settings are as follows.
Optional: Select the finger image [guide_finger], then add Universal – Scale Easing, with the following parameter settings.
Select the guide object image [guide_prop1], then add Universal – Alpha Easing, with the following parameter settings.
The guide groups [guide2] and [guide3] follow the same logic. Copy the animations from [guide1] and slightly adjust the displacement distance.
2. Progress Bar Forward
Select the progress bar image [progress_bar], and adjust its anchor point to (0,50).
Add Universal – Scale Easing with the following parameter settings. (Since the progress bar animation is played in three segments, setting the total animation duration to 0.9s helps better control the playback.)
3. Error Feedback
Select the red cross image [error_feedback], then add Approach – BounceIn with the following parameter settings.
Continue by adding Exit – FadeOut to make the error feedback automatically hide after playing once. Parameter settings are as follows.
4. Redirect Button
In Scene 2, select the jump button group [group_cta], and add Emphasize – PulseFront with the following parameter settings.
5. Particle Effects
In the 「Asset Library」, choose suitable particle effects as feedback for puzzle completion.
Since there are three different puzzle areas in this case, duplicate the particle layer twice.
Adjust each particle effect’s position to its corresponding area, then set them to “hidden” state. Later, we will control their display and playback through events.
For the victory feedback particle effect in Scene 2, since it plays automatically upon entering, you can add it directly without hiding it.
Step 4 - Event Setting
Core Events in this case are mainly focused on the “three puzzle pieces” and “Scene 1.” Let’s go through them step by step according to the operation sequence.
[Global Variables] To achieve the following:
a. Count successful actions: Every time the player completes a puzzle group, the progress bar moves forward; after completing all three puzzle groups, the end page is triggered.
b. Sequential guide: By default, play the animation of guide group 1. When the player completes puzzle piece 1, play the animation of guide group 2, and so on.
To implement the above effects, you need to use "Global Variables." Below is a summary of the variables used in this case. (If you don’t need these effects in your production, you can simply delete the related variables.)
1. Add Global Variables
Click the Global Variables icon at the top to add a variable named placed.
Set the variable type and initial value.
Using the same method, continue adding two variables: item1_guide and item2_guide.
2. Add trigger events and response events for the three puzzle pieces
Taking the first piece [drag_prop1] as an example, select this layer:
1）Add Event – Drag to target position
Edit the drag area and set the drag direction to “any direction”.
Add response event: Assign the value placed +1 (means: one puzzle group completed)
Add response event: Assign the value item1_guide = false (means: piece 1 placed, Guide Group 1 can be hidden)
Add response event: Hide piece 1, show the successfully placed piece 1, show and play the particle effect at piece 1’s position, and play the correct sound effect once.
Check [Valid only once].
2）Add Event – Not dragged to target position
Edit the drag area and set the drag direction to “any direction”.
Enable “Release Reset”.
Add response event: Screen jitter.
Add response event: Play error feedback animation and play the error sound effect once.
3）Add Event – Press
Add response event: Hide the entire guide group.
4）Add Event – Lift up
Add response event: Execution delay 1s, then show the entire guide group and play all animations.
5）Quickly copy events to the other two puzzle pieces
After setting up all events for piece [drag_prop1], click to copy layer.
Hold Ctrl and select [drag_prop2] and [drag_prop3].
Click the Paste button and choose Paste Layer Events Only.
This way, the other two puzzle pieces also have the corresponding drag, press, and lift-up events.
Then simply adjust the response targets for the Drag to target position events of the two other pieces (all other events can remain unchanged).
Above, we have completed the event settings for the three puzzle pieces. Next, we add events to scene 1.
3. Add Conditions and response events to Scene 1
Select Scene 1 - Add Event - Condition.
1）Condition 1-3: Counting successful operations
Edit Condition 1: placed = 1 (means: player has completed one puzzle group)
Check Valid only once.
Add response event: Play progress bar animation, then Execution delay 0.3s and pause the progress bar animation. (Since the progress bar animation lasts 0.9s in total, playing it for 0.3s each time achieves a one‑third progress per completion.)
Similarly, set Condition 2: placed = 2 (means: player has completed two puzzle groups)
Add response event: Continue playing the progress bar animation, then Execution delay 0.3s and pause.
Condition 3: placed = 3 (means: player has completed three puzzle groups)
Add response event: Continue playing the progress bar animation (now fully completed).
Add response event: Hide the entire guide group, then Execution delay 1s and redirect to the next scene.
2）Condition 4–5: Sequential guide
Edit Condition 4: item1_guide = false AND item2_guide = true (means: piece 1 placed, show Guide Group 2)
Check Valid only once.
Add response event: Hide Guide Group 1, show Guide Group 2.
Edit Condition 5: item1_guide = false AND item2_guide = false (means: piece 1 and piece 2 placed, show Guide Group 3)
Check Valid only once.
Add response event: Hide Guide Group 1 and Guide Group 2, show Guide Group 3.
4.Scene: Scene 2
Finally, remember to set a “redirect to app store” event for Scene 2 or the redirect button. Do not check Valid only once.
These are all the events used in this case. With the completion of all event settings, our playable is completed.
Step 5 - 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.
📒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 playables as soon as possible.
Last updated