<Screw Puzzle>Blank Canvas Tutorial

Please Note: This tutorial focuses on creating playables with the "Screw Removal" gameplay using Blank Canvas. The template "Screw Puzzle" was originally designed based on this guide and created independently by designers without any coding, making it equivalent to a Blank Canvas project. Therefore, you can directly use the template to create a Content Creation project as a reference for Blank Canvas, and combine it with this guide for even better learning results!

💡 Although the original project features 4 screws and 6 slots, you can use this creation logic to add or remove screws and slots to design playables of varying difficulties and styles!

📒Basic Info

• [Difficulty]: ⭐⭐⭐⭐⭐

• [Applicable Products]: Universal, especially for screw removal gameplay

• [Interaction]: Press

• [Freedom]: Fully free

• [Core Assets]: Images

• [Features]: Press-Show/Hide layer；Global Variables

📒Effect Preview

📒Gameplay Overview

Before starting the production, we need to outline the gameplay logic for this case：

1. Enter the playable, showing the "initial screw layout" and "click guidance animation".

2. Players can click to remove any screw from holes 2/4/5/6. After clicking, a "placement guidance animation" will appear.

3. Players can then place the screw into either hole 1 or 3. Upon placement, the corresponding animation feedback will play.

4. Once all four screws are removed and placed into empty holes (resulting in the two wooden planks being detached), the "victory feedback" will play, followed by the end page.

5. Additional details: If a screw is placed into a hole that is not empty, there will be no feedback. Screws that are already placed cannot be removed again.

6. Fake level end page: Players can tap anywhere on the screen to "redirect to app 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 gameplay logic from the previous section, this case can be divided into 2 scenes for production: Core Gameplay + End Page.

📒Production Guidelines

