<Block Elimination>Blank Canvas Tutorial

#Content editor #Blank Canvas #Eliminate gameplay #Advanced difficulty

Please Note：This tutorial mainly explains how to create 2D materials for a "click elimination" gameplay using Blank Canvas. It is recommended to try the DEMO for a better understanding!

1. Basic Info

[Difficulty]: ⭐⭐⭐
[Applicable Products]: Eliminate gameplay products
[Interaction]: Pess
[Freedom]: Fully free
[Core Assets]: Image
[Features]: Pess-Show/Hide layer；Global Variables

2. Effect Preview

Best experience for playable on mobile devices	Vertical screen	Horizontal screen

Scan to play	Click to play	Click to play

Best experience for playable on mobile devices

Vertical screen

Horizontal screen

Scan 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, display the illustration of the initial grid of blocks.

2）Show the operation guide to guide the player to press the watermelon block.

3）The player can press any illuminated block, and once pressed, that block is sequentially displayed in the "Elimination Slot".

4）When three blocks with the same pattern appear in the "Elimination Slot," play a "Successful Elimination Feedback" and advance the progress bar.

5-1) When the player successfully completes three sets of eliminations (progress bar fully loaded), enter the victory end page.

5-2) If the "Elimination Slot" is full and no three blocks with the same pattern appear, enter the failure end 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 content of the "Gameplay Overview," we can split this case into three scenes for production: one core gameplay scene and two end page scenes.

Scene Name	Scene 1 - Core Gameplay	Scene 2 - Victory End Page	Scene 3 - Failure End Page
Visual Rendering
Scene Description	Player can click on any block, and if the elimination criteria are met, the block will be eliminated on the spot. Successfully completing three sets of eliminations results in success, while failure occurs when the slots are full but three sets of eliminations are not achieved.	Victory End page: happy gif + reward text + redirect button	Failure End page: sad gif + failure text + redirect button
Core Assets	Static Images: multiple blocks, elimination slot, progress bar Particle effects: eliminating feedback Sound effects: press sound effect, eliminate sound effect	Static Images: redirect button Sequences: happy gif Particle effects: ribbon feedback Sound effects: win sound effect	Static Images: redirect button Sequences: sad gif Sound effects: fail sound effect
Core Animations	Guiding fingers: Displacement Easing Progress bar: Scale Easing	Victory feedback group: Scale Easing	Failure feedback group: Scale Easing
Core Events	Trigger Object: Single block Trigger Event: Press Response Event: Hide layer / Show layer / Assign the value(Global Variables)	Trigger Object: Redirect button Trigger Event: Press Response Event: Redirect to app store	Trigger Object: Redirect button Trigger Event: Press Response Event: Redirect to app store

Scene Name

Scene 1 - Core Gameplay

Scene 2 - Victory End Page

Scene 3 - Failure End Page

Visual Rendering

Scene Description

Player can click on any block, and if the elimination criteria are met, the block will be eliminated on the spot. Successfully completing three sets of eliminations results in success, while failure occurs when the slots are full but three sets of eliminations are not achieved.

Victory End page: happy gif + reward text + redirect button

Failure End page: sad gif + failure text + redirect button

Core Assets

Static Images: multiple blocks, elimination slot, progress bar

Particle effects: eliminating feedback

Sound effects: press sound effect, eliminate sound effect

Static Images: redirect button

Sequences: happy gif

Particle effects: ribbon feedback

Sound effects: win sound effect

Static Images: redirect button

Sequences: sad gif

Sound effects: fail sound effect

Core Animations

Guiding fingers: Displacement Easing

Progress bar:

Scale Easing

Victory feedback group: Scale Easing

Failure feedback group: Scale Easing

Core Events

Trigger Object: Single block

Trigger Event: Press

Response Event: Hide layer / Show layer / Assign the value(Global Variables)

Trigger Object: Redirect button

Trigger Event: Press

Response Event: Redirect to app store

Trigger Object: Redirect button

Trigger Event: Press

