Match Lines Component - Blank Canvas Tutorial
#Content Editor #Blank Canvas #Basic difficulty #Match Lines Component
Last updated
#Content Editor #Blank Canvas #Basic difficulty #Match Lines Component
Last updated
Please Note：This tutorial mainly explains how to create interactive materials with the match lines gameplay through "Match Lines Component" in Blank Canvas. It is recommended to use it together with the and for a better understanding!
[Difficulty]: ⭐⭐⭐
[Applicable Products]: Match lines gameplay
[Interaction]: Begin Drawing/Finish Drawing
[Freedom]: Fully free
[Core Assets]: Image
[Features]: Begin Drawing - Hide the guide；Finish Drawing - Play feedback；Global Variables cumulative count
Scan to play
Before starting the production, we need to outline the gameplay logic for this case：
Upon entering the playable ad, displaying three sets of elements to be connected.
Display the operation guide to instruct player to connect and match one set of elements.
Players can start the connection from any element. Upon successful matching, play the "correct feedback" and advance the progress bar; upon failed matching, play the "wrong feedback".
After successfully completing the matching for all three sets of elements, redirect to the end page.
On the end page, when the player presses anywhere, redirect him to app store.
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 overview from the previous section, we can divide this case into 2 scenes for production.
Visual Rendering
Scene Description
Guide players to match lines and solve puzzles.
Victory feedback + Redirect button
Core Assets
Static Images: multiple connecting elements, progress bar, operation guide
Audio-visual packaging: press sound effect, correct/error feedback sound effect
Static Images: victory feedback panel, redirect button
Audio-visual packaging: ribbon & fireworks particles、victory sound effect
Core Animations
Guiding hand:Displacement Easing&Alpha Easing
Guiding text:Displacement Easing
Correct/Error feedback:ZoomIn2&FadeOut
Progress bar:Scale Easing
Victory feedback panel:ZoomIn2
Redirect button:PulseFront
Core Events
Trigger Object: Match Lines Component
Trigger Event: Finish Drawing
Response Event: Play feedback/Disable Start and End Regions
Trigger Object: Scene2
Trigger Event: Press
Response Event: Redirect to app store
*The core content consists of Step4"Component Parameter Setting" and Step5"Event Setting."
It is recommended to upload all assets into the "Project Assets" after creating the project for easier access and usage in the future.
1）Add BGM and Background Image in the "Global Settings" section.
2）Add permanent download button, logo and other product information under "Global Scene", and adjust their position size.
Ⅱ-Ⅰ）Scene 1
1）Add core gameplay assets to scene 1.
2）Adjust the position and size of each asset accordingly and group, arrange, and name the assets based on their types.
Ⅱ-Ⅱ）Scene 2
1）Add victory feedback assets to scene 2.
2）Adjust the position and size of each asset accordingly and group, arrange, and name the assets based on their types.
3）Check scene 2 as the "Ending Scene" for reporting the end of the playable ads.
4）Disable the "Global scene" option for scene 2.
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）In scene 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 appropriately to display the complete core gameplay content.
3）Similarly, switch to scene 2 and the "Global Scene" one by one, use the "Reuse vertical screen position configuration" feature to automatically adjust the layout, and then fine-tune the positions and sizes.
In this case, we want the persistent information group in portrait mode to always be at the bottom of the screen for each device model. Therefore, we adjust its "Screen adaptation" to "Bottom-Fit" (other layers remain centered without adjustment).
In this case, the animations and particle effects used are as follows. Let's introduce them one by one:
Scene 1: Finger line guide animation, guiding text movement animation, progress bar advancement animation, entrance/exit animations for correct/error feedback.
Scene 2: Entrance animation for victory feedback, redirect button guiding animation, ribbon particles, fireworks particles.
1）Select the finger image [gf_hand], Add Animation - Universal - Displacement Easing, as a finger guiding animation.
2）Select the group layer containing the finger and the guide line [group_hand], Add Animation - Universal - Alpha Easing, to create transitions for the finger and blinking effect for the guide line.
3）Combine the two animations to create a looping guiding animation for the finger line. Set the parameters as follows
Note: The finger movement animation has the option "[Displacement Offset]Separate Setting" enabled. After completing the vertical animation settings, switch to landscape mode and fine-tune the distance of movement.
Select the guiding text [text_guide], Add Animation - Universal - Displacement Easing. Set the parameters as follows:
1）Select the progress bar image[progress_bar] 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: To reach the end point, the progress bar needs to play 3 times. Therefore, you can set the animation's "duration" to 0.9s and control the duration of each animation playback (0.3s) through events to achieve the desired effect.
1）Select the correct feedback image [feedback_right] and add animations "ZoomIn2" and "FadeOut" in sequence to create the appearance and disappearance animations for the correct feedback. Set the parameters as follows
2）Since the animations for the correct feedback and error feedback are the same, you can copy the animations to the layer [feedback_wrong] to quickly complete the production of the same animations.
Select the victory feedback group [group_end] in scene 2, Add Animation - Approach - ZoomIn2. Set the parameters as follows:
Select the redirect button group [group_ctat], Add Animation - Emphasize - PulseFront, to create a looping guiding animation for the button. Set the parameters as follows:
1）Click on "Asset Library" - "Particle", choose and add appropriate particles to enhance the visual effect of the victory feedback.
2）Adjust the particles to the appropriate position.
3）Adjust the particle positions for portrait orientation, and also switch to landscape mode for adjustments.
To complete the creation of the above content, let's now add and configure the core component of the "match lines gameplay" - Match Lines Component.
Click "Gameplay Template" and add the "Match Lines" component from the "Component".
You can adjust the position and size of the component by either using the parameter area on the right or directly dragging/resizing the green rectangle in the canvas (the size of the component should match the area where lines can be drawn).
1）Since there are a total of 6 elements to be connected in this case, we will add 6 Start and End Regions.
2）Adjust each Start and End Regions to the corresponding position and size.
3）Set the line style for "Start and End Regions 1," and then click on "Apply to All" to apply the same line style to all 6 regions uniformly.
1）Click on "Add Pairing Relationships" to set the pairing relationships for the "Start and End Regions." The pairing relationships in this case are as follows:
Correct pairings: Region 1 → Region 5 / Region 2 → Region 4 / Region 3 → Region 6
Incorrect pairings: Region 1 → Region 4&Region 6 / Region 2 → Region 5&Region 6 / Region 3 → Region 4&Region 5
Note: Besides the correct and incorrect pairings, other regions should not be paired (e.g., Region 1 → Region 2), so there is no need to add additional pairing relationships.
2）Taking Region 1 as an example, select the pairing relationship "1 → 5" and set the "Matching Category" as TRUE; select the pairing relationship "1 → 4&6" and set the "Matching Category" as FALSE.
3）Proceed to set the pairing relationships for the remaining six pairs (the first three pairs are correct pairings, and the last three pairs are incorrect pairings).
4）In this case, we choose "Two-way" for the Line Pairing and "Straight Line" for the Line Types.
After completing the parameter settings for the component, let's use events to link the materials together.
In this case, we have several key events set up: hiding the operation guide when starting to match lines, playing correct feedback when matching lines correctly, playing error feedback and modifying the line style when matching lines incorrectly, calculating the number of correct connections through Global Variables, and triggering a redirect to app store on the end page.
Next, we will explain each event in order.
1）Click on the "Global Variables" icon at the top and add variables.
2）Enter a variable name such as "DrawTime" and set the variable type as "Value" with an initial value of "0." Save the variable.
Note: This variable is only used to track the number of correct connections. Since no connections are made before player interaction, the initial value is set to 0.
1）Select the layer of the Match Lines Component in Scene 1 and click on "Add Event." Choose "Begin Drawing" as the trigger event.
Select all Start and End Regions (since we have chosen two-way line pairing, meaning lines can be drawn from each region).
Add response event: Set Tracking Event. And edit the tracking name as "First Effective Action."
Add response event: Hide the operation guide group, play the click sound effect once from the beginning.
2）Continue to "Add Event" and choose "Finish Drawing" as the trigger event. For this event, we will set up the "Correct Pairing Relationship 1 → 5."
Select: Match - Pairing Relationship - "1 → 5"
Add response event: Assign the value. Assign the variable "DrawTime + 1 "(This corresponds to successfully completing one connection).
Add response event: Disable Disable Start and End Regions 1 and 5.
Add response event: Play all animations of the correct feedback from the beginning and play the correct sound effect once.
3）Copy and paste the above "Finish Drawing" event and modify the response objects for "Pairing Relationship" and "Disable Start and End Regions" accordingly for "Correct Pairing Relationship 2 → 4" and "Correct Pairing Relationship 3 → 6."
4）Lastly, add a trigger event "Finish Drawing." For this event, we will uniformly set up the "Three Incorrect Pairing Relationships."
Select: Match - Matching Category - FALSE
Add response event: Play Screen jitter effect, play all animations of the error feedback from the beginning, and play the error sound effect once.
Add response event: Edit the Style of Paired Lines. Select the three incorrect pairing relationships and choose to modify the line color to red.
Add response event: After a delay of 0.5 seconds, erase the red lines, restore the initial green color for the line style, and enable the three incorrect pairing relationships.
1）Click on "Add Event" in Scene 1 and select the trigger event as "Condition."
2）Edit Condition 1: DrawTime=1 (i.e., what feedback should be triggered when one connection is successfully completed).
3）Check "Valid only once."
Add response event: Set Tracking Event. And edit the tracking name as "Successfully Completed One Connection."
Add response event: Play progress bar animation and pause the progress bar animation after a delay of 0.3 seconds
4）Similarly, set up Condition 2 and Condition 3.
Note: After successfully completing three connections, we need to go to the end page. Therefore, modify the last response event of Condition 3 to "Redirect to the next scene."
In Scene 2, click "Add Event," choose "Press" as the trigger event.
Add response event: Set Tracking Event. And edit the tracking name as "End Page Triggered."
Add response event: Play the click sound effect once from the beginning. Redirect to app store.
Select the persistent download button group under "Global Scene," click "Add Event," and choose "Press" as the trigger event.
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.
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.
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.
