This tutorial builds on assumed knowledge from my previous PuzzleScript lessons.
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.
2D animations require multiple drawings of an object going from one state to another. Below is an example of some of the animation frames from the main character in my game Puzzledorf.
We have standing and blinking animations in several different directions, and walking frames from several different directions. A single walking animation is just this:
Simple but effective for a grid-based movement style, as you see in the animation below:
To simulate one frame of animation transitioning to another, we will create multiple objects in PuzzleScript that are our animation frames, and then use code to switch between them.
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:
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.
You can see the finished sample project here. The next tutorial teaches how you can put gravity into your game and make side scrolling puzzles.