⭐<Goods Sort>Blank Canvas Tutorial

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

Please Note：This tutorial mainly explains how to create 2D materials for a "drag 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]: Drag and drop to the specified location

• [Freedom]: Semi free

• [Core Assets]: Image

• [Features]: Drag and drop to the specified location-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

3. Gameplay Overview

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

1）Upon entering the trial, display the initial shelf interface.

2）Show the operation guide to guide the player to drag the white box downward to complete the elimination.

3）When the player drags the white box to the designated position, play the success feedback; otherwise, return it to its original position.

Note: ① All items can be dragged, but they are only placed correctly when dragged correctly; ② The dragging event for the brown bottle is activated only after the green bottle is eliminated.

4）For each set of eliminations completed by the player, increase the star count by 1. When the player completes three sets of eliminations (i.e., star count is "3/3"), proceed to the end page.

5）On the end page, when the player presses anywhere on the screen, redirect to the store.

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 two scenes for production: the core gameplay scene and the end page scene.

Scene Name	Scene 1 - Core Gameplay	Scene 2 - End Page
Visual Rendering
Scene Description	The player needs to sequentially drag three target objects (white box/green bottle/brown bottle) to the designated positions to successfully place and eliminate them. If they drag other objects, those objects will be returned to their original positions.	End page: Reward panel & Redirect button
Core Assets	Static Images:Shelves, items&glowing items, guiding fingers Particle effects: Eliminating feedback Sound effects: Press and drop sound effect, eliminate sound effect	Static Images:Reward panel, reward item, redirect button Particle effects: Victory feedback Sound effects: ictory sound effect
Core Animations	Guiding fingers: Displacement Easing+Alpha Easing+Spin Easing	Reward panel&Redirect button: Scale Easing+Alpha Easing
Core Events	Trigger Object: Individual item Trigger Event: Drag / Drag and drop to the specified location Response Event: Hide layer / Show layer / Assign the value(Global Variables)	Trigger Object: Scene 2 Trigger Event: Press Response Event: Redirect to app store / Report the end of the playable ads

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

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

2）Add product information such as resident download button and logo in "Global scene" 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:

a. The production logic for this type of gameplay (where the position of an item changes after player interaction) is to "add identical items in different positions, hide the placed item initially, and then use event settings to show the placed item and hide the item at the original position" to achieve the desired effect.

Therefore, for the "drag-and-place" items, two identical image resources need to be prepared. In this case, we want the items to have a glow effect during the dragging process, so we prepared one regular item image and one item image with a glow effect.

b. Additionally, in this case, we want to achieve the effect of "the dragged item being placed above all other items." Since the layering of items is influenced by their order in the layer hierarchy, each item needs two identical image resources: one set as the "draggable item" and the other set as the "non-draggable/item displayed only in its original position." Then, group all the images of the former type and place them above the latter type in the layer hierarchy.

c. As there are three different finger guides for three different positions, three finger images also need to be added.

3）Adjust the initial state of the layers: Set all draggable items (i.e., those with a higher layer priority) to the "hidden" state, and set all non-draggable items (i.e., those with a lower layer priority) to the "displayed" state. Set finger guide 1 and 3 to the "hidden" state, and set finger guide 2 to the "displayed" state. We will control the visibility of these layers through events in the subsequent steps.

III. Scene 2

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

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）Global scene and scene 2 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_product] 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, reward panel & redirect button

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

I. Animation

1-1）Guiding finger

1）Select the finger group[hand_1], and Add Animation - Universal - Displacement Easing & Alpha Easing, to create guide animations for the finger and items. and set the parameters as follows:

Displacement Easing

Alpha Easing

2）Optional: Select the finger image [gf_hand1], and Add Animation - Universal - Spin Easing. Set the parameters as follows:

3）The animation settings for hand2 and hand3 are the same. You can simply copy and paste the animations from hand1 to hand2 & hand3, and then adjust the "distance of movement" for the Displacement Easing as needed.

1-2）Reward panel & redirect button

1）Select the reward panel group[board], and Add Animation - Universal - Scale Easing & Alpha Easing, to achieve the desired entrance effect.

