How to do Animation in PuzzleScript

If at any point you feel lost in this tutorial, it might help to look back at my previous PuzzleScript tutorials which lead in to this one.

There are two ways to animate in PuzzleScript. One of them involves using real time, which I’m not covering in this tutorial. The other is for quick one-play through animations, such as an explosion or a character climbing down a ladder.

Open the sample project. We are going to create a bomb and a series of explosion frames then animate them together.

Object Animation

2D animations require multiple drawings of an object going from one state to another, for example the running Mario Sprite below. It contains 4 frames of animation.

MarioRunSprite

To simulate one frame of animtion transitioning to another, we will create multiple objects in PuzzleScript that are our animation frames, and then use code to switch between them.

The Bomb

Create a bomb object like below.

Bomb
black yellow grey
..1..
..1..
.000.
00020
.000.

Don’t forget to add it to the layers and the Legend.

To animate an explosion, you need to create each frame of the animation as a separate object, then switch between them with the code. Let’s create the explosion objects.

Explosion1
black yellow grey red
..1..
..1..
.000.
00320
.000.

Explosion2
black yellow grey red
..1..
..1..
.333.
03330
.333.

Explosion3
black yellow grey red
..1..
.333.
33333
33333
.333.

Explosion4
black yellow grey red
.333.
33333
33333
33333
.333.

Explosion5
black yellow grey red
.333.
33333
33.33
33333
.333.

Explosion6
black yellow grey red
.333.
3...3
3...3
3...3
.333.

Explosion7
black yellow grey red
.....
.....
.....
.....
.....

Numbering objects is a good idea to keep track of which animation frame you are up to. Next, after adding it to the layers and the legend, we can add some lines of code.

[Explosion7] -> []
[Explosion6] -> [Explosion7]
[Explosion5] -> [Explosion6]
[Explosion4] -> [Explosion5]
[Explosion3] -> [Explosion4]
[Explosion2] -> [Explosion3]
[Explosion1] -> [Explosion2]
[Bomb] -> [Explosion1]

Try adding that code, then place a bomb in your level and play. You’ll notice that every time you move, the animation of the bomb steps through one frame. By switching between each object, you are creating an animation.

The order you change between the animation frames is crucial. You have to have the last frame on top, and the first frame on the bottom. This is because, if you remember, code is read top to bottom. If you had the animation frames around the other way, you would never see the change.  You would only ever see the last frame, or in this case, the bomb would just disappear. It would change to frame one, then two and so on down to frame seven in a single turn before you get to see the graphics. By putting the last frame first, it means every turn you’ll see the next change.

Using the Again Command

To make it animate all at once, you need the again command. Again means after PuzzleScript has read through your code once, it will pause anf then read your code again, executing all of the again commands. This can be used for gravity, sliding on ice, and in this case, animations. All you need to do is rewrite your code like this:

[Explosion7] -> []
[Explosion6] -> [Explosion7] again
[Explosion5] -> [Explosion6] again
[Explosion4] -> [Explosion5] again
[Explosion3] -> [Explosion4] again
[Explosion2] -> [Explosion3] again
[Explosion1] -> [Explosion2] again
[Bomb] -> [Explosion1] again

Test the game. You’ll see the bomb animate all at once. If the animation is too slow or fast for you, you can change the speed. At the very top of the screen, under homepage, write this code:

again_interval 0.1

This is part of what is called the prelude. It’s a place where, before the rest of your code, you can set extra rules to determine how the game behaves. Your animation should play faster now. Experiment changing the number after the again interval and see how it behaves.

Sample Project

You can see the finished sample project here.

Conclusion

More PuzzleScript tutorials coming soon. The next tutorial teaches how you can put gravity into your game and make side scrolling puzzles.

Next Tutorial >

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s