# Match Lines Component

✨Entrance of **Template Content Creation**：Work Preview Area>>>Match Lines Component button / Layer Area>>>Match Line Component

<figure><img src="/files/pjQJtMKYRhNrpbDWEqNS" alt=""><figcaption></figcaption></figure>

✨Entrance of **Blank Canvas**：Gameplay Template>>>Component>>>Match Lines Component

<div align="left"><figure><img src="/files/Z0DQhGo2CYBG3SBrB7Uv" alt=""><figcaption></figcaption></figure></div>

Related case tutorial can refer to [Match Lines Component - Blank Canvas Tutorial](/playturbo-case-study/playable-content-editor/painting-gameplay-cases/match-lines-component-blank-canvas-tutorial.md)

####

## <mark style="color:blue;">📒Match Lines Component Intro</mark>

* Currently, both "**Template Content Creation**" and "**Blank Canvas**" support the use of the "Match Lines Component."  With "Template Content Creation," you can make adjustments to the components based on the original template's gameplay. With "Blank Canvas," you can create assets for connection gameplay from scratch.
* Based on the existing 「Match Lines Component」 , you can adjust the template's connectable area, start and end regions, line style, pairing relationships, line types,etc
* <mark style="color:red;">Note: Only one component can be added per scene, but component can be added across scenes or copied.</mark>

####

## <mark style="color:blue;">📒Match Lines Component Sample Cases</mark>

It is suitable for gameplay with fixed connected areas or fixed pairing combinations, such as 'Line And Solve'.

* Sample1 - [Line And Solve](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001189%252F12768%252Fpv%252F24%252F04%252F24%252F66286b4e9e1d2%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E8%BF%9E%E7%BA%BF%E8%A7%A3%E9%A2%98\&language=undefined)
* Sample2 - [Draw to grab](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001381%252F13098%252Fpv%252F24%252F07%252F03%252F6684c9341dc65%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%94%BB%E7%BA%BF%E6%8A%93%E5%8F%96\&language=undefined)
* Sample3 - [Draw to home to get things](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001294%252F12989%252Fpv%252F24%252F06%252F26%252F667bd7ebbbc42%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%94%BB%E7%BA%BF%E5%9B%9E%E5%AE%B6%E5%8F%96%E4%B8%9C%E8%A5%BF\&language=undefined)
* Sample4 - [Draw to home](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001222%252F12848%252Fpv%252F24%252F04%252F25%252F662a2368babcb%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%94%BB%E7%BA%BF%E5%9B%9E%E5%AE%B6\&language=undefined)

####

## <mark style="color:blue;">📒Match Line Component Instruction</mark>

The adjustable parameters of  「Match Line Component」  are divided into three parts: "exterior", "start and end regions", and "event".

