<Pull Rings>Blank Canvas Tutorial

#Content Editor #Blank Canvas #Advanced difficulty #Global Variables

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

ⅰ. 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

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

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

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

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.

5MB

Pull Rings Gameplay_Assets.zip

archive