Draw Various Lines

# Course Introduction

You can draw various lines in the World freely by using LineRendererComponent.

# LineRendererComponent

LineRendererComponent can designate the number of points to draw straight lines and curve lines you want on MapleTile and RectTile. You can draw one line for one LineRendererComponent, so if you want to express several lines, you should use the entity where several LineRendererComponents are included. The main properties are as follows.

#### IsSmooth

It draws smooth curve lines on enable and sharp broken lines on disable. [png](1657956230168af666af68a884bebbd5e2bf9694bc4cd)

#### Loop

On enable, it draws a closed line by connecting the start and end points. The default value is the disabled state. [png](16579562450262b41e742a8cb4ddf835fd8b7db4c87cd)

#### Points

The group of dots that form a line.

  * Click the Points Edit: [Edit] button to activate Edit. You can modify, add, and delete the point location in the Scene.
  * Size: Indicates the number of points connecting lines. The number starts from 0, and the points will be added as much as the value you entered for Size.
  * [Numbers]: Refer to the number of connecting points of a line.
  * Color: Specifies the color of the line. When you specify different colors for each Size from one component, the point where the colors are crossed will be mixed up naturally. [png](16944139559805794266b75bd4670835226315bec0354)
  * Position: Indicates the position of the point of connecting lines. You can draw the line upon making at least two positions. You can draw a line by changing the x and y values by setting the first [1] as (0,0) basis.
  * Width: Sets the thickness of the line. A greater number makes the line thicker.  
[png](1657949740811c064ec15791d40c0a2fc0c98dbbf57b6)



# Draw a Line in the World

#### Draw a Straight Line

You can draw straight lines by setting two Points and the Position.

  1.  Create EmptyEntity and add LineRendererComponent.
  2. Enter 3 for Size, and set Color and Width.
  3. Enter (0,0) and (4,0) for each Position. [png](166358584146243474ff4f1644094891eed7a6da66834)



#### Draw Triangle

You can draw triangles by connecting the start and end points by using three Points.

  1.  Create EmptyEntity and add LineRendererComponent.
  2. Enter 3 for Size, and set Color and Width.
  3. Enter (0,0), (1,1), and (2,0) for each Position.
  4. Activate Loop Property. [png](1663844235905ace8de03857e44f1b9c55a8c83d2199d)



#### Draw Shape with Curve Line

You can draw a curve line by using four Points and IsSmooth Property.

  1.  Create EmptyEntity and add LineRendererComponent.
  2. Enter 4 for Size, and set Color and Width.
  3. Enter (0,0), (1,1), (2,-1), and (3,0) for each Position.
  4. Activate IsSmooth and Loop Property. [png](16579497886734ab7d8aba66a4ceab4f245a45535c6cd)



#### Drawing with Material

You can use Material's SpritePattern Shader to draw lines. For questions about how to use the Material, please refer to [Utilizing Material](docs/?postId=828). You can use both user resources and cloned MSW resources as sprites available for LineRendererComponent. To learn how to clone MSW resources, see [Managing Resources](docs/?postId=690).

  1. Select Workspace - MyDesk - Create Material to make a new Material.
  2. In the Properties window of the Material you've created, select Shader - LineRenderer - SpritePattern.
  3. Select the image you'd like to use for SpriteRUID. If necessary, adjust the Offset and Scale values.
  4.  Create EmptyEntity and add LineRendererComponent.
  5. In the MaterialId of LineRendererComponent, press  and specify the Material.
  6. Change the Size and Position values to draw the line. [png](16842378305042dc663a11c3b49eebd58b8804d407e88)



> Tip. Both the user resource and the cloned MSW resource must have their lab mode set to Repeat. [png](168422631874542cfe7bb765e4d659b113e430d223b99)

> Tip. If the number of LinePoints exceeds 10,000, any LinePoints beyond that limit will not be drawn. In addition, using IsSmooth will reduce the total number of LinePoints that can be drawn to approximately 1,000. 

# Use Example

Let us create a model following the player, then make it draw and disappear lines following the player's movement.

[gif](1657952569571be162fe5c3c64716b82f6a51e091f1cc)

  1.  Create Trail model, and add TransformComponent and LineRendererComponent.
  2. Create a new  TrailDrawer component, and add it to the Trail model. 
         
         @Component
         script MovementTrailFader extends Component
         @ExecSpace("ClientOnly")
         method void OnUpdate(number delta)
         self:EraseTail(delta)
         
         local currPos = self.Target.TransformComponent.WorldPosition
         local dist = Vector3.Distance(self.PrevPos, currPos)
         
         if dist < self.Threshold then
             return
         end
         
         self.PrevPos = currPos
         self:AddPoint(currPos)
         end
         
         method void EraseTail(number delta)
         local currPos = self.Target.TransformComponent.WorldPosition
         
         for i = 1, #(self.PointLives) do
             local life = self.PointLives[i]
             life = life - delta
             self.PointLives[i] = life
         end
         
         if #(self.PointLives) == 1 then
             self:RemovePointAt(1)
             self:AddPoint(currPos)
             return
         end
         
         if self.PointLives[1] <= 0 then
             self:RemovePointAt(1)
         end
         end
         
         method void AddPoint(Vector3 pos)
         local line = self.Entity.LineRendererComponent
         local pointPos = Vector2(pos.x, pos.y + 0.25)
         
         -- Draw Random Color
         local r = _UtilLogic:RandomDouble()
         local g = _UtilLogic:RandomDouble()
         local b = _UtilLogic:RandomDouble()
         line.Points:Add(LinePoint(pointPos, Color(r, g, b), 1))
         table.insert(self.PointLives, self.PointLife)
         end
         
         method void RemovePointAt(number idx)
         -- Delete Line
         table.remove(self.PointLives, idx)
         self.Entity.LineRendererComponent.Points:RemoveAt(idx)
         end
         
         method void Init(Entity target)
         self.Target = target
         
         local pos = target.TransformComponent.WorldPosition
         
         self.PrevPos = pos
         
         self:AddPoint(pos)
         end
         end
         



    
    
    3. Create a new  TrailSpawner component and add it to  DefaultPlayer.
    4. To spawn the line following the  TrailSpawner component movement, you should write as below using `SpawnService`. In SpawnByModelId, you should enter the  Trail's ID. If you use the ID in the example, it will not work properly. So please be careful in writing. 
        ```lua
    @Component
    script TrailManager extends Component
        property Entity TrailEntity = nil
    
        @ExecSpace("ClientOnly")
        method void OnBeginPlay()
        self.TrailEntity = _SpawnService:SpawnByModelId("8ae67c69-32ac-40e3-82b1-03d1409be467", "Trail", Vector3.zero, nil)
        self.TrailEntity.TrailDrawer:Init(self.Entity)
        end
    
        method void OnEndPlay()
        if self.TrailEntity ~= nil then
        	self.TrailEntity:Destroy()
        end
        end
    end
    

##### Reference Guide

  * [Utilization of RectTileMap](/docs/?postId=589)
  * [Changing Location, Size, Rotation of Entities](/docs/?postId=82)