We will combine the template ["Draw to home" ](http://tinyurl.com/5vsrhwjn)to provide instructions for using the 「Match Line Component」&#x20;

### 1.Exterior

* **\[Show\&Hide] Separate Setting：**&#x53;ame as appearance parameters for each layer. You can adjust whether the 「Match Line Component」 is displayed separately in landscape/portrait mode.
* **Position\&Size：**&#x59;ou can modify the width, height, and position of the 「Match Line Component」. They determine the range where lines can be drawn (as shown in the example below, the green overlay indicates the playable area for drawing lines).
* **Screen adaptation：**&#x53;ame as appearance parameters for each layer, you can adjust the screen adaptation method for the  「Match Line Component」.
* **Scale：**&#x53;ame as appearance parameters for each layer, you can adjust the scale ratio of the  「Match Line Component」.

<figure><img src="/files/LEyRq1HHFyZYYiJrfkWU" alt=""><figcaption></figcaption></figure>

### 2.Start and End Regions

The "Start and End Regions" is a unique parameter of the Match Line Component. A 「Match Line Component」  consists of multiple start-end Regions and their pairing relationships.

<figure><img src="/files/jUxtDwmxG5soQ0hDgPZV" alt=""><figcaption></figcaption></figure>

#### **1）Start and End Regions**

In this component, set several regions of arbitrary size and position, which will be used in conjunction with "Pairing Relationships" to generate specific drawing effects.

In the \[Draw to home] template, there are a total of 4 start and end regions:

* Support modifying the line style (color and thickness) of existing "start and end regions."
* &#x20;Support applying the line style of a specific start and end region to all.
* Support adding new start and end regions.&#x20;
* For each start and end region, you can adjust its size and position on the canvas.
* Support deleting a specific start and end region (but it is not recommended as it may cause issues with gameplay functionality).
* <mark style="color:red;">Note: The Line Style represents the style of lines drawn from that region.</mark>

<div align="left"><figure><img src="/files/uOSqhyA4JV87evfdWDv0" alt=""><figcaption></figcaption></figure></div>

#### 2）**Pairing Relationship**

Pair relationship determine whether a line can be drawn from a specific region. Only start and end regions with a pairing relationship can draw lines. Start and end regions without a pairing relationship cannot draw lines, even if they have the required areas.

In the \[Draw to home] template, there are a total of 4 Pairing Relationships:

* Each pairing relationship requires the configuration of a "Start region" and "End region," along with the setting of the "Matching Category" parameter.
  * Only one start region can be selected, while the end region supports single or multiple selections.
  * The "Matching Category" is divided into two categories: true or false. (Blank Canvas supports custom creation, detailed explanation below)
* Support modifying the name of each pairing relationship.&#x20;
* Support deleting a pairing relationship (but it is not recommended as it may cause issues with gameplay functionality).
* Support "Previewing All Lines"&#x20;
* <mark style="color:red;">Note: Completed connections can't be redrawn</mark>

<div align="left"><figure><img src="/files/tHqkt5NPyzrO1drY2B20" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:yellow;">Taking the template "Draw to home" as an example.</mark>&#x20;

<mark style="background-color:yellow;">There are 4 Pairing Relationships in total：1->3, 2->4, 1->4, 2->3.</mark>&#x20;

<mark style="background-color:yellow;">Among them, 1->3 and 2->4 are set as "True" pairs, while 1->4 and 2->3 are set as "False" pairs.</mark>

<mark style="background-color:yellow;">Using these pair relationships, in the material, dragging to draw a line can start from regions 1 and 2. If the final finger release position is within regions 3 and 4, the drawn line is retained, triggering corresponding events; otherwise, the drawn line is not retained.</mark>

<figure><img src="/files/pmOgdk4aAdVuwzs04j1C" alt=""><figcaption></figcaption></figure>

<mark style="color:red;">**Note:**</mark> <mark style="color:red;"></mark><mark style="color:red;">When using \[Blank Canvas] with the Match Lines Component, you need to add the \[Matching Category] manually.</mark>  You can add multiple Matching Categories based on the actual creation needs.&#x20;

Click the settings button in the illustration to open the \[Matching Category] popup. Click \[Add Pairing Category], enter the name, and the setup is complete. Once added successfully, you can select the Pairing Category.

<div align="left"><figure><img src="/files/WO334yb4lZ8i1MicwM1Y" alt=""><figcaption></figcaption></figure></div>

#### 3）**Line Pairing**

Affects the pairing relationships.

* If configured as "One-way", lines can only be drawn from the region before each pairing, and it is not possible to draw lines from the subsequent region. <mark style="background-color:yellow;">Taking the first pairing relationship in the "Draw to home" template as an example, you can only draw lines starting from region 1 and ending at region 3; it is not possible to draw lines starting from region 3.</mark>
* If configured as "Two-way",lines can be drawn from either region of each pairing relationship. <mark style="background-color:yellow;">Taking the first pairing relationship in the "Draw to home"  template as an example, you can draw lines from region 1 to region 3 or from region 3 to region 1, both options will successfully complete the line.</mark>

<div align="left"><figure><img src="/files/oN2H10ry9vKcfi454Ll1" alt=""><figcaption></figcaption></figure></div>

#### 4）**Line Types**

It determines the specific type of lines drawn in the material.

* Free-hand Drawing: Simply put, Free-hand Drawing is the curve that follows the trajectory of the finger's drawing line.
* Straight Line: Not affected by the trajectory of fingers during the drawing process, only forming a straight line in the end.

<div align="left"><figure><img src="/files/a6rGWO4J05CDz2BiZjS3" alt=""><figcaption></figcaption></figure></div>

### 3.Event

Two types of trigger events can be configured on the Match Line Component："Begin Drawing" and "Finish Drawing".

Response events related to the Match Line Component include "Erase Lines," "Edit Line Style" "Enable/Disable Pairing", "Edit the Style of Paired Lines","Enable/Disable Start and End Regions."

<div align="left"><figure><img src="/files/6gDZuzDfMnMSCqi9Cf9w" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/zxz1LaLyqLXe5OpyfZpJ" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">1-1）</mark><mark style="background-color:orange;">**Trigger Event: Begin Drawing**</mark>

It is necessary to select the regions  where you want to start drawing lines (supports single or multiple selection) and set response events.

**The triggering condition is:&#x20;**<mark style="color:red;">**when drawing a line from the selected "start and end regions**</mark>

<mark style="background-color:yellow;">For example, when setting the trigger event as "Begin Drawing," and configuring the Start and End Regions as 1 and 2, with the response event being playing music. Pressing down in region "1" or region "2" to start drawing a line will initiate the playback of music.</mark>

<div align="left"><figure><img src="/files/O4U6DEVVkNehC2G0uZLt" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">1-2）</mark><mark style="background-color:orange;">**Trigger Event: Finish Drawing**</mark>

It is necessary to select "Match or Not Match" and "Pairing Relationship" or "Matching Category" under "Pairing Method"

* If you choose "Match" - "Pairing Relationship" (supports single or multiple selection), also need to choose which specific group or groups of pairing relationships it is
* If you choose "Match" - "Matching Category", also need to select whether the matching category is true or false

<mark style="color:red;">**Note:**</mark> <mark style="color:red;">The true/false here corresponds to the pairing relationship attribute we set in the "Pairing Relationship" section earlier.</mark>  In the \[Draw to home] template, the categories for "Pairs 1->3" and "Pairs 2->4" are true,  "Pairs 1->4" and "Pairs 2->3" are false.

<figure><img src="/files/OBp85x992X4DikMFSf7J" alt=""><figcaption></figcaption></figure>

**The triggering condition is:&#x20;**<mark style="color:red;">**when the selected pairing relationship(s) or matching category completes the drawing of lines.**</mark>&#x20;

**Note:** When multiple pairing relationships are selected or a specific matching category is chosen, the response event will be triggered as soon as <mark style="color:red;">any one of those pairing relationships finishes the drawing of lines.</mark>

<div align="left"><figure><img src="/files/k5STiT7QwsBkK2eMs1JK" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:yellow;">Taking the template "Draw to home" as an example.</mark>&#x20;

<mark style="background-color:yellow;">When setting "Match" -> "Pairing Relationship" -> "Pair 1 -> 3" and the response event is set as "Redirect to the next scene" ：it means that when a line is successfully drawn from region 1 to region 3, it will trigger the event to redirec to the next scene.</mark>

<mark style="background-color:yellow;">When setting "Match" -> "Matching Category" -> "true" and the response event is set as"Redirect to the next scene" ：it means that when</mark> <mark style="background-color:yellow;"></mark><mark style="background-color:yellow;">**either the pairing relationship "1->3" or "2->4"**</mark> <mark style="background-color:yellow;"></mark><mark style="background-color:yellow;">with the category set as true is successfully completed, it will trigger the event to redirec to the next scene.</mark>

<div align="left"><figure><img src="/files/UI6kW6PAO31e9ksZUPKo" alt=""><figcaption></figcaption></figure></div>

* If you choose "Not Match",you can directly add the corresponding response event.&#x20;

**The triggering condition is: &#x20;**<mark style="color:red;">**when drawing starts and the finger is released outside of any pairing relationship region, indicating a non-match.**</mark>

## ![](/files/TkJmHkpID6MGMsP4UbwE)

<mark style="background-color:yellow;">Taking the template "Draw to home" as an example.</mark>&#x20;

<mark style="background-color:yellow;">When setting the trigger event as "Finish Drawing," with "Not Match" selected, and the response event as "Redirect to the next scene."  In the provided material, as regions 1, 3, and 4 have pairings, starting to draw in region 1 and releasing the line outside regions 3 and 4 is considered "Not Match," triggering a redirect to the next scene.</mark>

<figure><img src="/files/YShVTIlOe8kMVT3KHKJQ" alt=""><figcaption></figcaption></figure>

<mark style="color:red;">**Note:**</mark>**&#x20;The difference between "Matching Category - False" and "Not Match"**

"Matching Category **-**&#x46;alse": It is a type of "Pairing Relationship" (e.g., Pair 1 -> 4 in the template). "

Not Match": It does not include any specific "Pairing Relationship" (e.g., Pair 1 -> 2 in the template).

#### <mark style="background-color:orange;">2-1）Response Event</mark><mark style="background-color:orange;">**:**</mark> <mark style="background-color:orange;"></mark><mark style="background-color:orange;">Erase Lines</mark>

Select the "Pairing Relationship" to be erased.&#x20;

The response of this event is that **the completed lines** within the selected pairing relationship will be erased.&#x20;

<mark style="color:red;">**Note: This response event only applies to "straight lines" ,not to "free-hand drawings."**</mark>

<div align="left"><figure><img src="/files/2F1PJmSCYqElp3TjPNZo" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">2-2）Response Event</mark><mark style="background-color:orange;">**:**</mark>  <mark style="background-color:orange;"></mark><mark style="background-color:orange;">Edit Line Style</mark>

Select the "Region" that you want to modify. Then set the line style.

The response of this event is that the lines starting from that region, including those already drawn, will have their styles modified to the specified style.

<mark style="color:red;">**Note:**</mark> <mark style="color:red;"></mark><mark style="color:red;">This response event applies differently to "straight line" and "free-hand drawing"</mark>

* <mark style="color:red;">For "straight line": Both drawn and undrawn lines work.</mark>&#x20;
* <mark style="color:red;">For "free-hand drawing": Only undrawn lines work.</mark>

<div align="left"><figure><img src="/files/fyXfVutrmmHwpMwWpHwh" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">2-3）Response Event</mark><mark style="background-color:orange;">**:**</mark>   <mark style="background-color:orange;"></mark><mark style="background-color:orange;">Edit the Style of Paired Lines</mark>

Select the "Pairing Relationship" to be modified. Then set the line style.

The response of this event is that **the completed lines** within the selected pairing relationship will be modified.&#x20;

<mark style="color:red;">**Note: This response event only applies to "straight lines" ,not to "free-hand drawings."**</mark>

<div align="left"><figure><img src="/files/ReNCzP9p5flotxZRQijZ" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">2-4）Response Event</mark><mark style="background-color:orange;">**:**</mark>   <mark style="background-color:orange;"></mark><mark style="background-color:orange;">Enable/Disable Pairing</mark>

Select the pairing to be enabled/disabled.

* If "Disable" is selected, the response of this event is that the selected pairing relationship can no longer start or finish lines.
* If "Enable" is selected, the response of this event is to cancel the "disabled" status of the pairing.

<div align="left"><figure><img src="/files/u6RcGFKOIVX1cI6OnvmL" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">2-5）Response Event</mark><mark style="background-color:orange;">**:**</mark>   <mark style="background-color:orange;"></mark><mark style="background-color:orange;">Enable/Disable Start and End Regions</mark>

Select the Start and End Regions to be enabled/disabled.

* If "Disable" is selected, the response of this event is that the selected Start and End Regions can no longer initiate drawing lines.
* If "Enable" is selected, the response of this event is to cancel the "disabled" status of the region.

<div align="left"><figure><img src="/files/WrHC2pS1FrJptibGhZ1F" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/component-and-quick-layout/match-lines-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.