Match Lines Component - Blank Canvas Tutorial

#Content editor #Blank Canvas #Match Lines Component #Simple difficulty

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 demo and feature introduction document for a better understanding!

1. Basic Info

• [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

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：

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

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 gameplay overview from the previous section, we can divide this case into 2 scenes for production.

Scene Name	Scene 1 - Core Gameplay	Scene 2 - End Page
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

5. Production Guidelines

*The core content consists of Step4"Component Parameter Setting" and Step5"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.

Ⅰ. Global Scene

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.

Ⅱ. General Scene

Ⅱ-Ⅰ）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.

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

II. Adjust the screen adaptation.

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

Step 3 - Animation Setting

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.

Ⅰ. Guiding finger: Displacement Easing&Alpha Easing

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.

Ⅱ. Guiding Text: Displacement Easing

Select the guiding text [text_guide], Add Animation - Universal - Displacement Easing. Set the parameters as follows:

Ⅲ. Progress bar : Scale Easing

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.

Ⅳ. Correct/Error feedback:ZoomIn2 & FadeOut

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.

Ⅴ. Victory feedback: ZoomIn2

Select the victory feedback group [group_end] in scene 2, Add Animation - Approach - ZoomIn2. Set the parameters as follows:

Ⅵ. Redirect button: PulseFront

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:

Ⅶ. Particle Effects: Ribbon particles & Fireworks particles

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.

Step 4 - Component Parameter Setting

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.

Ⅰ. Add component

Click "Gameplay Template" and add the "Match Lines" component from the "Component".

Ⅱ. Adjust the exterior parameters of 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).

Ⅲ. Set Start and End Regions

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.

Ⅳ. Set Pairing Relationship

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.

Step 5 - Event Setting

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.

Ⅰ. Add Global Variables

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.

Ⅱ. Layer Event: Match Lines Component

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.

Ⅲ. Scene Event: Condition

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

Ⅳ.Scene Event: Scene 2

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.

Ⅴ. Layer Event: Persistent download button group

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.

Step 6 - 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.

563KB

Match Lines Component_Blank Canvas_Assets.zip

archive