# \Blank Canvas Tutorial Please note: This case uses the pull rings gameplay as an example to explain the method of creating global variables for **"multiple operations in sequence triggering various outcomes"**. However, this method is also applicable to other gameplay types with similar operational logic! ## 1.Basic Info * \[Difficulty]:⭐⭐⭐⭐ * \[Applicable Products]:Universal * \[Interaction]: Click * \[Threads]: Multi-threaded * \[Core Assets]: Sequence * \[Features]:Global Variables; Response event-Disable events ## 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：** 1）Upon entering the trial play, display the \[pull rings standby screen] and \[reward amount text]. 2） When player presses any ring, play the corresponding feedback. * We label the rings as a, b, c. There are 6 possible sequences of player actions, with corresponding feedbacks as follows: * a - b - c (Fire-Water-Coin, Correct Operation) * a - c - b (Fire-Coin-Water+Coin, Incorrect Operation) * b - a - c (Cannot Pull) * b - c - a (Cannot Pull) * c - a - b (Coin-Fire-Water+Coin, Incorrect Operation) * c - b - a (Coin-Cannot Pull) 3）Once all three rings are pulled, redirect to the corresponding ending page based on the final \[Reward Amount]: * If the amount is 100: Transition to the successful ending page. * If the amount remains 0: Transition to the failed ending page.

## 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 in Part Three, we can divide this case into 3 scenes for production. * Scene 1: Core Gameplay - pull rings (Focus on Explanation) * Scene 2: Successful Ending Page * Scene 3: Failed Ending Page

Scene Name	Scene 1 - pull rings gameplay	Scene 2 - successful ending page	Scene 3 - failed ending page
Visual Rendering
Scene Description	The player pulls the ring, triggering corresponding feedback. There are multiple operational sequences, triggering a variety of outcomes.	successful ending page	failed ending page
Core Assets	Still Images: Background image, Rings, Stones Sequence Frames: *Fire: Falling 1 Set *Water: Falling 1 Set *Coins: Falling 3 Sets (① From Top to Bottom, ② From Top to Middle, ③ From Middle to Bottom) *Amount: Number Scrolling 1 Set	-	-
Core Animation	Pull rings: Displacement Easing + Alpha Easing Stones: FadeIn	-	-
Core Event	Global Variables: Boolean Type Trigger Object: Layer - ring_a/ring_b/ring_c Trigger Event: Press & Condition Response Event: Assign the value/Disable events/Play animation & sequence frame	-	-

## 5. **Production Guidelines** \*Focus on Explaining Step3 \[Logic Setting] ### **Step 1 - Scene Setup** #### **ⅰ. Global Settings** 1）Add background music and background image in the "Global Settings" section 2）Under \[Global Scene], add permanent download button, logo, and other product information #### **ⅱ. Scenes 1-3** 1\) Add corresponding assets in Scenes 1, 2, and 3 respectively 2\) Adjust the position and size of each asset appropriately 3\) Group, order, and name the assets according to asset types 4\) Adjust the horizontal screen layout and screen adaptation method

### Step 2 - Animation Production #### **ⅰ. Ring\_a/b/c** Sequentially add animations to ring\_a/b/c：General - Displacement Easing/ Alpha Easing, to simulate the path after the rings are pulled. Parameter settings are as follows:

#### **ⅱ. Stones** Add an animation to the stones：Approach - Fade In. Parameter settings are as follows:

#### **ⅲ. Sequence Frames** Adjust the parameters of all sequence frames for water/fire/coins/amount to \[turn off autoplay upon] and \[close loop], and hide the sequence frame layers of coins ② and ③.

### **Step3 - Logic Settings** The function introduction of Global Variables can be viewed through [Global Variables](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/global-variables.md) #### **ⅰ. Adding Global Variables** We add three global variables to represent ring\_a/ring\_b/ring\_c 1\) Click \[Global Variables] - \[Add Variable] 2\) Enter the variable name (e.g., key\_a\_switch) - Choose the variable type as \[Boolean] - Set the initial value to \[false] - Save 3\) Following the above steps, add global variables for ring\_b/ring\_c in turn

#### **ⅱ. Setting Trigger and Response Events** In the previous step, we set the initial value of the variables for ring\_a/b/c to \[false]. In subsequent event settings, we will continuously use the response event \[Assign the value] to adjust the three variables between \[false or true] based on different operations. *For example, adding the event \[Press] and \[Assign the value=true] to ring\_a means: \[true] = ring\_a is pressed; \[false] = ring\_a is not pressed. Thus, whether a ring has been pulled can be determined by \[true/false].*

**Part1: ring\_a** Considering the placement of the three rings, we can see that, regardless of the order of operations, the result of pulling ring\_a is always the same (i.e., the sequence frame of fire falling down) and is not affected by ring\_b and ring\_c, making the event setting for ring\_a relatively simple. 1\) Select the ring\_a layer - Add event - Press 2\) Add response event - Assign the value, assign \[true] to \[Press ring\_a] 3\) Continue adding response event - Disable events, choose to disable \[Press event of ring\_a], which is the current trigger event *Note: The setting of \[Disable events] can be commonly understood as allowing ring\_a to be pulled only once. That is, after being pulled once, this event will be disabled to prevent the player from being able to pull ring\_a an unlimited number of times.* 4\) Continue adding response event - Play all animations of ring\_a from the beginning (Displacement Easing + Alpha Easing) - Play sequence frame of fire falling down - Hide operation guide

