Simple loading sprite animation

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: sprite 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: we take in 5 parameters when creating sheetData variable:
  1. width: width of the single frame 648/4 = 162 pixel
  2. 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.
  3. numFrames: only 4 here as you can see
  4. sheetContentWidth: your sheet image size in width, is 648 pixel
  5. 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. Then, we create the loadingSprite object using imageSheet and sequenceData as parameters. we add in these code to position it at the center of screen: 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.