*The core contents are Step1 [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

• Add BGM and background image in the "Global Settings."

• Add permanent info in the "Global Scene", such as product logo, download button, etc.

2.Scene 1

• Add the relevant assets to Scene 1.

• Adjust all assets to appropriate positions and sizes. Name, group, and organize assets based on their types (details can be reviewed within the project).

⚠️For gameplay involving changes in item appearance or position after interaction, the production logic is as follows: "Place all potential items at every possible position, hide the items that won’t appear in the initial state, and use event settings to control the visibility of specific items to achieve the desired effect."

Since four screws can be removed, screws and screw caps need to be added at holes 2, 4, 5, and 6. Additionally, due to the uncertain order of player actions, screws may be placed in any of the six holes. Therefore, each of the six holes should include an additional screw cap, which is initially set to a hidden state (only the four screw caps on the wooden planks should be visible at the start).

• Adjust other layer initial state: Set any layers that don't need to be displayed in the initial screen to "hidden" status, and then control the visibility of these layers through events later (details can be reviewed within the project).

3.Scene 2

• Add the relevant assets to Scene 2.

• Adjust all assets to appropriate positions and sizes. Name, group, and organize assets based on their types (details can be reviewed within the project)

• Mark Scene 2 as the "Ending Scene" to report the end of the playable ads.

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.

• Switch to landscape mode and select all the top-level layers.

• Use the "Reuse vertical screen position configuration" function to automatically adjust the layout.

• Then fine-tune the position and scale of each layer.

• 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

The core animation of this case focuses on the rotation and falling effects of the vertical and horizontal wooden planks. Before starting formal production, it's recommended to outline all potential animations for these two wooden planks.

We will now introduce these in detail one by one.

(Tip: To create the effect of an object rotating around a specific pivot point, you need to place the object in a group and adjust the group's position and size to the pivot point, which in this case is the screw's position.)

1-1. Vertical Wooden Plank Drops Straight Down

Select the vertical wooden plank group "WoodV," and add an animation: Universal - Displacement Easing. Configure the parameters as follows:

1-2. Vertical Wooden Plank Rotates Slightly to the Right

Select the vertical wooden plank group "lock1_1," and add an animation: Universal - Spin Easing. Configure the parameters as follows:

1-3. Vertical Wooden Plank Rotates and Then Drops

Continue adding animations to the vertical wooden plank group "lock1_1": Universal - Displacement Easing & Spin Easing. Configure the parameters as follows:

1-4. Vertical Wooden Plank Rotates to the Left

Select the vertical wooden plank group "lock1_2," and add an animation: Universal - Spin Easing. Configure the parameters as follows:

2-1. Horizontal Wooden Plank Rotates to the Left/Right

• Select the horizontal wooden plank group "lock2_1," and add an animation: Universal - Spin Easing. Configure the parameters as follows:

• Copy this animation to "lock2_2" and fine-tune the ending state parameters as needed.

2-2. Horizontal Wooden Plank Rotates and Falls to the Right

• Continue adding an animation to "lock2_1": Universal - Displacement Easing. Configure the parameters as follows:

• Then select the horizontal wooden plank group "WoodH," and add an animation: Universal - Spin Easing. Configure the parameters as follows:

2-3. Horizontal Wooden Plank Rotates and Falls to the Left

Copy the above two animations to the corresponding group and fine-tune the ending state and offset-x parameters as needed.

2-4. Horizontal Wooden Plank Drops Straight Down

Select the horizontal wooden plank group "WoodH" and add an animation: Universal - Displacement Easing. Configure the parameters as follows:

Step 4 - Event Setting

After setting up all elements, we need to link the entire flow by configuring events.

The core events in this case focus on the six holes (including four screws) and Scene 1:

• Layer Events: Used to link the feedback after pressing each screw and determine whether the wooden plank holes are unlocked.

• Scene Events: Used to link the animation feedback of the horizontal and vertical wooden planks.

Next, we will explain them in sequence.

🌟 To achieve the following:

a. Determine the status of the wooden plank holes: Whether there are screws and if the screws have been removed.

b. Determine whether the wooden plank holes are unlocked: Whether the screws in holes 2, 4, 5, and 6 have been removed.

c. Determine the status of the wooden planks: Trigger corresponding animation feedback.

To achieve the above effects, we need to use the Global Variables feature. The following image outlines the usage of global variables in this case, which will help in understanding the process.

1.Adding Global Variables

1.1 We first need to add six Global Variables to represent the status of the six wooden plank holes and screws:

• Click "Global Variables" → "Add variables."

• Enter the variable name (e.g., screw1), select the variable type as "Value," set the initial value of screw1 to 0, and save.

• Follow these steps to add variables for screw2, screw3, screw4, screw5, and screw6.

Since the initial states of the six wooden plank holes differ (holes 1 and 3 are initially empty, while the others have screws inserted), their initial values also differ: screw1 and screw3: Initial value = 0. screw2, screw4, screw5, and screw6: Initial value = 1.

1.2 Next, add four Global Variables to represent whether the four screw holes are unlocked.

• Click "Global Variables" → "Add variables."

• Enter the variable name (e.g., lock2), select the variable type as "Boolean," set the initial value of lock2 to false, and save.

• Follow these steps to add variables for lock4, lock5, and lock6.

As this case requires unlocking four screw holes, four variables are created. false: The screw hole is locked. true: The screw hole is unlocked (empty). All four variables’ initial values are set to false.

1.3 Finally, add four Global Variables to represent the status of the horizontal and vertical wooden planks.

• Click "Add variables" and create two variables of the type "Boolean" to represent whether the horizontal and vertical wooden planks have dropped.

• Set the initial values of "wooddrop_V" and "wooddrop_H" to true and save.

• Add two variables of the type "Text" to indicate the drop direction of the horizontal and vertical wooden planks.

• Set the initial values of "V_path" and "H_path" to "D" (Down) and save.

In these variables: true indicates that the plank is still visible on the screen. false indicates that the plank has completely fallen. D (Down) represents that the plank’s default drop direction is vertically downward.

2.Add Events and Conditions to Hole 1 & Hole 3

Take Hole 1 as an example:

1）Select the group layer "screw1" and Add Event - Press.

2）Add Condition 1: "screw1=0" AND "screw2=2" (This corresponds to: When screw2 is removed and placed into Hole 1, it triggers specific outcomes.)

3）Add the following response events:

• Assign the value: Set screw1=1 and screw2=0 (This means that when screw2 is placed into Hole 1, Hole 1’s status changes to “screw has been pressed,” and Hole 2’s status changes to “empty.”)

• Assign the value: Set lock2=true (The initial value of lock2 is false. In this operation, Hole 2 is unlocked, so we assign lock2=true to indicate it is now unlocked.)

• Display screw cap 1 and hide screw 2.

• Hide the operation guide and simultaneously play related particle and sound effects.

4）Conditions 2/3/4 are similar to Condition 1. Simply copy and paste the above event setup, then fine-tune the Conditions and response objects related to screw2/lock2.

5）Once all four Conditions are set up, the events for "screw1" are complete.

Since Hole 1 and Hole 3 have the same initial status, you can directly copy all events from "screw1" to "screw3" and adjust the related Conditions and response events for "screw3."

3.Add Events and Conditions to Hole 2, Hole 4, Hole 5, and Hole 6

Since the initial states of Hole 2, Hole 4, Hole 5, and Hole 6 are the same, you only need to set up the events for one layer (e.g., Hole 2) first. Then, copy and paste the setup to other layers and fine-tune the parameters.

Take Hole 2 as an example:

1）Select the group layer "screw2" and Add Event Press.

2）Add Condition 1: "screw2=1" AND "screw4≠2" AND "screw5≠2" AND "screw6≠2" (This corresponds to: When screw2 is in a pressed state, and the other screws are not in a pulled state, pressing screw2 triggers specific outcomes.)

3）Add the following response events:

• Assign the value: Set screw2=2

• Display screw 2 and hide screw cap 2.

• Hide operation guide 1, display operation guide 2, and play click sound feedback.

4）Add Condition 2: "screw2=2" (This corresponds to: When screw2 is in a pulled state, pressing screw2 triggers specific outcomes.)

5）Add the following response events:

• Assign the value: Set screw2=1

• Display screw cap 2 and hide screw 2.

🌟 From the above two Conditions, it is clear that these two cases represent feedback for Screw 2 being pulled out and Screw 2 being pressed back into its original position. This is the main distinction between Holes 2/4/5/6 and Holes 1/3. The subsequent Conditions (3-8) are similar to those for Holes 1/3.

6）Conditions 3 to 5

Take Condition 3 as an example. Condition: "screw2=0" AND "screw4=2" (This corresponds to: When Screw 4 is pulled out and placed into the empty Hole 2, the following results are triggered.)

Add response events:

• Assign the value: Set screw2=1, screw4=0.

• Display Screw Cap 2 and hide Screw 4.

• Assign the value: Set lock4=true.

• Play related particle effects and sound feedback.

• Disable events: Disable the press event for Layer 2 (once a screw is moved, it can only be pressed once and cannot be pulled out again. All subsequent "Disable events" follow this logic).

7）Conditions 6 to 8

Take Condition 6 as an example. Condition: "screw2=1" AND "screw4=2" (This corresponds to: When Screw 4 is pulled out and placed into a non-empty Hole 2, the following results are triggered.)

Add response events:

• Assign the value: Set screw2=2, screw4=1.

• Display Screw 2 and hide Screw Cap 2.

• Display Screw Cap 4 and hide Screw 4.

🌟With this, all "Press" events for the holes are completed. If you want to create playables for different levels later, you can follow the same logic:

• Holes 1/3: Initial state: "The hole is empty." Required Conditions: 4, corresponding to each screw (2/4/5/6) being placed into the hole (if the level includes 6 screws, 6 Conditions need to be set).

• Holes 2/4/5/6: Initial state: "The screw is pressed." Required Conditions: 8, where: 2 are for the screw being pulled out/pressed back into its original position. 3 are for the screw being placed into other empty holes. 3 are for the screw being placed into other non-empty holes. (If the level includes 6 screws, a total of 2 + 5 + 5 = 12 Conditions need to be set.)

Next, we will use Scene Conditions to implement subsequent animation effects.

4.Add Conditions and Response Events to "Scene 1"

Select Scene 1 - Add Event - Condition

4.1 Conditions 1-4 & 13 (Vertical Wooden Plank Related)

1）Edit Condition 1: "lock2=true" AND "lock4=false" AND "lock6=false" AND "wooddrop_V=true" (Corresponds to: When Hole 2 is unlocked, Holes 4 and 6 are locked, and the vertical wooden plank is still in the scene, the following results are triggered.)

Add Response Events:

• Play the Spin Easing animation of the vertical wooden plank rotating to the left; execute a delay of 0.2 seconds, then pause the animation. (These two response events create the effect of the vertical wooden plank rotating counterclockwise and being blocked by Screw 4.)

• Assign the value: Set V_path=R (Right) (indicating the vertical wooden plank's direction is now set to "Right").

• Play a wooden plank collision sound once.

2）Edit Condition 2: "lock2=true" AND "lock4=false" AND "lock6=true" AND "wooddrop_V=true" AND "V_path=R" (Corresponds to: When Hole 2 is unlocked, Hole 4 is locked, the vertical wooden plank's direction is "Right," the plank is still in the scene, and Hole 6 is unlocked, the following results are triggered.)

Add Response Events:

• Play the Displacement Easing animation of the vertical wooden plank falling downward and to the right, along with a Spin Easing animation.

• Assign the value: Set wooddrop_V=false (indicating the vertical wooden plank has completely fallen and is no longer in the scene).

• Play a wooden plank falling sound once.

3）Edit Condition 3: "lock2=true" AND "lock6=true" AND "wooddrop_V=true" (Corresponds to: When Hole 6 is unlocked, the vertical wooden plank is still in the scene, and Hole 2 is unlocked, the following results are triggered.)

Add Response Events:

• Play the Displacement Easing animation of the vertical wooden plank falling straight downward.

• Assign the value: Set wooddrop_V=false.

• Play a wooden plank falling sound once.

4）Edit Condition 4: "lock2=true" AND "lock4=true" AND "lock6=false" AND "wooddrop_V=true" (Corresponds to: When Hole 4 is unlocked, Hole 6 is locked, the vertical wooden plank is still in the scene, and Hole 2 is unlocked, the following results are triggered.)

Add Response Events:

• Cancel execution delay: Select and cancel the timer from Condition 1 that pauses the rotation animation after 0.2 seconds.

• Continue playing the remaining left-rotation animation for the vertical wooden plank.

5）Edit Condition 13: Condition: "lock2=false" AND "lock6=true" AND "wooddrop_V=true" (Corresponds to: When Hole 2 is locked, the vertical wooden plank is still in the scene, and Hole 6 is unlocked, the following results are triggered.)

Add Response Events:

• Play a slight Spin Easing animation of the vertical wooden plank rotating to the right.

4.2 Conditions 5-11 (Horizontal Wooden Plank Related)

1）Edit Condition 5: "lock4=true" AND "lock5=false" AND "lock6=false" AND "wooddrop_H=true" (Corresponds to: When Hole 4 is unlocked, Holes 5 and 6 are locked, and the horizontal wooden plank is still in the scene, the following results are triggered.)

Add Response Events:

• Play the Spin Easing animation of the horizontal wooden plank rotating to the bottom-right; execute a delay of 0.2 seconds, then pause the animation. (These two response events create the effect of the horizontal wooden plank rotating counterclockwise and being blocked by Screw 6.)

• Assign the value: Set H_path=L (Left) (indicating the horizontal wooden plank's direction is now set to "Left").

• Play a wooden plank collision sound once.

2）Edit Condition 6: "lock4=true" AND "lock5=false" AND "lock6=true" AND "wooddrop_H=true" (Corresponds to: When Hole 6 is unlocked, Hole 5 is locked, the horizontal wooden plank is still in the scene, and Hole 4 is unlocked, the following results are triggered.)

Add Response Events:

• Cancel execution delay: Select and cancel the timer from Condition 5 that pauses the spin animation after 0.2 seconds.

• Play the Spin Easing animation of the horizontal wooden plank rotating to the bottom-right.

3）Edit Condition 7: "lock4=true" AND "lock5=true" AND "lock6=false" AND "wooddrop_H=true" AND "H_path=L" (Corresponds to: When Hole 4 is unlocked, Hole 6 is locked, the horizontal wooden plank's direction is "Left," the plank is still in the scene, and Hole 5 is unlocked, the following results are triggered.)

Add Response Events:

• Play the Displacement Easing animation of the horizontal wooden plank falling down and to the left.

• Play the Spin Easing animation of the horizontal wooden plank. (These response events create the effect of the horizontal wooden plank moving and falling to the bottom-left, out of the scene.)

• Assign the value: Set wooddrop_H=false (indicating the horizontal wooden plank has completely fallen and is no longer in the scene).

• Play a wooden plank falling sound once.

4）Edit Condition 8: "lock4=true" AND "lock5=true" AND "lock6=true" AND "wooddrop_H=true" (Corresponds to: When Hole 6 is unlocked, the horizontal wooden plank is still in the scene, and Hole 4 or Hole 5 is unlocked, the following results are triggered. Both scenarios use the same displacement animation, where the plank falls vertically downward.)

Add Response Events:

• Play the Displacement Easing animation of the horizontal wooden plank falling straight downward.

• Assign the value: Set wooddrop_H=false.

• Play a wooden plank falling sound once.

5）Edit Condition 9: "lock4=false" AND "lock5=true" AND "lock6=false" AND "wooddrop_H=true" (Corresponding: When hole 4 and hole 6 are locked, the horizontal plank is still on the screen, and unlocking hole 5 will trigger what result)

Add response events:

• Play the Spin Easing animation for the horizontal plank to rotate towards the lower left; pause the animation after a 0.2s delay (These two response events achieve the effect: The horizontal plank rotates clockwise by a certain angle and is then blocked by screw 6).

• Assign the value: assign H_path=R(Right).

• Play the sound effect of the plank hitting once.

6）Edit Condition 10: "lock4=false" AND "lock5=false" AND "lock6=true" AND "wooddrop_H=true"(Corresponding: When hole 6 is unlocked, hole 4 is locked, the horizontal plank is still on the screen, and unlocking hole 5 will trigger what result)

Add response events:

• Cancel Execution Delay: choose to cancel Timer 2 under Condition 9, which cancels the event that pauses the spin animation after 0.2s.

• Continue playing the Spin Easing animation for the horizontal plank to rotate towards the lower left.

7) Edit Condition 11: "lock4=true" AND "lock5=true" AND "lock6=false" AND "wooddrop_H=true" AND "H_path=R" (Corresponding: When hole 5 is unlocked, hole 6 is locked, the horizontal plank is moving to the right, the horizontal plank is still on the screen, and unlocking hole 4 will trigger what result)

Add response events:

• Play the Displacement Easing and Spin Easing animations for the horizontal plank to fall downwards and to the right (These three response events achieve the effect: The horizontal plank moves downward and to the right, falling off the screen).

• Assign the value: assign wooddrop_H=false.

• Play the sound effect of the plank falling once.

With that, all the possible animation scenarios for both the horizontal and vertical planks have been set.

4.3 Condition 12 (Victory Determination)

Edit Condition 12: "lock2=true" AND "lock4=true" AND "lock5=true" AND "lock6=true" (Corresponding: All four screw holes are unlocked)

Add response events:

• Play particle effects and victory sound feedback.

• After a 1-second delay, play the fade-out animation for the operation guide.

• After a 0.2-second delay, redirect to the next scene (end page).

5.Redirect Event for End Scene

• Select Scene 2, and Add Event - Press.

• Add response events: Set Tracking Event; Redirect to app store.

These are all the events used in this case. With the completion of all event settings, our material 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）If multilingual translation is required, it can be added/modified under Global Settings - Default Language.

3）After the entire production is completed, repeatedly switch and preview across different devices/languages/landscape and portrait modes to ensure everything is working correctly.