Response Event: Redirect to app store

5. Production Guidelines

*The core content is 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.

I. Global Settings

Add BGM and Background Image in the "Global Settings" section.

II. 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: The production logic for this type of gameplay (where the position of items changes after player interaction) involves "adding identical items in different positions, hiding the possible items that may appear on the elimination slots, and then using events to display the items on the elimination slots while hiding the original items" in order to achieve the desired effect.

Therefore, in addition to the blocks shown in the initial interface, all possible results should be added to each elimination slot. This means adding five block images with different patterns. Similarly, for the six grayed-out images above that cannot be clicked, one regular image with a normal pattern should also be added to each corresponding position. This will serve as the effect of the blocks becoming bright when the restriction is lifted.

3）Adjust the initial state of the layers: Set all block images on the elimination slots (4 * 5 = 20 in total) to a "hidden" state. Set all corresponding bright blocks for the grayed-out blocks (6 in total) to a "hidden" state as well. We will control the hiding and showing of these layers through events later on.

III. Scene 2 & Scene 3

1）Add assets related to the end page to Scene 2 & Scene 3.

2）Similarly, adjust the position and size of each asset accordingly. And group, arrange, and name the assets based on their types.

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

I. 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, and then fine-tune the position and scale of each layer.

3）Scene 2 and Scene 3 are the same.

II. Adjust the screen adaptation.

In this case, we want the product information in portrait mode to always be positioned at the top of the screen, so we need to adjust its screen adaptation.

Select the product information group [group_information] under portrait mode. Click on the upward arrow icon in the "Screen adaptation" section on the right side to complete the setting (other layers are set to default center alignment and do not require adjustment).

Step 3 - Animation Setting

In this case, the animations used are as follows:

Animations: Guiding finger, Progress bar, Victory/Failure feedback group

Particle effects: Elimination feedback (star particles), Victory feedback on the end page (ribbon particles)

I. Animation

1-1）Guiding finger

1）Select the finger image [hand], and Add Animation - Universal - Displacement Easing, as a loop guide animation for finger. and set the parameters as follows:

2）Select the finger group [group_gf], and Add Animation - Exit - FadeOut, to represent the finger exiting the screen after a successful player interaction. Set the parameters as follows:

1-2）Progress bar

1）Select the progress bar image [progress] and set its pivot to (0, 50).

2）Add Animation - Universal - Scale Easing, as the forward animation for the progress bar. Set the parameters as follows:

Note: Since the progress bar needs to play three times to reach the end, you can set the "Duration" of the animation to 0.9s and control the animation's playtime through events (play 0.3s each time) to achieve the desired effect.

3）Then select the star image that moves synchronously with the progress bar [progress_icon]. Add Animation - Universal - Displacement Easing, also setting the duration to 0.9s. Here are the specific parameter settings：

1-3）Victory/Failure feedback group

1）Select the victory feedback group [group_emojiAndText] in scene 2. Add Animation - Universal - Scale Easing, as the entrance animation.

2）Then select the redirect button group [group_btn]. Add Scale Easing animation to create a looping guide animation for the button after its entrance.

3）Copy these two animations and apply them to the failure feedback group [group_emoji] and the redirect button group [group_btn] in scene 3, respectively.

Set the parameters as follows:

II.Particle Effects

2-1) Elimination feedback

1）Select appropriate particle effects from the "Asset Library" and add them.

2）Since there are 4 different elimination areas in this case, duplicate the particle layer 3 more times.

3）Adjust the positions of the 4 particle effects to their respective areas and group them together.

4）Set all three particle effects to the "hidden" state. We will control their visibility and playback through events.

2-2) Victory Feedback on the End Page

Add ribbon particle effects in scene 2 and turn on [Autoplay] to complete the process.

Step 4 - Event Setting

In this case, all events are centralized and set on the "all clickable block images" and "Scene 1". We will explain them in the order of operation.

Part1：Global Variables

Firstly, to achieve:

