Corona SDK Tutorial: How To Add Images

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

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 )

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)

One thing you might have noticed is that when you scaled the image the top left corner is not where you told it to be, to fix this you are going to have to play with the numbers.

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 )

Adding a positive angle will cause the image to rotate clockwise, and adding a negative angle will cause it to rotate counter clock wise. You can also repeat the same image more than one time, there are times when you do not need to rename the image you repeated, but for this example we will in case we want to change the properties of only that image.

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 )