Corona SDK Tutorial: How To Work With Lines

When we create a line in Corona SDK we must use the function newLine of the display object, takes four parameters in this order:

  • first x-coordinate (x1)
  • first y-coordinate(y1)
  • second x-coordinate(x2)
  • second y-coordinate(y2)
where the first set of x1 and y1 define where the line starts and the next set (x2,y2) define where it ends.

config.lua

First let’s make a config file to set the screen size.

application =
{
     content =
     {
        width = 320,
        height = 480,
        scale = "zoomEven"
      }
}

main.lua

Now we will work on the main.lua file. We will store the line in a variable and use that variable later to change other properties of it like the color, the width of the line, length of the line and the number of extra segments connected to that line.

Let’s make a line called “line_variable_name” with the coordinates at (170,400)  &  (200,300)

--local nameofline = display.newLine(x1, y1, x2, y2)
local line_variable_name = display.newLine(170, 400, 200, 300)
white line

White line from code above

The default color of the line is white, let’s change the color to blue using the setFillColor function. The setFillColor function also needs three parameters which range from 0 to 250 in this order:

  • amount of red
  • amount of green
  • and amount of blue
--nameofline:setColor(Red, Green, Blue)
line_variable_name:setColor(0, 0, 250)

The full code for the colored line is

local line_variable_name = display.newLine(170, 400, 200, 300)
line_variable_name:setColor(0, 0, 250)
blue line

Blue line from code above

We can also change the width of the line with this function: 

--nameofline.width = number
line_variable_name.width = 10

The full code for the colored line with a different width is

local line_variable_name = display.newLine(170, 400, 200, 300)
line_variable_name:setColor(0, 0, 250)
line_variable_name.width = 10
thick blue line

Thick blue line from the code above

You can also append another segment to the line we just created by adding at least one x and y coordinate like in the following function

--nameofline:append(x,y[x2,y2,x3,y3,xn,yn])
line_variable_name:append(160,240)

The full code for our line with an additional segment is:

local line_variable_name = display.newLine(170, 400, 200, 300)
line_variable_name:setColor(0, 0, 250)
line_variable_name.width = 10
line_variable_name:append(160, 240)
two blue lines attached

Blue line with one segment attached

We can also more than one segment to the original line.

local line_variable_name = display.newLine(170, 400, 200, 300)
line_variable_name:setColor(0, 0, 250)
line_variable_name.width = 10
line_variable_name:append(160, 240, 300, 45, 91,480, 10, 450, 160, 0)
Blue Line With Segments Attached

Blue line with segments attached from the code above

You can also create more than one line at a time by adding different variable names like in our following example:

local blue_line= display.newLine(170, 400, 200, 300)
blue_line:setColor(0, 0, 250)
blue_line.width = 10
blue_line:append(160, 240, 300, 45, 91,480, 10, 450, 160, 0)

local red_line= display.newLine(170, 400, 200, 300)
red_line:setColor(250, 0, 0)
red_line.width = 5
red_line:append(120, -43, 260, 5, 51, 440, -30, 450, -150, 0, 320, 480)

local green_line= display.newLine(170, 400, 200, 300)
green_line:setColor(0, 250, 0)
green_line.width = 15
green_line:append(0, 0, -300, 45, -10, -450, -160, 0, 10, 56, 79, -20, 90, 78)
Different Line Segments

Different line segments from the code above