<Merge New Items>Blank Canvas Tutorial
#Content Editor #Blank Canvas #Merge gameplay #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
| 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, 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.
| Scene Name | Scene 1 - Core Gameplay | Scene 2 - End Page |
|---|---|---|
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
Due to current limitations in functionality, it is temporarily not possible to create fully unrestricted "drag-and-drop merge gameplay" materials using Blank Canvas (similar to the "Merge2 to Collect" template, where you can drag any item to any position for merging).
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
