<Merge New Items>Blank Canvas Tutorial
#Content Editor #Blank Canvas #Basic difficulty
Please Note：This tutorial mainly explains how to create 2D materials for the "merge" gameplay using Blank Canvas. It is recommended to try the DEMO for a better understanding!
1. Basic Info
[Difficulty]: ⭐⭐
[Applicable Products]: Merge gameplay products
[Interaction]: Drag and drop to the specified location
[Freedom]: Fixed process
[Core Assets]: Image
[Features]: Drag and drop to the specified location-Show/Hide layer；Disable events/Enable events
2. Effect Preview
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, display the initial element layout as shown in the diagram. At this stage, the items cannot be dragged.
2）Show the first set of operation guide to guide the player to click on the "Add element" button. When the player presses the button, Element 2 appears in the first grid, and the button becomes unclickable.
3）Show the second set of operation guide to guide the player to drag Element 2 from the left side to the right side for merging. If the player correctly places Element 2 in the designated position, play the "Merge Feedback"; otherwise, play the "Error Feedback."
4）Similarly, proceed with the merging of Element 3 and Element 4 step by step.
5）Upon completing the merging process of Element 4 (i.e., when the diamond count reaches 300), redirect to the 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 two scenes for production: the core gameplay scene and the end page scene.
Visual Rendering
Scene Description
1）Guide the player to click on the button to add an element.
2）Guide the player to merge the target elements.
Reward panel & Redirect button
Core Assets
Static Images: Chessboard background, Multiple elements, Operation guide, Synthesis guide, Target panel
Audio-visual packaging: Particle effects for synthesis, Particle effects for errors, Sound effects
Static Images:Reward panel, Reward items, Redirect button
Audio-visual packaging: Ribbon particle effects, Victory sound effect
Core Animations
Click guide：Scale Easing
Merge guide：Displacement Easing+Scale Easing+Alpha Easing
Target element：Spin Easing
Reward panel&Redirect button: Scale Easing
Core Events
Trigger Object: "Add element" button
Trigger Event: Press
Response Event: Show layer；Disable events/Enable events
Trigger Object: Element 2/3/4
Trigger Event: Drag and drop to the specified location
Response Event: Hide/Show layer；Disable events/Enable events
Trigger Object: Scene 2
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.
1.1 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, and adjust their positions and sizes.
1.2 Scene 1
1）In Scene 1, add assets related to the core gameplay: chessboard background image, multiple element images, synthesis guide, target panel, operation guide, and sound effects.
2）Adjust the position and size of each asset and group, sort, and name them according to their asset types (refer to the demo for more details).
3）Note: The production logic for this type of gameplay (where item positions change after player interaction) is to "add all possible elements in the same position, initially hide advanced elements (those that appear only after player interaction), and later use events to show advanced elements and hide lower-level elements" to achieve the desired effect.
Therefore, the initial state of the following layers should be set to "hidden," and we will control the visibility of these layers through events (layers to be hidden include: advanced elements on the chessboard, 2nd/3rd/4th operation guides, and gray button).
1.3 Scene 2
1）Copy the target panel group [group_guidelines1] from Scene 1 to Scene 2 and delete any unnecessary layers.
2）Add assets related to the reward panel and redirect button, adjust their positions and sizes accordingly, and group, sort, and name them based on their asset types (refer to the demo for more details).
3）Check 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."
2.1 Adjust the layout for landscape orientation
1）Switch to landscape mode and select all the top-level layers in scene 1.
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 appropriately to display the complete core gameplay content.
3）Global scene and scene 2 are the same.
2.2 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 following animations and particle effects are used, which we will explain in detail:
Scene 1: Click guide animation, target guide animation, merge guide animation, target element rotation animation, merge particles, error particles.
Scene 2: Scale animation for the reward panel and redirect button, ribbons particles.
3.1 Click guide：Scale Easing
1）Select the finger guide 1 image [gf_hand1], and Add Animation - Universal - Scale Easing, as a looping animation for the clicking guide. Set the parameters as follows:
2）Copy the scaling animation to the button group [btn_add], adjust the parameters slightly, and use it as a looping animation for the button guide.Set the parameters as follows:
3.2 Target guide：Scale Easing
1）Select the target image [target] and Add Animation - Universal - Scale Easing, as the animation for the target element guide. Set the parameters as follows.
2）Note: This scaling animation can be copied to other [target] layers and adjusted accordingly.
3.3 Merge guide：Displacement Easing & Scale Easing & Alpha Easing
1）Select the finger guide 2 image [gf_hand2] and sequentially Add Animation - Universal - Displacement Easing & Scale Easing & Alpha Easing, as the merge guide animation for the finger. Set the parameters as follows:
2）Note: This layer animation can be copied to [gf_hand3] and [gf_hand4], adjusting the displacement distance accordingly.
3.4 Target element：Spin Easing
Select the target element image [target_ui] and Add Animation - Universal - Spin Easing, as a highlighted display animation for the target element.
3.5 Reward panel & Redirect button：Scale Easing
1）Select the group layer [node_reward] and Add Animation - Universal - Scale Easing, as an entrance animation for the end element.Set the parameters as follows:
2）Copy this animation to the button group [btn_continue], adjust the parameters slightly, and use it as a looping animation for the redirect button guide. Set the parameters as follows:
3.6 Particle Effects：Merge particles & Error particles & Ribbons particles
1）Select appropriate particle effects from the "Asset Library" and add them.For example, add merge particles and error particles in Scene 1, and add ribbons particles in Scene 2.
2）Note: Each element group should have an individual error particle added. Set the "Emission Space" of the particle parameters to "World" and adjust the remaining parameters to achieve the effect of "error particles appearing in real-time at the position where the players Lift up their finger."
3）Adjust the particles to their appropriate positions (taking into account both landscape and portrait orientations).
4）Set the initial state of the particles in Scene 1 to "hidden," and we will control the display and playback of the particles through events later on.
Step 4 - Event Setting
To complete the setup of all animations, we need to configure the logic of the gameplay using "events."
In this case, the following events are relevant:
Pressing the "Add element" button: Hide the original button, display the gray button, and show Element 2.
Dragging and releasing "Element 2": Play the error particle effect. If Element 2 is dragged to the correct position, hide Element 2 and show Element 3.
The event settings for Element 3 and Element 4 are the same as above.
Pressing the end page: Redirect to app store.
Next, we will explain each step in sequence.
4.1 Layer: "Add element" Button
Select the button group [btn_add], Add Event - Press.
Add response events:
Set Tracking Event, select tracking ID 1, and edit the tracking name as "Button Pressed."
Enable the drag event for "Element 2" (add this response event after setting up the drag event for Element 2).
Hide Guide Group 1; display the gray button; show Element 2.
Play the add element sound effect once; show and play the merge particle effect after a delay of 0.1s; show Guide Group 2 after a delay of 0.3s; play the finger guide animation and target image scale animation for Finger 2 from the beginning after a delay of 0.1s.
4.2 Layers: Element 2, Element 3, Element 4
Ⅰ. Element 2
Select the Element 2 layer group [nod_item_2].
1）Add Event - Drag, select "Any Direction."
Add response events:
Enable the Lift up event for "Element 2" (add this response event after setting up the Lift up event for Element 2).
Hide Guide Group 2; pause the finger guide animation for Finger 2; play the drag sound effect once.
2）Add Event - Lift up.
Add response events:
Disable the Lift up event for "Element 2" (disable this event after triggering the error feedback to ensure it only triggers once).
Show and play the error particle effect; play the error sound effect once.
Show Guide Group 2 after a delay of 0.4s and play the finger guide animation for Finger 2 from the beginning.
Note: The combination of Drag and Lift up events for the element is used to achieve the effect of triggering feedback when the element is not dragged to the correct position. The "Drag and drop to the specified location" event for the element is used to trigger feedback when the element is successfully merged.
3）Add Event - Drag and drop to the specified location, edit the drag area, and select "Any Direction."
Add response events:
Set Tracking Event, select tracking ID 2, and edit the tracking name as "Merge Element 3."
Disable the drag and Lift up events for Element 2; enable the drag event for Element 3 (add this response event after setting up the drag event for Element 3).
Hide Element 2 in both positions; play the merge sound effect once; show and play the merge particle effect.
Show Element 3 after a delay of 0.2s; hide Diamond Text 0 and show Text 100.
Show Guide Group 3 after a delay of 0.5s and play the finger guide animation and target image scale animation for Finger 3 from the beginning.
Ⅱ. Element 3 & Element 4
Since the event settings for Element 3 and Element 4 are similar to Element 2, we can use the "Copy-Paste" function to quickly complete the setup.
1）Copy the Element 2 layer, then select the Element 3 and Element 4 layers, and Paste - Paste layer events only.
2）Adjust the response targets to the respective content accordingly.
3）Note: After completing the merge for Element 4, we need to redirect to the end page. Therefore, the "Drag and drop to the specified location" event for Element 4 is different from the other two elements.
Under the last set of delayed events, add a response event for "Redirect to the next scene."
4.3 Scene 1
Since the gameplay in this case follows a fixed process, the next merge operation can only be performed after the player presses the "Add element" button (the same applies to subsequent merges). Therefore, we need to disable the element's events at the entrance.
In Scene 1, Add Event - Timing trigger(with a duration of 0s).
Add response events: Disable the "drag" and "Lift up" events for all three elements in sequence.
4.4 Scene 2
Enter Scene 2, Add Event - Press.
Add response event: Set Tracking Event, select tracking ID 5, and edit the tracking name as "Trigger End Page Redirect."
Add response event: Redirect to app store.
4.5 Layer: Persistent Download Button Group
Enter Global scene, select the persistent download button group, Add Event - Press.
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.
7.Please Note
Therefore, when creating materials for this type of gameplay, we recommend the following:
✨Prioritize using templates designed for merge gameplay for Feature Creation or Content Creation.
✨If you want to design your own element layout or incorporate other gameplay elements, we recommend referring to this case's demo and tutorial for creating materials using Blank Canvas (with fixed steps where dragging to the correct position triggers merging, while incorrect placements return the item to its original position).
Last updated
