Animation Frames

This is the code we created in the last post.

As a result, the test sprite displays the entire image grid.

What we want it to do is to show only one of the squares.

To do this we use the setSpriteAnimation() command, after the ones shown above.

setSpriteAnimation( testSprite , 64 , 64 , 252 )

This tells AGK that the sprite uses animation frames from the image rather than the full image.

The parameters indicate that each animation frame is 64 pixels wide by 64 pixels high and that there are 252 of them in the image.

AGK then works out where in the image the frames can be found and uses them for the sprite

This now shows the sprite using frame 1.

If we want to change which frame is shown, we can use the SetSpriteFrame() command.

To see this in action, add the following lines after the do command.

testFrame = testFrame + 1
if testFrame = 253 then testFrame = 1
setSpriteFrame( testSprite , testFrame )

Each frame, this adds 1 to a variable called testFrame (the variable will be created the first time this is called).

Then it checks if the variable has reached 253, and if so resets it back to 1

Finally it uses the variable to set the frame number for the test sprite.

The sprite will now cycle through all the frames in the image, which currently will make the number appear to count from 1 to 252, the restart at 1.

Of course we don't want our icons to be full screen, so now change the setSpriteSize() Command to use our IconSize() function and add a setSpritePosition() Command immediately after like so

setSpriteSize( testSprite , IconSize() , - 1)
setSpritePosition( testSprite , 100 , 100 )

Now the sprite will be at the size our icons will be at and at position 100 , 100 on screen.