# \Blank Canvas Tutorial 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

Best experience for playable on mobile devices	Vertical screen	Horizontal screen

Scan to play	Click to play	Click to play

## 📒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.

Scene Name	Scene 1 - Core Gameplay	Scene 2 - End Page
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." ](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/global-variables.md) 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. {% file src="/files/cpPAwrUWaKqWSOE64UNE" %} --- # 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/other-puzzle-gameplay-cases/less-than-sticker-puzzle-greater-than-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.