Most mobile apps are developed to run across multiple devices, which means developers have to account for multiple screen resolutions. Image scaling is an important part of multi-device support because you want to use higher resolution images on modern, high-res devices, while using lower resolution images on low-res devices. That saves memory on the low-res devices while maximizing all of the pixel density goodness on the high-res devices. Lucky for Corona SDK developers, Corona makes image scaling a breeze with their dynamic image selection feature.

In this tutorial I’m going to go over how to implement dynamic image selection using Texture Packer and Corona to easily scale your images across multiple devices. If you haven’t already downloaded Texture Packer, go and download the free trial. Texture Packer easily creates sprite sheets for multiple game engines and they also automatically scale sprite sheets for Corona SDK.

Drag your Images into Texture Packer

I’m using a Tuscan Knight image that I found at open game art, so you can download that to follow along.

In this first step we find our knight images, which are in the /Isometric/Idle folder and drag them over into Texture Packer. Also make sure that the Texture Packer data format setting at the top left of the screen is set to Corona SDK.

Configure Auto-SD Settings

Click the AutoSD cog in the left hand panel to bring up the Auto-SD Settings panel. Once that pops up, click on corona@2x and hit Apply. This is done so that Texture Packer will create two sprite sheets. One at full size and one at half-size.

Name your Files

You need to include {v} in your file names as a placeholder for the variant identifier, which is 2x in this case.

Export the Sprite Sheet

Click the Publish button and export your sprite sheets and corresponding .lua files. There should be 4 total files which in this example are knight.lua, knight.png, knight@2x.lua and knight@2x.png.

Create a Corona Project

Create a new project in Corona and add the two .png files and two .lua files that were generated by Texture Packer. You’ll also want to create a main.lua file and config.lua file.

The Config File

https://gist.github.com/codepaladin/f17194932197ea3aa91e

They key to image scaling is the .config file, and you can read more about what a config file handles over on the official Corona site. The config file that I’m using was taken from Corona’s tutorial on modernizing the config.lua file:

What the config file does here is tell Corona to use the larger sprite sheet, or the “@2x” .png file on devices that have a screen width greater than 1040 pixels. The smaller base .png file will be used on any devices that have a screen width less than 1040 pixels.

Displaying Images

https://gist.github.com/codepaladin/b202d45864ba6a886cc6

Here we draw an animated knight sprite to the screen based off of the sprite sheets that Texture Packer created. Corona automatically handles which sprite sheet to use based on the device you’re using.

So if you’re on an iPhone 5, the display will look like:

And if you’re on an iPad Retina, the display will look like:

The images look similar, but they’re actually taken from different sprite sheets as you can see by the image with the 2x on it. The iPhone will use less memory since it loads in a smaller image. The iPad uses more memory, but it has more clarity due to the greater pixel density.

Files for this tutorial can be downloaded on GitHub.