**Part2: ring\_b** Ring\_b is influenced by the order of operations, requiring event settings for different scenarios. Therefore, it is necessary to add\[Condition] to determine the current order of operations. First, select the ring\_b layer - Add event - Press **Condition 1**

[a-b-c] is the correct order of operation

1\) Add Condition \[ring\_a=true], \[ring\_c=false] *Note: This means when ring\_a has been pressed, and ring\_c has not been pressed, i.e., the operation order is \[a-b-c], what feedback will be triggered when ring\_b is pressed.* 2\) Similarly, add response event - Assign the value, assign \[true] to \[press ring\_b]; add Disable events, choose to disable \[press event of ring\_b] 3\) Continue adding response event - Play all animations of ring\_b from the beginning - Play sequence frame of water falling down - Hide operation guide 4\) Add response event - Execution delay, set to play the Fadeln animation of the stones from the beginning after 0.6s *Note: 0.6s is the duration of the sequence frame of water falling down*

**Condition 2**

[a-c-b] and [c-a-b] are both incorrect order of operations

1\) Add Condition \[ring\_a=true], \[ring\_c=true] *Note: This means when both ring\_a and ring\_c have been pressed, i.e., the operation order is \[a-c-b] or \[c-a-b], what feedback will be triggered when ring\_b is pressed* 2\) Similarly, add response event - Assign the value, assign \[true] to \[press ring\_b]; add Disable events, choose to disable \[press event of ring\_b] 3\) Continue adding response event - Play all animations of ring\_b from the beginning - Play sequence frame of water falling down - Display and play the sequence frame of coin ③ - Hide the sequence frame of coin ② - Hide operation guide 4\) Add response event - Execution delay, set to play the fade-in animation of the stones from the beginning after 0.6s - Hide the sequence frame of coin ③ 5\) Add response event - Execution delay, set to Redirect to the specified scene 3, i.e., Failed Ending Page, after 1s

**Condition 3**\ 1\) Add Condition \[ring\_a=false] *Note: This means what feedback will be triggered when ring\_b is pressed if ring\_a has not been pressed (unaffected by ring\_c)* 2\) Add response event - Play error sound from the beginning - Play Screen jitter feedback

**Part3: ring\_c** Ring\_c is influenced by the order of operations, requiring event settings for different scenarios. Therefore, it is necessary to add \[Condition] to determine the current order of operations. First, select the ring\_c layer - Add event - press **Condition 1**

1）Add the Condition \[ring\_b=true]. *Note: Since ring\_b can only be pulled after ring\_a has been pulled, we only need to add a Condition \[ring\_b=true], which represents that both ring\_a and b have been pressed. This means, when the operation order is \[a-b-c], what feedback will be triggered when ring\_c is pressed.* 2）Similarly, add a response event - Assign the value, assign \[true] to \[press ring\_c]; add a Disable events, choose to disable \[press event of ring\_c]. 3）Continue adding response events - Play all animations of ring\_c from the beginning - Play sequence frame of coin ① - Hide operation guide. 4）Add a response event - Execution delay, set to display and play the sequence frame of the reward amount after 0.6s. 5）Add a response event - Execution delay, set to Redirect to the specified scene 2, i.e., Successful Ending Page, after 1s.

**Condition 2**

1）Add the Condition \[ring\_b=false]. *Note: This means when ring\_b has not been pressed, and the operation order is either \[a-c-b] or \[c-a-b], what feedback will be triggered when ring\_c is pressed (regardless of the status of ring\_a).* 2）Similarly, add a response event - Assign the value, assign \[true] to \[press ring\_c]; add a Disable events, choose to disable \[press event of ring\_c]. 3）Continue adding response events - Play all animations of ring\_c from the beginning - Play sequence frame of coin ② - Hide the sequence frame of coin ① - Hide operation guide.

### **Step 4 - Overall Preview** 1）After completing the entire production, it is recommended to playtest each of the six possible order of operations for the rings to check for any issues. 2）It is also possible to perform an overall preview for different device models, languages, and orientations (portrait and landscape).

## 6. Demo Screen Recording Note: This video is a **demonstration recording** of the tutorial mentioned above. It includes only visual content and does not have audio narration. The video provides a detailed record of the step-by-step process of Blank Canvas in this case. The demonstration speed has not been adjusted significantly, making it convenient for you to view and learn. If you are already familiar with a particular step, you can skip it as needed. Furthermore, below the demonstration recording, we have **provided a complete set of assets** used in this case. Click on the compressed file to download it. You can use these assets to follow the tutorial and try creating your own content, enabling you to get familiar with using the Content editor more quickly. {% embed url="" %} {% file src="/files/NPjGklQmPxxBBBZsonKl" %} --- # 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-pull-rings-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.