Sprite Sheet study with scrolling

[Scott Ferguson]

This project animates an ImageSprite using images that were extracted from a sprite sheet:

 

http://payload23.cargocollective.com/1/6/200359/2773164/player.png

using the Windows utility 'Alfred Spritesheet Unpacker' available here:

http://thetwowithnotalent.jimdo.com/downloads/

(see: Utility to split a sprite sheet into separate files for more information)

The PickFrame procedure with result displays a range of pictures in the ImageSprite to simulate walking, standing and whistling.

A scrolling background was added just to make things more interesting.

Responsive sizing was used throughout so this should display well on any device.    

I intentionally did not align each image perfectly so the animations look a bit off.

What you see is the way the images are extracted from the sprite sheet which is still pretty amazing.

For better alignment between the images you could bring them into GIMP in separate layers, align them, then save each layer as a separate image again.

Which is why I did not do that -- to keep things as simple as possible.

The PickFrame procedure with result allows one list of images extracted from the sprite sheet to be used for different animations.

This is accomplished by specifying a starting index and an ending index in the list of images.

Images 0.png..12.png are the walking animation with indices 1, 13.

Image 13.png is the standing animation with index 14.

Images 14.png..20.png are the whistling animation with indices 15, 21.

The SetFrames procedure specifies which list of images to animate, the starting and ending indices, the current image to use and whether the sequence of frames is to loop or repeat.

Note that in the Animate.Timer event block only one PickFrame block is needed to animate the hero for all three different animations.

Tested on a Moto G, and ASUS TF-101.

---