Dynamic resolution images

Earlier, we touched base with dynamic image resolution. The iOS devices are a perfect example for this case. Corona has the capability to use base images (for devices on the 3GS and lower) and double-resolution images (for the iPhone 4 that has a retina display), all in the same project file. Any of your double-resolution images can be swapped to your high-end iOS device without having to alter your code. This will allow your build to work with older devices and lets you handle more complex multiscreen deployment cases. You will notice that dynamic image resolution works in conjunction with dynamic content scaling.

Using the line, display.newImageRect( [parentGroup,] filename [, baseDirectory] w, h), will call out your dynamic resolution images.

Here, w refers to the content width of the image and h refers to the content height of the image.

Here is an example:

myImage = display.newImageRect( "image.png", 128, 128 )

Remember that the two values represent the base image size, not the onscreen position of the image. You must define the base size in your code so that Corona knows how to render the higher resolution alternative images. The contents of your project folder would be set up like this:

My New Project/    name of your project folder
  Icon.png         required for iPhone/iPod/iPad
  Icon@2x.png      required for iPhone/iPod with Retina display
  main.lua
  config.lua
  myImage.png      Base image (Ex. Resolution 128 x 128 pixels)
  myImage@2x.png   Double resolution image (Ex. Resolution 256 x 256 pixels)

When creating your double-resolution image, make sure that it is twice the size of the base image. It's best that you start with the double-resolution image when creating your display assets. Corona lets you select your own image-naming patterns. The @2x convention is one example that can be used, but you have the option of naming suffixes to your personal preference. For now, we'll use the @2x suffix since it distinguishes the double resolution reference. When you create your double-resolution image, name it with the @2x suffix included. Take the same image and resize it to 50 percent of the original size and then use the same filename without the @2x suffix included.

Other examples of naming suffixes can be as follows:

As mentioned earlier in the chapter, you have to define your image suffix for your double-resolution images in the imageSuffix table in your config.lua file. The content scale you set will allow Corona to determine the ratio between the current screen and base content dimensions. The following example uses the @2x suffix to define double-resolution images:

application =
{
  content =
  {
    width = 320,
    height = 480,
    scale = "letterbox",

    imageSuffix =
    {
      ["@2x"] = 2,
    },
  },
}

Time for some shapes

Another way of creating display objects is using vector objects. You can use vector objects to create shapes such as a rectangle, rounded rectangle, and circle using the following functions:

• display.newRect([parentGroup,] x, y, width, height): This creates a rectangle using width by height. The x and y values determine coordinates for the center of the rectangle. Local origin is at the center of the rectangle, and the anchor point is initialized to this local origin.
• display.newRoundedRect([parentGroup,] x, y, width, height, cornerRadius): This creates a rounded rectangle using width by height. The x and y values determine coordinates for the center of the rectangle. The local origin is at the center of the rectangle, and the anchor point is initialized to this local origin. You can round off the corners using cornerRadius.
• display.newCircle([parentGroup,] xCenter, yCenter, radius): This creates a circle using the radius centered at xCenter, yCenter.

Applying stroke width, fill color, and stroke color

All vector objects can be outlined using strokes. You can set the stroke width, fill color, and stroke color using the following methods:

• object.strokeWidth: This creates the stroke width in pixels
• object:setFillColor(red, green, blue, alpha): We can use the RGB codes between 0 and 1. The alpha parameter, which is optional, defaults to 1.0
• object:setStrokeColor(red, green, blue, alpha): We can use the RGB codes between 0 and 255. The alpha parameter, which is optional, defaults to 1.0

Here is an example of displaying vector objects using strokes:

local rect = display.newRect(160, 130, 150, 150)
rect:setFillColor(1.0, 1.0, 1.0) 
rect:setStrokeColor(0.1, 0.6, 0.2) 
rect.strokeWidth = 5

You will get on output on the simulator similar to the one shown in the following image: