Class summary: Creating Animations
Copyright (c) 2017 Kathi Fisler
This material goes with Interactive Games as Reactive Systems from the textbook
You’re going to get practice programming with data blocks by building an animation, which you’ll then turn into a simple interactive video game. We are building the game from the chapter linked above, but I’m staging the activity for you in these notes.
1 Animations as Filmstrips
The staff will draw out a "filmstrip" view of the initial animation that you are trying to create. Note that if we know the x-coordinate of the plane, we can (a) draw a scene, and (b) compute the x-coordinate of the _next_ scene. If we (or Pyret) does these two tasks over and over, you’ll get a movie.
That’s the code you are going to build.
2 An Initial Animation
Open the starter file. I’ve given you the first animation, in which the plane flies across the screen. Study it – which function controls the image? Which controls the movement?
How would you make the plane move faster?
How would you make the plane fly at lower altitude?
How would you make the plane accelerate (rather than fy at constant speed)?
There are three key pieces to an animation:
The "world" data structure – this is the datatype that contains all of the information you need to capture how one frame differs from another.
The "draw" function that consumes a work and produces a frame for it.
The "tick" function that consumes a world and produces the world for the next frame.
3 Two-dimensional movement
The current world is just a single number for the x-coordinate of the plane. Augment the world to consist of two numbers: an x-coordinate and a y-coordinate for the plane. Update the draw and tick functions so that the plane descends as it crosses the screen.
Are you writing examples for anything? Should you be?
3.1 Wrap-Around Movement
Notice that the plane flies off the edge of the screen and never comes back? It’s there, it’s just drawn outside the visible region of your image. We’d rather the plane re-enter from the left edge of the screen once it disappears from the right edge of the screen.
Write some examples of how place-airplane should behave to wrap the plane around back to the left screen edge. After you have examples, modify place-airplane to have that behavior.
4 Control the Altitude
The animation is too predictable – the airplane descends at the same slope every time, so it hits the ground/water at the same point each time you run the animation. It would be more fun if a person could control the height of the plane.
Develop a function alter-airplane-y-on-key that consumes a world and a string (representing the name of a key on the keyboard) and produces a world. If the "up" key is pressed (meaning the up arrow), the next y-coordinate should be a little smaller (higher in the sky). If the "down" key is pressed, the next y-coordinate should be a little larger (lower in the sky).
Add the following line to the big-bang at the bottom of the screen, then press away!
W.on-key(alter-airplane-y-on-key) |
5 A Second Game Element
Let’s make the animation more interesting.
Add a (hot air) balloon, which slowly floats upwards during the animation. Does the world need to change to add a balloon? What information captures a balloon? Which of your functions need to change?
6 Keep Going!
From here, you can try one of several extensions, depending on your interests:
Stop the game if the airplane hits the balloon. You can stop an animation with the big-bang clause
W.stop-when(should-stop)
where should-stop consumes a world and produces a Boolean.
Stop the game if the airplane lands on the ground.
Have multiple balloons at different locations.
Have different "levels" or backgrounds that the plane flies across as it flies off the right edge of the screen.
Add a gas gauge, and stop if the plane runs out of gas before landing.
or whatever else you can think of here.