# Draw Lines Component

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

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

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

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

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

####

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

* Currently, both "**Template Content Creation**" and "**Blank Canvas**" support the use of the "Draw 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 draw lines gameplay from scratch.
* Based on the existing 「Draw Lines Component」 ,you can adjust the template's drawable area, line style, and other related settings.
* <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;">📒Draw Lines Component Sample Cases</mark>

The "Draw Lines Component" is suitable for gameplay where lines can be freely drawn within a designated area. Using the "Draw Lines Component" you can draw lines within a specified area and trigger various effects based on the lines.

* Sample1 - [Draw to kill](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%252F20001138%252F12638%252Fpv%252F24%252F08%252F12%252F66b9a925b825c%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%E7%A0%B8%E5%AE%83\&language=undefined)
* Sample2 - [Draw to help](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%252F20001137%252F12633%252Fpv%252F24%252F04%252F08%252F6613b8d975a19%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%95%91%E5%AE%83\&language=undefined)
* Sample3 - [Draw Bridge](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%252F20001166%252F12705%252Fpv%252F24%252F04%252F03%252F660ccbecb1ce3%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%E9%80%9A%E8%BD%A6\&language=undefined)
* Sample4 - [Copy drawing](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%252F20001312%252F13021%252Fpv%252F24%252F06%252F03%252F665d8362e6f54%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E4%B8%B4%E6%91%B9%E7%94%BB%E5%9B%BE\&language=undefined)

####

## <mark style="color:blue;">📒Draw Lines Component Instruction</mark>

The adjustable parameters of  「Draw Lines Component」  are divided into three parts: "Exterior", "Line", and "Event".

We will combine the template ["Draw to help"](http://tinyurl.com/bdcm78r2) to provide instructions for using the 「Draw Lines Component」&#x20;

### 1.Exterior

* **\[Show\&Hide] Separate Setting：**&#x53;ame as appearance parameters for each layer. You can adjust whether the 「Draw Lines Component」 is displayed separately in landscape/portrait mode.
* **Position\&Size：**&#x59;ou can modify the width, height, and position of the 「Draw Lines 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  「Draw Lines Component」.
* **Scale：**&#x53;ame as appearance parameters for each layer, you can adjust the scale ratio of the  「Draw Lines Component」.

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

### 2.Line

The "Line" parameter includes two parts: "Line Style" and "Rigidbody Type"

#### 1）Line Style

* You can set the color and thickness of the drawn lines.&#x20;
* Clicking on "Preview Line" allows you to preview the set line styles directly on the canvas.

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

#### 2）Rigidbody Type

The Rigidbody Type can define whether the drawn lines have physical properties.There are four types to choose from:

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

* Non-rigid Body: Non-rigid Body objects do not have physical properties and are only displayed as images.
* Static Rigidbody: Static bodies have physical properties and can collide with other bodies but remain stationary themselves, such as walls, floors, etc., which are considered "Static Bodies."
* Dynamic Rigidbody: Objects with mass that move under external forces, following Newton's laws of motion, can collide with other types of bodies and change their velocity, such as freely falling balls.
* Kinematic Rigidbody: Objects that move at a constant velocity without considering force or mass, colliding with "Dynamic Bodies," such as balls moving at a constant speed.

<mark style="background-color:yellow;">Note: In the "Draw to help" template, adjusting the Rigidbody Type is not currently supported.</mark>

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

### 3.Event

Two types of **trigger events** can be configured on the Draw Lines Component："Begin Drawing" and "Finish Drawing".

**Response events** related to the Draw Lines Component include "Erase Lines," "Edit Line Style" "Enable/Disable Draw Lines Component", "Create a rigid body after drawing the lines."

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

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

Set "Begin Drawing" and add the desired response events.&#x20;

**Trigger condition:** <mark style="color:red;">**When the player starts drawing a line.**</mark>

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

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

Set "Drawing Complete" and add the desired response events.&#x20;

**Trigger condition:&#x20;**<mark style="color:red;">**When the player completes drawing a line.**</mark>

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

#### <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>

The response result of this event is that drawn lines are erased.

<div align="left"><figure><img src="/files/zrfKlERK58lmeWKRQXCb" 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>

The response result of this event is that the lines drawn by the component are modified to the specified style.

<mark style="color:red;">**Note: This response event is effective for undrawn lines only.**</mark>

<div align="left"><figure><img src="/files/dQFwk7oV25zIPKS8aF73" 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;">Enable/Disable Draw Lines Component</mark>

Choose to enable/disable the component.

* If "Disable" is selected, the response result of this event is that the component can no longer start or end drawing lines.
* If "Enable" is selected, the response result of this event is to cancel the "Disable" state.

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

<mark style="background-color:orange;">**2-4）Response Event: Create a rigid body after drawing the lines**</mark>

The response result of this event is that lines are converted into bodies based on the selected "Rigidbody Type."

<div align="left"><figure><img src="/files/JfihSkayBETeR8mUg4rM" 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/draw-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.