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)
White Rectangle on Mobile application

White rectangle from the code above

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)
Green Rectangle for Mobile Application

Green rectangle from the code above

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)
Green Rectangle with Stroke for Application

Green rectangle with purple stroke

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)
Green Rounded Rectangle

Green rectangle with round corners

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)
Group of Rectangles

Group of Rectangles

blog comments powered by Disqus