a. Placement Slot Display: Determine the possible outcomes based on the player's actions and display the corresponding results.

b. Enablement of Bottom Blocks: Check the status of the bottom blocks; they should not be clickable if they are obstructed and should be clickable if there is no obstruction.

c. Interaction Switch: Disable block clicking during elimination and clear the elimination slots.

d. Calculation of Successful Eliminations: Every time the player completes a set of eliminations, the progress bar advances one step. After completing three sets of eliminations, the game enters the end page.

To achieve these effects, we need to use "Global Variables." Here is an overview of Global Variables used in this case. We will provide a detailed explanation using one of the items as an example.

I. Add Global Variables

1）Click on the "Global Variables" icon at the top and add variables.

2）Enter the variable name, such as "blockchose1," and set the variable type and initial value. Save.

3）Using the same method, add other types of variables one by one.

II. Add an event and condition for one of the "clickable blocks"

Taking block 2 layer [block2_4] as an example, select it and add the event "Press".

Since there are a total of four elimination slots, we need to set up four conditions for each block to determine where the block should be placed.

1）Add Condition 1: blockchose1 = 0 and eliminate = false (corresponding to the block being clickable and elimination slot 1 having no block).

Add response event: Assign the value. Assign blockchose1 = 2 (corresponding to placing block 2 in elimination slot 1).
Add response event: Hide the original position of block 2; display block 2 in elimination slot 1.
Add response event: Play the press sound effect from the beginning.

2）Continuing with Condition 2: blockchose1 ≠ 0 and blockchose2 = 0 and eliminate = false (corresponding to the block being clickable, elimination slot 1 already having a block, and elimination slot 2 having no block).

Similarly, add response event: Assign the value. Assign blockchose2 = 2 (corresponding to placing block 2 in elimination slot 2).
Add response event: Hide the original position of block 2; display block 2 in elimination slot 2.
Add response event: Play the press sound effect from the beginning.

3）Similarly, continue setting up Condition 3 and Condition 4

Condition 3: blockchose1 ≠ 0, blockchose2 ≠ 0, blockchose3 = 0, and eliminate = false (corresponding to the block being clickable, elimination slots 1 and 2 already having blocks, and elimination slot 3 having no block).

Condition 4: blockchose1 ≠ 0, blockchose2 ≠ 0, blockchose3 ≠ 0, blockchose4 = 0, and eliminate = false (corresponding to the block being clickable, all elimination slots (1, 2, and 3) already having blocks, and elimination slot 4 having no block).

III. Quickly copy events to all other "clickable blocks"

In this case, the event settings for each block follow the same logic. So, after completing the event setup for one block following the steps mentioned above:

1）Click the "Copy" button to copy the entire "Press" event.

2）Hold the Ctrl key and select all the layers of clickable block images (including the bright blocks under the gray blocks).

3）Click the "Paste" button on top and choose "Paste layer events only". This way, all the "clickable block" images will have the same set of logical events and condition checks.

4）Then, individually fine-tune the response objects for each block's response events.

5）Note: Since [block4_1] and [block3_2] directly affect the "enablement of bottom blocks," we need to add additional response events related to these variables for these two blocks.

Add response event to each condition under [block3_2]: Assign the value. Assign block3_2 = false (corresponding to block3_2 no longer being present on the field and placed in the slot).

Similarly, add response event to each condition under [block4_1]: Assign the value. Assign block4_1 = false (corresponding to block4_1 no longer being present on the field and placed in the slot).

Next, we will use the conditions and response events under Scene 1 to trigger the corresponding results.

With this, we have completed the event setup for all "clickable blocks." Next, let's add the conditions under Scene 1.

IV. Adding conditions and response events in "Scene 1"

Select Scene 1 - Add Event - Condition.

1）Conditions 1-4: Disable block clicking during elimination and clear the elimination slots.

Edit Condition 1 : blockchose1 = 0 and eliminate = true (corresponding to the block being unclickable and the block in slot 1 being eliminated).
Add response event: Hide the five different pattern blocks on slot 1 one by one.
Similarly, set up Conditions 2, 3, and 4 following the same logic for their respective elimination slots.

