Sprites are similar to movieclips but more efficient. Where movieclips use a separate image for each frame of an animation. A sprite uses one single image that contains all of the frames. Mobile devices have limited memory and images take up most of the memory your projects might use. Using a single image where you once had several can dramatically cut down the amount of memory your app may be using.
Sprite Sheets
A sprite sheet is a single image that contains all of the individual images that make up an animated sequence of images. Here’s an example. This image contains three animated images of the saucer (the four spots in the center move). Each individual image is 48pixels wide by 21 pixels tall. I used a transparent png, where the red was transparent, in my original test. I had to fill in the transparent area or you would not be able to see the white image against the page here.
A sprite sheet can have more than one series of images. As a matter of fact you could have all of the images used in your project inside of a single sprite sheet. Note the iPhone has a maximum image size that is can work with. On earlier iPhones the max size is 1024 by 1024 while newer models support up to 2048 by 2048 pixels.
Try it for yourself
The artwork for this example is more difficult to create than the other examples you’ll need to pay close attention to how it is created and sized. You can use the example image above if you like.
- Create a new folder where you will store this project
- Create a new text file and save it to your folder with the name main.lua
- You’ll need an image containing each image of an animated sequence. That’s one image containing all frames of the animated sequence. See the example image above. Keep your images simple at first to avoid trouble.
- Note the height and width of each frame. Each frame should be exactly the same size. (this isn’t a requirement for using sprites in Corona, but it is required for the code sample below)
Add the following code to your main.lus file. You’ll need to change the file name of saucer_sprites.png to the name of your image file.
You’ll also need to change 48 to the width of your sprites and 21 to the height. These are the width and height of each individual frames.
-- Include the sprite
require "sprite"
-- name the image file containing your sprites, followed by the width and height of each sprite
local saucer_sheet = sprite.newSpriteSheet("saucer_sprites.png", 48, 21)
-- Create a set by naming the sheet and starting frame and number of frames
local saucer_sprite = sprite.newSpriteSet(saucer_sheet, 1, 3)
-- Now create new sprite, give it a name, set the starting frame, end frame,
-- and time between frames in ms, 0 means loop
sprite.add( saucer_sprite, "saucer1", 1, 3, 100, 0 )
-- Create a new Sprite in the display object so we can see it on the screen
local saucer = sprite.newSprite( saucer_sprite )
-- Position your sprite
saucer.x = display.contentWidth / 2
saucer.y = display.contentHeight / 2
-- Prep your sprite
saucer:prepare("saucer1")
-- Start the sprite playing
saucer:play()
Some resources:
- Zwoptex – A sprite packing tool
- Texture Packer – Another sprite packing tool
- Sprite Something – is a pixel drawing tool for the iPhone/iPad