When submitting an image in Corona SDK we must use the function newImage of the display object. This function takes two parameters

• filename
• left corner (x-coordinate)
• top (left) corner(y-coordinate)

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 image in a variable and use that variable later to change other properties of that image like its position, and its size. To use this image we must also save it in the same folder as the main.lua file.

Let’s insert an image called “image_variable_name”

--object= display.newImage(filename)
image_variable_name = display.newImage( "testimage.jpg" )

Image inserted with the code above

You can also change the position of the image by inserting two points after the file name separated by a comma. The first point will be the x-coordinate, and the second the y-coordinate. These points will determine the top left corner of the image.

--object= display.newImage(filename, x-coordinate, y-coordinate)
image_variable_name = display.newImage( "testimage.jpg", 160, 240 )

Image with a different x and y coordinate

Another thing you could do with this image is change its size with the function scale of the display object. We will scale this image by half with the following function

--object:scale( fx, sy )
image_variable_name:scale( .5, .5)

The first .5 represents the factor by which the x direction is scaled, the same thing goes for the second number, but this one represents the y direction. In this example the image was scaled by a factor of 50%, if you wanted to scale it by a factor of 200% you could have used a 2 instead of a .5

The full code for this scaled image will be.

image_variable_name = display.newImage( "testimage.jpg", 0, 0 )
image_variable_name:scale( .5, .5)

Scaled image with the code above

Now, to rotate the image you are going to use the function rotate of the display object. We are going to rotate this image at a 130 degree angle with the following function

--object:rotate( Angle(+ or -) )
image_variable_name:rotate( 130 )

The full code for the rotated image is.

image_variable_name = display.newImage( "testimage.jpg", -100, 0 )
image_variable_name:scale( .5, .5)
image_variable_name:rotate( 130 )

Rotated Image from the code above

fisherman1 = display.newImage( "testimage.jpg", -100, 0 )
fisherman1:scale( 2, 2)
fisherman1:rotate( 180 )

fisherman2 = display.newImage( "testimage.jpg", -100, 0 )
fisherman2:scale( 1, 1)
fisherman2:rotate( 160 )

fisherman3 = display.newImage( "testimage.jpg", -100, 0 )
fisherman3:scale( .5, .5)
fisherman3:rotate( 140 )

fisherman4 = display.newImage( "testimage.jpg", -100, 0 )
fisherman4:scale( .4, .4)
fisherman4:rotate( 120 )

fisherman5 = display.newImage( "testimage.jpg", -100, 0 )
fisherman5:scale( .3, .3)
fisherman5:rotate( 100 )

fisherman6 = display.newImage( "testimage.jpg", -100, 0 )
fisherman6:scale( .2, .2)
fisherman6:rotate( 80 )

fisherman7 = display.newImage( "testimage.jpg", -100, 0 )
fisherman7:scale( .1, .1)
fisherman7:rotate( 60 )

Same image copied and rotated several times

When creating text in Corona SDK we must use the function newText of the display object. This function takes four parameter

• string
• left corner (x-coordinate)
• top (left) corner(y-coordinate)

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 text in a variable and use that variable later to change other properties of that text like the color, size, and font.

In our text, the coordinates that we give it are for the top left corner. Now let’s make a text called “text_variable_name” with the top left corner at (160,240).

--local nameoftext = display.newText(string,left-x-coordinate,top-y-coordinate)
local text_variable_name = display.newText("WebHole", 160, 240)

White text from the code above

I created two white lines to point at this coordinate however, they are not necessary.

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

• amount of red
• amount of green
• and amount of blue

--nameoftext:setTextColor(Red, Green, Blue)
text_variable_name:setTextColor(255,0,0)

The full code for the text is

local text_variable_name = display.newText("WebHole", 160, 240)
text_variable_name:setTextColor(255,0,0)

Red text from the code above

Now we will change the size of our text. For our next example we will create two different variable names of different colors to see the difference in size. To change the size we will add two more parameter to the

display.newText

function, one will be the font, and the other will be the size which we will set to 30.

