How to Layer, Move and Bring Graphics to Front

Using the Corona SDK to Manipulate Graphics

Getty Images /

The key component of creating, manipulating and managing graphics in the Corona SDK is the display object.  Not only can this object be used to display an image from a file, perhaps just as importantly, it allows you to group your images together.  This lets you move a whole set of graphics around the screen at once and layer graphics on top of each other.

This tutorial will teach you the basics of using display groups to organize the graphical objects in your project. This will be demonstrated by creating two different layers, one representing the normal screen and another representing a ​modal layer to placed on top of it. In addition to layering the graphics, we'll also use the transition object to move the entire ​modal group.

Note: In order to follow along with this tutorial, you will need two images: image1.png and image2.png.  These can be any images you choose, but the tutorial will work best if you have images around 100 pixels by 100 pixels.  This will allow you to easily see what is happening to the images.

To get started, we'll open a new file called main.lua and begin building our code:

 displayMain=display.newGroup(); displayFirst=display.newGroup(); displaySecond=display.newGroup(); global_move_x=display.contentWidth/5; 

This section of code sets up our ui library and declares through display groups: displayMain, displayFirst and displaySecond. We'll use these to first layer our graphics and then move them.  The global_move_x variable is set to 20% of the display's width so we can see the movement.

 function setupScreen()     displayMain:insert(displayFirst);     displayMain:insert(displaySecond);     displayFirst:toFront();     displaySecond:toFront();     local background=display.newImage("image1.png",0,0);     displayFirst:insert(background);     local background=display.newImage("image2.png",0,0);     displaySecond:insert(background); end 

The setupScreen function demonstrates how to add display groups to the main display group. We also use the toFront() function to set up the different graphic layers, with the layer we want on top all of the time declared last.

In this example, it is not really needed to move the displayFirst to the front since it will default to being below the displaySecond group, but it is good to get into the habit of explicitly layering each display group. Most projects will end up with more than two layers.

We've also added an image to each group.  When we start the app, the second image should be on top of the first image.

function screenLayer()     displayFirst:toFront(); end 

We've already layered our graphics with the displaySecond group on top of the displayFirst group.  This function will move displayFirst to the front.  

function moveOne()     displaySecond.x=displaySecond.x+global_move_x; end 

The moveOne function will move the second image to the right by 20% of the screen width.   When we call this function, the displaySecond group will be behind the displayFirst group.

function moveTwo()     displayMain.x=displayMain.x+global_move_x; end 

The moveTwo function will move both images to the right by 20% of the screen width.  However, instead of moving each group individually, we'll use the displayMain group to move them both at the same time.  This is a great example of how a display group that contains multiple display groups can be used to manipulate many graphics at once.   

 setupScreen(); timer.performWithDelay(1000,screenLayer); timer.performWithDelay(2000,moveOne); timer.performWithDelay(3000,moveTwo); 

This last bit of code demonstrates what happens when we run these functions.  We'll use the timer.performWithDelay function to fire off the functions each second after the app is launched.  If you are unfamiliar with this function, the first variable is the time to delay expressed in milliseconds and the second is the function we want to run after that delay.   

When you launch the app, you should have image2.png on top of image1.png.  The screenLayer function will fire and bring image1.png to the front.  The moveOne function will move image2.png out from under image1.png, and the moveTwo function will fire last, moving both images at the same time.  

It's important to remember that each of these groups could have dozens of images in them.  And just as the moveTwo function moved both images with one line of code, all images within a group will take the commands given to the group. 

Technically, the displayMain group could have both display groups and images contained within it.  However, it is a good practice to let some groups like displayMain act as containers for other groups without any images in order to create better organization.

This tutorial makes use of the display object.  Learn more about the display object.