Corona SDK Tutorial: How to Work With Rectangles

When creating a rectangle in Corona SDK we must use the function newRect of the display object. This function takes four parameters (integers) in this order:

• left corner (x-coordinate)
• top (left) corner(y-coordinate)
• width
• height

 

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 lets work on the main.lua file. We can store the rectangle in a variable and use that variable later to change other properties of that rectangle like the fill color, the stroke color and the width of the stroke.

Let’s make a rectangle called “rectangle_variable_name” with the top left corner at (100,200), a width of 150, and a height of 100.

--local nameofrectangle = display.newRect(left-x-coordinate,top-y-coordinate,width,height)
local rectangle_variable_name = display.newRect(100,200,150,100)

The default color of the rectangle is white, let’s change the color to green 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

--nameofrectangle:setFillColor(Red, Green, Blue)
rectangle_variable_name:setFillColor(0,250,0)

The full code for the rectangle is

local rectangle_variable_name = display.newRect(100,200,150,100)
rectangle_variable_name:setFillColor(0,250,0)

We can also add a stroke, and color to that stroke to the rectangle we just created with these two fucntions

--nameofrectangle.strokeWidth = any_interger
rectangle_variable_name.strokeWidth = 5
--nameofrectangle:setStrokeColor(Red,Green,Blue)
rectangle_variable_name:setStrokeColor(180,0,200)

The full code for the rectangle is

local rectangle_variable_name = display.newRect(100,200,150,100)
rectangle_variable_name:setFillColor(0,250,0)
rectangle_variable_name.strokeWidth = 5
rectangle_variable_name:setStrokeColor(180,0,200)

You can also create a rounded rectangle by using the function newRoundedRect of the display object. This one, unlike the other one will have one extra parameter.

• left corner (x-coordinate)
• top (left) corner(y-coordinate)
• width
• height
• corner radius **new**

The code for this new rounded rectangle will be

--local nameofRoundedRectangle = display.newRoundedRect(left-x-coordinate,top-y-coordinate,width,height, radiusOfCorners)
local rounded_rectangle_variable_name = display.newRoundedRect(100,200,150,100,12)
rounded_rectangle_variable_name:setFillColor(0,250,0)
rounded_rectangle_variable_name.strokeWidth = 5
rounded_rectangle_variable_name:setStrokeColor(180,0,200)

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

local rounded_rectangle_one = display.newRoundedRect(100,150,150,100,12)
rounded_rectangle_one:setFillColor(0,250,0)
rounded_rectangle_one.strokeWidth = 5
rounded_rectangle_one:setStrokeColor(180,0,200)

local rectangle_one = display.newRect(0,0,160,400,3)
rectangle_one:setFillColor(50,250,100)
rectangle_one.strokeWidth = 1
rectangle_one:setStrokeColor(100,50,250)

local rectangle_three = display.newRect(0,20,300,100,12)
rectangle_three:setFillColor(250,0,0)
rectangle_three.strokeWidth = 5
rectangle_three:setStrokeColor(0,0,200)

local rounded_rectangle_two = display.newRoundedRect(50,100,80,70,25)
rounded_rectangle_two:setFillColor(180,180,0)
rounded_rectangle_two.strokeWidth = 10
rounded_rectangle_two:setStrokeColor(90,150,250)

local rectangle_two = display.newRect(80,300,150,100,12)
rectangle_two:setFillColor(50,0,0)
rectangle_two.strokeWidth = 5
rectangle_two:setStrokeColor(180,0,200)