--local nameoftext = display.newText(string,left-x-coordinate,top-y-coordinate,font,size)
local Green_Text = display.newText("WebHole", 160, 240,native.systemFont,30)
Green_Text:setTextColor(0, 250, 0)
local Red_Text = display.newText("WebHole", 160, 240)
Red_Text:setTextColor(250, 0, 0)

Increasing the size of the text from our original text

When you entered this code you noticed that the font size changed diagonally, and the coordinate of the top left corner stayed where we placed it. In our next example we have the function

nameoftext.size = number

that will also change the size of the text however, the size will grow in all directions(not diagonally like in our previous example).We will color this new text yellow.

local Yellow_Text = display.newText("WebHole", 160, 240,native.systemFont)
Yellow_Text:setTextColor(250, 250, 0)

--nameoftext.size = number
Yellow_Text.size = 30

local Red_Text = display.newText("WebHole", 160, 240)
Red_Text:setTextColor(250, 0, 0)

New text compared to the previous ones

local nameoftext = display.newText(string,left-x-coordinate,top-y-coordinate,font,size)

and then increase the size outward by adding a number in the function

nameoftext.size = number

. Another function we could use with the text function is nameoftext.text = string. And instead of typing a string inside the " " in the

display.newText

function, we will type it in for the string in

nameoftext.text = string

. This will cause the x and y coordinates you choose to be in the center of your text, not in the top left corner.

local Green_Text = display.newText("", 160, 240)
Green_Text:setTextColor(0, 250, 0)

--nameoftext.text = string
Green_Text.text = "WebHole"

local Red_Text = display.newText("WebHole", 160, 240)
Red_Text:setTextColor(250, 0, 0)

With our new function, the x and y coordinates of the green text you chose are in the center of your text, not in the top left corner.

local Yellow_Text = display.newText("WebHole", 160, 240,native.systemFont,50)
Yellow_Text:setTextColor(250, 250, 0)

Yellow_Text.size = 30

local Green_Text = display.newText("", 160, 240,native.systemFont,50)
Green_Text:setTextColor(0, 250, 0)

Green_Text.size = 60
Green_Text.text = "WebHole"

local Red_Text = display.newText("WebHole", 160, 240)
Red_Text:setTextColor(250, 0, 0)

Different types of text grouped.

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)

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

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 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 from the code above

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

Make a Circle

To make a circle in Corona SDK we use the function newCircle of the display object. This function takes three parameters in this order.:

• the x coordinate for the center
• the y coordinate for the center
• the circle’s radius

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 circle in a variable and use that variable later to change other properties of that circle like color for example.

Let’s make a circle called “circle_variable_name” with the center at (160,240) and a radius of 50.

--local nameofcircle = display.newCircle( x-cordinate, y-cordinate, radius )
local circle_variable_name = display.newCircle(160,240,50)

The result from the code above

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

--nameofcircle:setFillColor(Red,Green,Blue)
circle_variable_name:setFillColor(250, 0, 0)

The full code for the circle is this

local circle_variable_name = display.newCircle(160,240,50)
circle_variable_name:setFillColor(250, 0, 0)

the result from the code above

We can also add a stroke, and color to that stroke, to the circle just created with these two functions

--nameofcircle.strokeWidth = any_interger
circle_variable_name.strokeWidth = 3
--nameofcircle:setStrokeColor(Red,Green,Blue)
circle_variable_name:setStrokeColor(0,250,0)

The full code for the circle is

local circle_variable_name = display.newCircle(160,240,50)
circle_variable_name:setFillColor(250, 0, 0)
circle_variable_name.strokeWidth = 3
circle_variable_name:setStrokeColor(0,250,0)

Red circle with green stroke

Now to create more than one circle you simply create different variable names like in the following example

local circle = display.newCircle(160,240,50)
circle:setFillColor(100,190,0)

local circle1 = display.newCircle(100,150,30)
circle1:setFillColor(100,90,190)

local circle2 = display.newCircle(160,400,90)
circle2:setFillColor(250,30,190)

Different colored circles