Time for action – placing images on screen

We're finally getting into the visually appealing part of this chapter by starting to add in display objects using images. We don't have to refer to the terminal window for now. So, let's focus on the simulator screen. We'll begin by creating a background image and some art assets by performing the following steps:

  1. First off, create a new project folder on your desktop and name it Display Objects.
  2. In the Chapter 2 Resources folder, copy the glassbg.png and moon.png image files and the config.lua file into your Display Objects project folder.
  3. Launch your text editor and create a new main.lua file for your current project.
  4. Write out the following lines of code:
    local centerX = display.contentCenterX
local centerY = display.contentCenterY

local background = display.newImage( "glassbg.png", centerX, centerY, true)
local image01 = display.newImage( "moon.png", 160, 80 )

local image02 = display.newImage( "moon.png" )
image02.x = 160; image02.y = 200


image03 = display.newImage( "moon.png" )
image03.x = 160; image03.y = 320

    The background display object should contain the filename of the background image in your project folder. For example, if the background image filename is called glassbg.png, then you would display the image like so:

    local background = display.newImage( "glassbg.png", centerX, centerY, true)

    Using image02.x = 160; image02.y = 200 is the same as the following lines of code:

    image02.x = 160
image02.y = 200

    The semicolon (;) indicates the end of a statement and is optional. It makes it easier to separate two or more statements in one line and saves adding extra lines in your code.

  5. Save your script and launch your project in the simulator.

    Note

    If you're using Corona SDK on a Mac OS X, the default device is the iPhone. If you're using Windows, the default device is the Droid.

  6. You should see a background image and three other display objects of the same image, as shown in the following screen. The display results will vary depending on which device you use to simulate.
    Time for action – placing images on screen

The display objects for the image01, image02, and image03 variables should contain the moon.png filename. The filenames in your code are case sensitive, so make sure that you write it exactly how it displays in your project folder.

What just happened?

Currently, background is scaled to fit within the device screen height and width using contentCenterX and contentCenterY. The image centered at its local origin since no top or left (x or y) coordinates were applied. It is also set to full resolution because we specified true in the display object.

When you observe the placement of image01, image02, and image03 in the simulator, they're practically in line with each other vertically, though the script styles for image01 versus image02/image03 are written differently. This is because the coordinates for image01 are based on the (left, top) coordinates of the display object. You can optionally specify that the image's top-left corner be located at the coordinate (left, top); if you don't supply both coordinates, the image will be centered about its local origin.

The placement of image02 and image03 are specified from the local origin of the display object and positioned by the local values of the x and y properties of the device screen. The local origin is at the center of the image; the reference point is initialized to this point. Since we didn't apply (left, top) values to image02 and image03, further access to x or y properties are referred to the center of the image.

Now, you've probably noticed that the output from the iPhone 4 looks fine and dandy, but the output from the Droid shows that the background image displays at full resolution, while the other objects are lower down the screen. We see that all the objects we specified are there, but the scaling is off. That is because each iOS and Android device has a different screen resolution. The iPhone 4 has a screen resolution of 640 x 960 pixels, and the Droid has a screen resolution of 480 x 854 pixels. What may look fine on one type of device may not look exactly the same on a different one. Don't worry; there is a simple solution to fix all this using a config.lua file that will be discussed in the next couple of sections.

Have a go hero – adjusting display object properties

Now that you know how to add images to the device screen, try testing out the other display properties. Try doing any of the following:

Reference the display properties mentioned earlier in this chapter if you're unsure how to do any of the preceding adjustments.