When making animations for a phaser 2 game, or with animation in general actually the concept of a key frame is important. A key frame can be described as a frame when an animation begins, or ends, and as such it is a beginning state from which an animation will progress from, and then back to in the case of a looping animation. It can also be the two frames at which an animation begins at a starting state, and ends at an ending state when dealing with some kind of non-looping animation sequence. In this post I will be writing about key frames when using the phaser 2 game framework, giving some examples of this important animation concept when making sprite sheets for a phaser game.
In you travels on javscript realed content that has to do with animation to one extent or another you might have heard about the terms keyframes, and tweening. These are just terms for the end points of an animation and all the other frames that lay in between those end points. For example if you have an animation that loops back to the beginning, resulting in a loading icon type animation, that kind of animation would only have a single keyframe, and all other frames just transition back to that initial state. In other words you start with a key frame, and then tween back to that keyframe. Other animations act as transitions from one state, to another state, these kinds of animations have two key frames, an initial state, and an ending state. In addition with this kind of animation all other frames transition this starting state to an ending state.
In this post I am using phaser 2.x, and not the newer phaser 3.x. As such any code examples here will likely break in 3.x or later.
For a basic example of keyframes, and tweening I will just quickly put together a demo that is just a simple circle that starts out at the right, then swings to the left, and then back again. If I get some time maybe I will make some more interesting animations, but for the sake of this post, and the basic concepts to work with that can be used to make more interesting animations, this should work okay for a basic example.
In this example I am using a method I wrote that can be used to quickly make animations with canvas. I have written about this method back in my post on making sprite sheets with canvas, but I will also cover some of the important aspects of this method in detail here as well. If you want to work out something else to make animations thats fine, I think it is often best to have your own system for this kind of thing, but this should still work out okay to help cover some of the important aspects of keyframes and tweening.
The code of the method is like this:
The method is used by passing an object with values that define the frame width, and height, the number of total animation frames, along with a method that is executed with call function prototype method making the value of the this keyword refer to an api that contains properties about the current frame. In the body of this method is where I define the logic that will be my animation. This includes values like the current frame index, the percentage to completion, and a value I call bias that is a value that starts at one then progresses to zero, and back to one again. There are many other values, and methods that I could add to further expand this api, but whenever I make something like this I have come to find that these are the must have values to start off with.
So I can then use my method in the create method of a phaser state, to create a sprite sheet this way. For the animation that I describe it involves a starting state that is the first key frame, and then I am just tweening back to that starting state.
So then I can use my sheet from canvas method like this:
So keyframes are just the start, and end points of an animation, and in a nut shell that is all there is to it. If you liked this post you might want to check out my manly other posts on phaser as well. If you would like me to expand on this post more, and give more animation examples be sure to let me know in the comments. Thanks for reading.