Corona SDK: Sprite Animation Tutorial

In this tutorial I show you how you can implement a Sprite animation in your game developed with Corona SDK. To make it a bit more fun, I have in total 2 Sprites which interact with each other. In this example I have used Ryu, a character from the game Street Fighter, who on a tap kicks a stag of crates down. Yeah!

So what will we code in this Corona SDK tutorial?
- 2 Sprites: one for Ryu and one for the crates
- Set the sheetData for the sprites
- Make some functions with timer.performWithDelay.

In this short video you can see what we are building in this tutorial:

Lets start with some housekeeping first, by creating removing the the statusbar of the device and creating some easy to use variables.

display.setStatusBar(display.HiddenStatusBar)

centerX = display.contentWidth * .5
centerY = display.contentHeight * .5

The CenterX and CenterY variables take the width and height of the device and by dividing it by .5 we get the center points. Easy!

In Streetfighter games there are always nice backgrounds, so for this little sprite example we will set a background as well.

local bg = display.newImageRect("images/bg.png", 480, 320)
bg.x = centerX
bg.y = centerY

Now that we have removed the statusbar and set a background we can start creating Ryu.

First we need to load the sprite image and set how the sprite image need to be interpret by the code. The width = 184 and height = 251 refer to each Ryu image in the spritesheet (in total four). This means we take every W184 X H251 the image from the total sheet, resulting in one of the 4 frames. We start at 1 and stop at 4 (numFrames = 4).

Now that we have code how we need to interpret the spritesheet, we need to set the parameters what we will do with the loaded spritesheet. In SequenceData we call the sprite “fight”, and let the frames run from 1-4 back to 1. This way the sprite ends where it started. The sprite needs to run in 550 Milliseconds and do exactly one loop.

Than we create Ryu by displaying the sprite. Finally we position Ryu on the screen with CenterX and CenterY. As you can see I positioned him off the center by centerX-100 and centerY+15. Finally we set the sequence to the sequenceData which we called “fight”.

local function makeRyu()

	local sheetData =  { width = 184 , height= 251, count = 1 , numFrames = 4 }
	local spriteSheet = graphics.newImageSheet("images/fighter.png" , sheetData)

	local sequenceData = { 
	{name = "fight", frames={1,2,3,4,1},  count=4, time=550, loopCount = 1 }
	}		
	
	ryu = display.newSprite (spriteSheet, sequenceData)


	ryu.x = centerX-100
	ryu.y = centerY+15
	ryu:setSequence("fight")
	
end

For the crates we do exactly the same with some minor parameter changes.

local function makeCrate()

	local sheetData =  { width = 200 , height= 156, count = 1 , numFrames = 9 }
	local spriteSheet = graphics.newImageSheet("images/cratesv2.png", sheetData)


	local sequenceData = { 
	{name = "cratefall", start = 1,  count=9, time=400, loopCount = 1 }
	}		
	
	crates = display.newSprite (spriteSheet, sequenceData)


	crates.x = centerX+60
	crates.y = centerY+50
	crates:setSequence("cratefall")
	
end

We still need to initialize Ryu and the crates:

makeRyu()
makeCrate()

To make it a bit more fun, we want actually that it seems that Ryu is kicking the crates. For this we make two simple functions.

We set an addEventListener to Ryu (by tapping Ryu). Which executes the function startSprite. So when tapped we start the Ryu sprite and with a delay of 200 Milliseconds we start the function startCrateFall. The function startCratefall will play the crate sprite.

local function startCratefall()
	crates:play()
end

local function startSprite(event)
ryu:play()
timer.performWithDelay(200, startCratefall )
end

ryu:addEventListener("tap", startSprite )

I hope you liked the tutorial.

Here you can find the assets used: