Advanced Tutorial-Pull Rings Gameplay
#Content editor #Blank Canvas #Global Variables #advanced difficulty
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 |
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
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
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.
Last updated
