0

Corona SDK Sprite Functionality And Animation With Sprites

Corona Sprite Example

Below code simply explains how a Sprite works in Corona. Sprite is a graphic asset with multiple images combined into one single asset and is very useful for animations.

Sprites can be created with your images at https://www.codeandweb.com/texturepacker

Sprites And Animations With Texturepack

Sprites And Animations With Texturepack

 

For example , below sprite is created using Texturepacker. Or you can also create sprite by manually aligning the images using any editors like Photoshop/Illustrator etc.

 

Corona Sprite Example

Corona Sprite Example

 

The above sprite is simply a single image made by three small images of the girl. The plan is to make the girl talk with our Corona animation code. If you closely observe the three images , you see that the first image has the mouth open , while second has mouth closed and third as mouth open and eyes closed.

By playing these three images sequentially , we can create an effect that shows the girl talking.

local sequenceData = {
 
  { name = "normalRun",  --name of animation sequence
    start = 1,  --starting frame index
    count = 3,  --total number of frames to animate consecutively before stopping or looping
    time = 500,  --optional, in milliseconds; if not supplied, the sprite is frame-based
    loopCount = 0,  --optional. 0 (default) repeats forever; a positive integer specifies the number of loops
    loopDirection = "forward"  --optional, either "forward" (default) or "bounce" which will play forward then backwards through the sequence of frames
  }  --if defining more sequences, place a comma here and proceed to the next sequence sub-table
 
}

local sheetData = { width=300, height=300, numFrames=3, sheetContentWidth=900, sheetContentHeight=300 }
 
local mySheet = graphics.newImageSheet( "series.png", sheetData )
 
local animation = display.newSprite( mySheet, sequenceData )
animation.x = display.contentWidth/2 - 40 --center the sprite horizontally
animation.y = display.contentHeight/2  --center the sprite vertically
 
animation:play()

This simple code makes our girl talk.

See the video in action. By changing the time parameter from 500 to 200 , we can make the girl talk faster or slower.

The parameters width = 300 and height = 300 specifies the width and height of each single image

sheetContentWidth and sheetContentHeight specifies the total width and height of the sprite.