image-swapSometimes, the design of an app dictates the need for “image swapping,” in which the developer needs to draw an image at a given location and then, after some time or some action, swap that image for another. Here’s a theoretical example:

But this is not how Corona SDK works as :swapImage() is not a built-in Corona method. When Corona builds an image, it has to read the file in from the app bundle’s file system, allocate texture memory for the image, render the PNG or JPG compressed data into four color channels, and return a display object to you to work with. To “swap” that image, Corona would need to destroy the object in question and create a new image. It’s the same amount of work required in this example:

In this scenario, you’re probably not planning on using the first image again soon, since the original image was destroyed. The advantage to this method is that it minimizes texture memory, since only one of the two images is in memory at once. However, if you want to get the original image back, you’re caught in this cycle of image loading and unloading over and over. In itself, this is an inefficient process that can impact performance. Thus, if you need to swap images more frequently, you should explore other techniques. Let’s look at a few options.

The 2-Image Swap

If you have two images, you can simply load them both, add them to a display group, and reference the images as parameters of the group. In this example we will use a typical touch handler and swap the image in the “began” phase of touch handler:

In this case, we load two images: redBall and blueBall. We position them at the same location, making one visible and the other not. We also set an attribute on the group (whichBall) so we know which is the visible image. Now for the touch handler:

Let’s focus in on the swapping code in the began phase:

If the touch begins, and the ball is red, we make that image invisible, make the blue ball visible, and note which is the “current” image. Because the move code is on the group, not the individual images, the images move together as a unit.

Graphics 2.0 Fill Swap

If you’re a Pro or Enterprise subscriber, you can take advantage of the Graphics 2.0 fill methods to swap images:

This method eliminates the need for the display group — just create the base image (in this case a rectangle the size of our images), position it, and fill it with the red image “paint.” Now, in the touch handler, which is now on the object itself since we eliminated the group, the code is a bit simpler. Just remember that t in this example is the or the ball object.

Multi-Image Swap

Sometimes you’ll want to swap more than two images. For a game like Candy Crush or Bejeweled, you may want to have several images that occupy a spot on the screen and quickly change among them. In this case, we can go back to the group model, load all of the images into an array, and access them via their index number:

Here, we iterate through the ballImages table to create the display objects, storing them in the balls table as we go along, and make each one invisible. Then, we make the first one “current” and visible again. Now, to manage the swapping in a cyclical manner, we can execute this code:

While this method is perfectly valid, using individual image files is not the best use of memory and load time. This is why we encourage the use of image sheets, in which you load a single image “sheet” containing all of the individual images, and load them from that sheet. Image sheets take a little more initial setup, but the the benefits are well worth it. Converting the above code to image sheets may look as follows:

From a code perspective, this is not much different from the array method above, other than the efficiencies gained from using image sheets — but image sheets are a gateway to an excellent way swap images: sprites.


Corona features a comprehensive sprite engine. While the name “sprite” may seem to indicate only an animated character or object in a game, you should consider it as simply a series of images which can be used for multiple purposes, including swapping images. Let’s look at the sprite-based version which builds upon the image sheet version above:

Like the version using Graphics 2.0 fills, we no longer need the display group since the sprite is, by definition, a multi-frame object than can reside in any group by itself. Once the image sheet is set up and the sequence defined (all eight frames), simply call display.newSprite() with the image sheet and the sequence data. Next, use the :setFrame() method to pick which frame to display and the sprite engine handles the rest — no need to make other images invisible as in some of the other examples.

In Summary

As you can see, there are various approaches and methods to the “swap images” concept, and it depends on your needs and design specifics as to which method is most suitable. To experiment with the concepts discussed in this tutorial, please download the sample project and get started.

Source article – 

Tutorial: Techniques for Swapping Images