Sprites

Often you’ll want to create an animated object on the screen, have it play through an animated sequence then remove itself from the screen. In this example I’ll created an animated explosion. The explosion appears when you tap the screen, then removes itself once the sequence of frames is complete.

Sprite Sheet

Creating the sprite sheet. I used the explosion generator here: http://www.nuvorm.nl/?p=1. You’ll need to have the Flash player installed to use this. It generates a sequence of frames in a wide image. The iPhone 3 does not support images larger than 1024 and the 4 supports maximum dimensions of 2048. The explosion image generated from nuvorm.nl was 3999px wide. I had to take this into Photoshop and arrange the image into multiple rows.

I calculated the size of each frame by counting the frames and dividing by the width. Turns out I had 43 frames. This meant each frame 93 px wide. The original image was 100 pixels tall. I sized the image 400 px tall. Then I moved the rows of 10 frames to create a new image 10 frames wide by 4 frames tall. When I was done I had created the image below:

Note the last few frames didn’t have much in them so I dropped the last three frames and made the sequence 40 frames long.

Set up Sprites

Now it was time to create the Corona Project. I created a new Blank project and moved my sprite sheet into the folder. The first step is to import the sprite library:

require( "sprite" )

Next I set up my sprite. here I make a sprite sheet, then make a sprite set from the sheet and last set up the sprite.

local explosion_sheet = sprite.newSpriteSheet( "explosion_43FR.png", 93, 100 )
-- Make a sprite set from the sprite sheet.
-- There are 40 images total in the sheet image.
local explosion_set = sprite.newSpriteSet( explosion_sheet, 1, 40)
-- Set up a sprite from sprite set.
-- Add a new sprite made up of all 25 images.
-- 30 milliseconds per frame.
-- Loop once.
sprite.add( explosion_set, "explosion", 1, 40, 30, 1 )

Sprite Factory

Next we’ll make two functions, one to make sprites the other to remove sprites.

-- This function removes the explosion
local function remove_explosion( event )
 local phase = event.phase
 if phase == "loop" then
 local explosion = event.target
 explosion:removeEventListener( "sprite", remove_explosion )
 explosion:removeSelf()
 end
end

-- This function makes a new explosion.
local function make_explosion()
 local explosion = sprite.newSprite( explosion_set )
 explosion:prepare()
 explosion:play()
 explosion:addEventListener( "sprite", remove_explosion )
 return explosion
end

The make_explosion() function creates a sprite, prepares and plays it. It also adds a listener for sprite events. This event listener calls remove_explosion().

The remove_explosion() function checks the event phase, if  the phase is loop, you know that the sprite has reached the last frame of it’s sequence and is about to loop back to frame 1. Here we want to remove the sprite. At this point I removed sprite event, and then removed the sprite itself.

Explosion Example

Here’s the full code of the example. I used a touch event to create explosions. each tap of the screen should create an explosion, by calling make_explosion(). It then places the explosions at the position of the touch event.

-- Hide status bar
display.setStatusBar( display.HiddenStatusBar )
-- Import Sprite
require( "sprite" )
-----------------------------------------------------------------------------------------
--[[
 This example attempts to show how to set up and animated explosion.
 The goal is to use a sprite sheet to animate the explosion.
 Removing the sprite when the animation is complete.
]]
-----------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------
-- Set up a sprite sheet for the alien.
-----------------------------------------------------------------------------------------
-- Make a sprite sheet from the image: explosion_43FR.png
-- Each of the explosion images in the sheet is 93x100px.
local explosion_sheet = sprite.newSpriteSheet( "explosion_43FR.png", 93, 100 )
-- Make a sprite set from the sprite sheet.
-- There are 40 images total in the sheet image.
local explosion_set = sprite.newSpriteSet( explosion_sheet, 1, 40)
-- Set up a sprite from sprite set.
-- Add a new sprite made up of all 25 images.
-- 30 milliseconds per frame.
-- Loop once.
sprite.add( explosion_set, "explosion", 1, 40, 30, 1 )
-----------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------
-- These functions acts as a factory to make explosion sprites and remove them.
-----------------------------------------------------------------------------------------
-- This function removes the explosion
local function remove_explosion( event )
 local phase = event.phase
 if phase == "loop" then
 local explosion = event.target
 explosion:removeEventListener( "sprite", remove_explosion )
 explosion:removeSelf()
 end
end
-- This function makes a new explosion.
local function make_explosion()
 local explosion = sprite.newSprite( explosion_set )
 explosion:prepare()
 explosion:play()
 explosion:addEventListener( "sprite", remove_explosion )
return explosion
end
-----------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------
-- For testing we'll use this function to add explosions.
-----------------------------------------------------------------------------------------
local function on_touch( event )
 local phase = event.phase
 if phase == "began" then
 local explosion = make_explosion()
 explosion.x = event.x
 explosion.y = event.y
 end
end
Runtime:addEventListener( "touch", on_touch )
-----------------------------------------------------------------------------------------