Ok, here is a very simple tutorial on creating animation using sprite image in coronalab.
Most game developer/designer have no difficulty in understanding what is a sprite. Sprite is basically a ground of images composed into 1 big image, where each pieces represent a frame in timeline. By playing these frame one by one very fast, we create an illusion of animation. Yes, tat’s the same concept how Disney did it for their early day cartoon show.
So, now, we have a sprite image ready here:
The image filename is sprite.jpg, with size in 648 (width) x 214 (height) pixel. There are total 4 frame, just a simple animation. Each frame size is 162 (width) x 214 (height) pixel.
Ok, now the coding part.
In corona, we first need to initialize the image sheet data:
|
-- first u need to declare the sheet data, mainly to tell corona about your sprite image format local sheetData = { width=162, height=214, numFrames=4, sheetContentWidth=648, sheetContentHeight=214 } -- then you create the sheet object, where you use the sheetData you specified above as parameters to create it local imageSheet = graphics.newImageSheet( "sprite.jpg", sheetData ) |
we take in 5 parameters when creating
sheetData variable:
- width: width of the single frame 648/4 = 162 pixel
- height: always 214 pixel as our sprite image is a horizontally long image. There are more complicated cases where your sprite might be more than 1 row.
- numFrames: only 4 here as you can see
- sheetContentWidth: your sheet image size in width, is 648 pixel
- sheetContentHeight: same as above, but in height, is 214 pixel
once you get these value set correctly, you create the
imageSheet variable by passing in the image file path and name, then this
sheetData too as parameters.
Next, you need to create another variable called
sequenceData. This will tell corona how to play your sprite. Our animation here is very straightforward, just keep looping it from 1st frame to last frame.
|
local sequenceData = { name="cycling", start=1, count=4, time=1000, loopCount = 0, -- Optional ; default is 0 (loop indefinitely) loopDirection = "forward" -- Optional ; values include "forward" or "bounce" } |
Then, we create the
loadingSprite object using
imageSheet and
sequenceData as parameters.
|
local loadingSprite = display.newSprite( imageSheet, sequenceData ) |
we add in these code to position it at the center of screen:
|
loadingSprite.anchorX=0.5 loadingSprite.anchorY=0.5 loadingSprite.x = display.contentCenterX loadingSprite.y = display.contentCenterY |
Last but not least, play it using this command:
Source code for this tutorial is available at
gitlab repository (public).
For more advance and complete tutorial, please refer to
Coronalab Tutorial here.