2）Set the parameters as follows:

3）Copy the animations from the group[board] and paste them onto the redirect button group [btn_download]. Then, add an additional Scale Easing animation as a looping guide animation after the entrance.

II.Particle Effects

2-1) Elimination feedback

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

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

3）Adjust the positions of the three 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

Similarly, set up the victory feedback particle effects in Scene 2. Note that for the particle effects in Scene 2, since they automatically play upon entrance, you can directly set them to the "displayed" state.

Step 4 - Event Setting

In this case, all events are centralized and set on the "All Draggable Items" group and the "Scene." We will explain them in the order of operation.

Part1：Global Variables

Firstly, to achieve:

a. Counting successful operations: For each completed set of eliminations, increase the star count by 1. When three sets of eliminations are completed (i.e., the star count reaches 3), transition to the end page.

b. No-operation guide: After the player completes any set of eliminations, display the next finger guide. If there is no player action within a 3-second interval, display the corresponding finger guide.

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. (If you don't need these effects during your production, you can delete the related variables directly.)

I. Add Global Variables

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

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

3）Using the same method, add the "Guidelines" and "Corresponding_finger" variables one by one.

II. Add trigger events and response events for all "Draggable Item" groups

Taking the first item,[Proper6_a1] as an example, select that layer group.

1）Add Event - Drag, and choose "Any direction" as the drag direction.

• Add response event: Assign the value. Assign Guidelines = 2 (corresponding to "Player active, hide the entire finger group and cancel the timer").

• Add response event: Show the glowing Prop6; Hide the original position of Prop6; Hide the glowing Prop1 (white box).

• Add response event: Play the press sound effect once from the beginning.

2）Add Event - Lift up.

• Add response event: Assign the value. Assign Guidelines = 1 (corresponding to "Player inactive, timer counts for 3 seconds, then display the corresponding finger").

• Add response event: Show the original position of Prop6; Hide the glowing Prop6.

3）Quickly copy the events to all other "Draggable Item" groups.

• After setting up the two types of events, click to copy the layer [Proper6_a1] .

• Hold down the Ctrl key and select all the "Draggable Item" groups.

• Click the Paste button and choose "Paste layer events only."

• This way, all "Draggable Item" groups will have corresponding drag and lift up events.

• Then make minor adjustments to the response objects for each item group.

III. Add trigger events and response events for the three "Draggable and Placeable Item" groups

Taking the white box, Prop1_a2, as an example, select that layer group.

1）Add Event - Drag and drop to the specified location

2）Edit the specified area and choose "Any direction" as the drag direction.

• Add response event: Set Tracking Event. And enter the tracking name, such as "Player correctly placed white box."

• Add response event: Assign the value. And assign Guidelines = 1 (corresponding to "Player inactive, timer counts for 3 seconds, then display the corresponding finger"); assign Cumulative_times+1 (corresponding to "One set of eliminations completed"); assign Corresponding_finger = 2 (corresponding to "≠1, white box eliminated, display finger guide 2 or 3").

• Add response event: Disable the drag and lift up events for Prop1_a2.

• Add response event: Hide the glowing Prop1; show the placed Prop1.

• Add response event: After a 0.1-second delay, hide the entire group for the third slot [proper_C]; simultaneously show and play the elimination particle effect from the beginning.

3）Quickly copy the events to the other two "Draggable and Placeable Item" groups.

• Click to copy the "Drag and drop to the specified location" event of [Prop1_a2] .

• Hold down the Ctrl key and select the other two groups, [Proper2_a3] and [Proper3_a3_yes].

• Click the Paste button and choose "Paste layer events only."

• Then make minor adjustments to the response objects for the two item groups.

4）Note: During the initial gameplay overview stage, we set the condition that "the drag event for the brown bottle only takes effect after the green bottle is eliminated." Accordingly, the appearance of the corresponding finger guides also has a specific order. Therefore, hand2 and hand3 do not need to be controlled by Global Variables. After the green bottle is "Dragged to Specific Location," we can hide hand2 and show hand3.

Therefore, we need to make additional adjustments to the response events for Prop2_a3.

• After the delay, add response event: Hide hand2; show hand3.

• Add response event: Hide the "Draggable Only" Prop3; show the "Draggable and Placeable" Prop3.

With this, we have completed the event setup for all "Draggable Items" groups.

Next, we will add events to the scene.

IV. Add conditions and response events to Scene 1

Select Scene 1 - Add Event - Condition.

1）Condition 1-3: Calculate successful operation count

• Edit Condition 1 as: Cumulative_times = 1 (corresponding to "Player has completed one set of eliminations").

• Check "Valid only once."

• Add response event: Hide text 0; show text 1.

• Similarly, add Condition 2 and Condition 3 one by one, and set the corresponding text to show/hide.

• In Condition 3, add an additional response event: After a 0.7-second delay, redirect to the next scene.

Note: This means that when the player completes three sets of eliminations, they will enter the end page.

Note: As mentioned earlier, hand2 and hand3 have a specific order of appearance, so there is no need to use Global Variables to control them. The variables related to "No-operation guidance" are only used to determine the state of Prop1: if Prop1 is not placed, show hand1 and play its animation; if Prop1 is placed, hide hand1, show the group [hand_2_3], and play the corresponding animations (the states of hand2 and hand3 in the group are controlled by the dragging of Prop2).

According to this logic, we set up conditions 4-7.

2）Conditions 4-5: No-operation guidance(Controlling the appearance of inactivity guidance)

• Edit Condition 4: Guidelines = 1 (corresponding to "Player inactive, timer counts for 3 seconds, then display the corresponding finger"). Add response event: After a 3-second delay, show the entire finger group; play the corresponding finger guidance animation from the beginning.

• Edit Condition 5: Guidelines = 2 (corresponding to "Player active, hide the entire finger group and cancel the timer"). Add response event: Hide the entire finger group; cancel the 3-second delay.

3）Conditions 6-7: No-operation guidance(Controlling which finger actually appears)

• Edit Condition 6: Corresponding_finger = 1 (corresponding to "White box not yet eliminated, show initial finger guide 1"). Add response event: Show hand1; hide the [hand_2_3] group.

• Edit Condition 7: Corresponding_finger ≠ 1 (corresponding to "White box eliminated, show finger guide 2 or 3"). Add response event: Hide hand1; show the [hand_2_3] group.

Part2：General Events

I. Scene: Scene 1

1）Select Scene 1 - Add Event - Timing Trigger.

2）Add response event: After a 0-second delay, when the scene starts, show the glowing Prop1; display and play all animations for hand1.

II. Scene: Scene 2

1）Similarly, select Scene 2 - Add Event - Timing Trigger.

2）Add response event: After a 0-second delay, when the scene starts, play the victory sound effect from the beginning once; display and play the confetti particle effect; play all animations for the reward panel and the redirect button from the beginning.

Note: The above two sets of "Timing Trigger" events are for setting up immediate playback effects when entering the scenes. You can also choose not to set these two event groups and simply set the corresponding assets to be in the "display" state or enable automatic playback on entry during Step 1 - Scene setup.

3）Continue adding events under Scene 2 - Press.

4）Add response event: Set Tracking Event. And enter the tracking name, such as "Trigger redirect on end page."

5）Add response event: Report the end of the playable ads; Redirect to app store.

III. Layer: Persistent download button group

1）Enter Global scene and select the layer [group_download].

2）Add Event - Press.

3）Add response 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）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

Goods Sort_Blank Canvas_Assets.zip

archive

7.Additional Note

Due to limitations in the current tool functionality, it is currently not possible to create fully unrestricted material for the "Goods Sort gameplay" using Blank Canvas (where items can be freely dragged to any position, similar to the template "Goods sort".)

Therefore, when creating materials for this type of gameplay, we suggest the following:

1）Prioritize using the template "Goods sort" for Feature Creation or Content Creation.

2）If you wish to design your own shelf layout or incorporate other gameplay elements, we recommend referring to this case's demo and tutorial for creating materials with drag-and-drop functionality (placing items correctly or returning them to their original positions if incorrect).