2）Conditions 5-8: Elimination results and corresponding feedback.

Edit Condition 5: blockchose1 ≠ 0 and blockchose1 = blockchose2 and blockchose1 = blockchose3 (corresponding to slot 1 having a block, and the blocks in slots 2 and 3 having the same pattern as slot 1).

Add response events:

Assign the value. Assign elimination_time+1 (corresponding to completing one set of elimination).
Assign the value. Assign blockchose1/blockchose2/blockchose3 = 0, eliminate = true (corresponding to making the blocks unclickable and clearing the first three slots).
Display and play the elimination particle effect for the corresponding slots, play the elimination sound effect from the beginning once.
Add a delay of 0.5s and then assign the value: eliminate = false (corresponding to enabling block clicking again).

Note: To avoid conflicts between the logic of clearing eliminations and placing blocks, a time difference (delay of 0.5s) is needed to disable clicks while clearing eliminated elements.

Following the same logic, add three more conditions for slot combinations "1-2-4", "1-3-4", and "2-3-4".
Therefore, we need to set up Conditions 6, 7, and 8 accordingly.

3）Condition 9: Failed elimination

Edit Condition 9: blockchose1 ≠ 0 and blockchose2 ≠ 0 and blockchose3 ≠ 0 and blockchose4 ≠ 0 (corresponding to all four slots having blocks placed)

Note: Since we have already set up "Conditions 5-8: Elimination results and corresponding feedback" to cover the possibilities of correct eliminations, for the incorrect elimination condition, we only need to check if all slot variables are "≠ 0".

Note that since "Failed Elimination" occurs only once and leads to the failure end page, we need to select "Valid only once" for this condition.
Add response events:
- Assign the value: eliminate = true (corresponding to making the blocks unclickable).
- Play Screen jitter effect.
- Play the error sound effect from the beginning once.
- Add a delay of 0.5s and then redirect to the failure end page.

4）Conditions 10-12: Feedback for successful eliminations

Edit Condition 10: elimination_time = 1 (corresponding to completing one set of elimination).
Select "Valid only once" for this condition.
Add response events:
- Set Tracking Event, edit the tracking name as "Successful Elimination of One Set of Blocks".
- Play the progress bar animation from the beginning; after a delay of 0.3s, pause the progress bar animation.
Apply similar logic for Conditions 11 and 12, representing completing two sets and three sets of eliminations, respectively.

5）Conditions 13-15: The bottom layer blocks can/cannot be clicked.

Edit Condition 13: block4_1 = false (corresponding to block4_1 being placed in the slot).
Select "Valid only once" for this condition.
Add response event: Hide the two left bottom gray blocks; show the two left bottom bright blocks.
Apply similar logic for Conditions 14 and 15, representing block3_2 being placed in the slot and both block4_1 and block3_2 being placed in the slot, respectively.

6）Condition 16: Player's first valid action

Edit Condition 16: blockchose1 ≠ 0 (corresponding to block being placed in slot 1, indicating the player's first valid action).
Select "Valid only once" for this condition.
Add response event: Set Tracking Event, edit the tracking name as "Player Presses the First Block".
Play the FadeOut animation of the guiding finger.

Part2：General Events

I. Scene 1: Persistent download button group

1）Select the permanent download button group [ctat] in scene 1.

2）Add event - Press.

3）Add response event: Redirect to app store.

II. Scene 2/3: Redirect button group

1）Select the redirect button group [group_btn] in scene 2.

2）Add event - Press.

3）Add response event: Set Tracking Event"Trigger Redirect from End Page" and redirect to app store.

4）Copy this event to the redirect button group in scene 3.

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）Once everything is completed, it is recommended to perform an overall preview on different devices, languages, and orientations to ensure everything is working correctly.

6.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 materials as soon as possible.

2MB

Block Elimination_Blank Canvas_Assets.zip