2D Skeletal Animation in Phaser 3 Tutorial
Introduction
Ever wanted to learn how to create and deploy super cool animated characters for your Web Games? This tutorial will cover just that! We will go through the specific steps required to take you from a raw source image to a fully walking character complete with lively secondary motion effects ( floppy feathers in this case! ) running in your Web browser :)
This tutorial covers all the basics required to get your started with both Character Skeletal Animation as well as making the character run in real-time in a Web-based Game Engine Framework. Here is what we will produce at the end of this write up:
Required Art + Technical Knowledge
- Assumes you already have the skills ( or have acquired artwork ) required to draw a simple 2D character in any of your favourite 2D painting applications like Photoshop or CorelDraw.
- Basic knowledge of animation ( knots, key frames, animation splines, timing )
- You know the basics of Javascript and are familiar with rudimentary programming concepts ( functions, for-loops, if-then-else statements etc. )
Required Tools
We will be using the following tools in this tutorial:
- Creature Animation Tool
- Phaser 3 WebGL Game Engine Framework
- Visual Studio Code or any code editor of your choice
- Python 2.7x ( Optional, you can use something else for Web Server testing )
Part I: 2D Character Animation
Character animation is a huge topic in itself. For the purposes of this tutorial, we will be using the Creature Animation Tool. Creature is a 2D animation tool that is capable of producing complex, high quality animation in a short amount of time using its powerful procedural Motor System. Here is a glimpse of what it is capable of:
As you can see from the above videos, Creature is very good at animating difficult and time-consuming effects like cloth, hair, flesh + muscle. Hence, using Creature’s procedural Motor System, we will be able to quickly generate a walk cycle for our intended character in this tutorial.
Full Animation Video Tutorial
The entire process of creating, rigging and animating the walking Flamingo character is described in detail in the video below. Please watch the video first, then read the supplementary write-up provided after that for further understanding of how the process works.
Supplementary Write-up for Character Animation Video
Types of Animation
Before we start diving into animating our character, let us give a brief overview of the types of 2D animation available for authoring game content.
Frame by Frame Animation
Frame by frame animation is the traditional method of creating 2D animation. It involves drawing every pose of the character frame by frame in order to generate motion. This can lead to some gorgeous results ( traditional Disney and high quality Anime are all frame by frame ). However, this is also a very time-consuming process and might not be suitable in all cases if you have tight time constraints or lack the manpower/resources to make these animated assets.
Skeletal Animation
Skeletal Animation takes a different approach to 2D animation. Instead of having to draw each and every pose for every frame of motion, what if we could generate all the motion of our character from a single ( or group of images ) image instead? This sounds crazy but it really is not! What it simply means is we will use various computer graphics algorithms/techniques to move/scale/deform various parts of the character over time to generate our final result. Skeletal Animation is a bit more limited than Frame by Frame Animation when it comes to generating a wide diversity of character poses. However, what you lose in flexibility you gain in terms of time and efficiency.
Advantages of Skeletal Animation
- You spend a lot less time authoring your animation since you do not need to painstakingly draw out each and every pose.
- It is a lot more memory efficient when deployed in a Game Engine since you do not have to load/store all frames of your character poses. This can quickly add up for complex characters animated using Frame by Frame methods.
Here are the overall steps we will take to create, rig and animate our Walking Flamingo character:
First Step: Character Texture Atlas
Our character for the purposes of this tutorial is this pink flamingo character:
In order to prepare this character for Skeletal Animation, we will first need to break up the character into individual body parts, then lay them out into a texture atlas:
Second Step: Meshing
With the character texture atlas created, we will start and create our new Creature Project. After importing the texture atlas above, Creature will automatically create individual body part meshes from the texture atlas above:
By default, Creature will create regular grid meshes for each of the body parts. If you want to customize the type of mesh, you can look up more advanced Creature tutorials which teach you how to create other types of custom polygonal meshes for your character body parts. You can read more about the other meshing methods that Creature provides here.
Third Step: Rigging
With the character meshes created, we can start to create the Skeletal Rig for the character. First, we need to place the various body part meshes at the correct positions to construct the character. Next, we will define the skeletal rig structure of the Flamingo by laying out the bones:
Take note that we have a long set of bones from the body all the way into the neck/head of the Flamingo. We also have chains of bones at the back of the body for each of the individual tail feathers. These chains of bones will be used later during Animation mode to animate the floppy tail feathers using Creature’s powerful Bend Physics Motors.
Bone/Skin Weighting
Bone Skinning/Weighting is the process of determining how much each bone influences the different regions of the body part meshes of the character:
Here, the whiter a region is, the more influence that particular bone will have on the mesh. You have can multiple bones influencing the same region in a mesh. This will mean that a combination of bones will all influence that particular part of the mesh as the group of bones animates over time.
Bone Skinning/Weighting is a rather involved topic in itself. If you want to learn in-depth about how it works, you can watch the following video below:
Creature has multiple ways of applying weights for skinning/weighting your character meshes: Manual, Auto and Smart. This tutorial uses the Auto weighting mode since it is the easiest and quickest way to weigh your meshes. Auto weighting allows the user to get skinning weights automatically computed via tweaking 2 values: Radius and Influence. Radius determines what region the auto skinning computation will apply the main weights of the bone to while Influence determines how far those weights will bleed into neighbouring vertices of the mesh which are not within the area/radius. A more detailed look at the various Rigging and Weighting options can be found here.
Final Step: Animation
Now are are ready to animate our Flamingo! We will first go through the basic methods of animating our character, then jump into using Creature’s Procedural Motors to speed up and enhance our character animation.
Basic Key-framing
Basic Key-frame Hand Animation is possible in Creature by default. Every character that has been properly rigged through the Creature rigging pipeline is automatically ready and setup for traditional Key-frame animation.
Creature auto-keys, that is a key frame is automatically set at the current frame/time you are on whenever you change the angle/position etc. of a bone. This means you just need to set a pose for a bone, then jump to another frame of your choice and set another pose. 2 key frames in this case will be created and you will see your character animate/interpolate smoothly over those 2 key frames. Below, you can the keys/knots setup when we have 3 key frames added for the selected bone:
We can also go into the Spline view to tweak the timing of the animation curves:
If you want, you can key frame the entire Flamingo’s walk cycle manually. This is perfectly fine and will be the choice of more traditional artists/animators who love to have complete control of every detail of their character motion :) If you want to exploit or automate some of the animation process, you can read on about Creature’s Procedural Motor system. We will be using that to auto-generate our character walk cycle in this tutorial.
Procedural Motors
One of the reasons why Creature is such a powerful animation tool is because of its Procedural Motor System. Simply put, a Motor is a component that executes a certain type of behavior on a group of bones or a region mesh. Different types of Motors perform different operations. You can have motors that run IK ( inverse kinematics ) on a set of bones, or a motor that runs some sort of soft body physics simulation on another group of bones/mesh. This system allows you to automate partially ( or fully ) the animation of your character. You can hand off parts of the character to the motor system which you deem tedious or difficult to animate, like cloth/hair. In fact, the motor system is very much adept at animating difficult to animate cloth/hair/flesh/muscle effects.
Here are some detailed videos on the motor system:
We will be focusing our attention on 2 particular motors: IK Rotate Motor, Bend Physics Motor.
IK Rotate Motor
The IK Rotate Motor is what we will be using to generate the automatic walk cycle for our Flamingo. IK Rotate Motor allows the user to animate bones using an Inverse Kinematics Scheme. The target point is rotated around an ellipsoidal arc centered around a selected point.
Inverse Kinematics allows the user to specify a target point for a group of consecutively connected bones. The chain of bones with the IK Rotate Motor installed will pose automatically by following the ellipsoidal arc centered at a user defined point.
This motor is very useful for automating the animation of limbs, making it a powerful tool for walk cycles.
To simulate the ground contact on a flat plane, the user typically sets the scaleBottom property to 0. This flattens out the bottom part of the ellipsoidal arc, making the animated target point trace a flat motion before it arches upwards to complete the upper part of the ellipsoid.
The user will set the phase property to be different from another IK Rotate Motor by a difference of 2 to simulate alternate walking limbs in a walk cycle.
Bend Physics Motor
For the flopping feathers and the lower part of the neck, we use the Bend Physics Motor to add lively secondary motion to them. The Bend Physics Motor runs a simulated connected chain of bones using a relative curve element target dynamics model. This is useful for any floppy item like tails or free flowing rope/cloth.
Bend Physics Motor defines a simulated chain of bones with forces between them both trying to preserve length and the overall shape of the curve along the bones.
The user sets the stiffness property to a high value if the overall shape of the curve needs to be preserved under motion. Lowering stiffness to 0 results in a free flowing material like rope or cloth. If rope or cloth are desired, make sure the physics mode is set to Motion.
If the physics mode is set to Motion, stretchStiffness becomes active and allows the user to tweak how stretchy the material is.
If the simulation is unstable or jittery, remember to increase the damping value. This makes the motion bleed energy faster and will result in more stability under high amounts of motion.
Final Animation Result
Here is the final animated result using IK Rotate Motors for the neck/head + legs and Bend Physics Motors for the tail feathers:
You can also download the full Creature sample project here.
Game Engine Export
With our character animation finished, we move onto exporting our Flamingo for Game Engines:
There are 2 main file formats Creature supports for Game Engines: Full JSON/Flatbuffers and the CreaturePack format. We will be using CreaturePack for this tutorial. This is because CreaturePack is a very compact, high performance + quality animation format specifically designed for deploying complex deforming mesh animations on mobile/web platforms where size and playback speed are very important.
The important export settings we have tweaked for this tutorial are:
- Gap Step, set to 5. Gap step reduces the number of frames exported out, the skipped frames are reconstructed by the CreaturePack runtime in the game engine. This reduces the export file size
- Delta Compress, set to 2x. A more advanced compression feature trading quality for export size. However, a 2x delta compress in most cases causes minimal perceivable output degradation with a huge win of tiny export sizes. You can try 4x if you are ok with even smaller file sizes at the expense of quality
- Resolution, set to 74. This is a mesh compression option. In general, we do not need the full set of triangles for final mesh animation. Thus, lowering the mesh resolution on export will also help us reduce the final size of the exported animation asset
Notice how tiny our animation is after tweaking those options, a mere 0.29mb! And this is for a smoothly deforming character with floppy feathers performing a detailed walk cycle. You can learn more about what and how the export options work via this video:
The exported data folder of our animation will contain 2 crucial files:
- flamingo.creature_pack ( Binary CreaturePack file for the character )
- flamingo.png ( Texture atlas for the character )
We will use both of these files later on in Phaser 3 to deploy this character animation.
Part II: Phaser 3 Deployment
We will be using the Phaser 3 Web Game Engine framework for our deployment platform of choice. Phaser 3 is a super cool and fun framework supporting a very powerful array of options to make web-based games.
You can grab the source of Phaser 3 from their Github page here.
CreaturePack Phaser 3 Runtimes
Next, you need to grab the CreaturePack runtimes for Phaser 3 here. There is also a sub-folder called Phaser3 containing the Phaser 3 specific game library/object files here. Take note however that you will still need the core files from the main CreaturePack Github page as well in order for the runtime to function properly.
Web Server
Before we begin, we will need to setup a web server so that our game can load/access the required image + animation asset files. This is a standard requirement for all local web-based development if you are not already familiar with it. You can setup your local web server however you like.
We have also provided a very handy mini web server you can use that is coded in Python 2.7x here. Just run it in whichever folder you are in to allow your browser to access locally those files of interest.
Required CreaturePack Runtime Files
- CreaturePackModule.js ( from main folder of repository )
- msgpack.js ( from main folder of repository )
- CreaturePackPhaser3Obj.js ( from Phaser3 folder of repository )
In addition to that, you will of course need the built out Phaser 3 engine file:
Overall Structure of a Phaser 3 Game
We will first setup the overall structure for our Phaser 3 Game:
As you can see in the code block above, we need to first include all the required modules into our project. Next, we configure the Phaser.Game project with a couple of preset options, including the size of the screen. Once that is done, we can move onto the next phase of loading our character/game assets.
Preloading Required Asset Files
In the code block above, we load our exported Flamingo CreaturePack binary file as well as the Flamingo’s texture atlas texture into 2 keys: char and texture. We put these in the preload() function because we want the assets to be readily accessed once the game is actually loaded.
Loading/Setting Animation
We will now go ahead and load our CreaturePack character with the following code in the create() function:
Notice that we also set the size/dimensions of the character via the .scaleX/.scaleY properties.
Finally, we setup the animation clip we want to playback for the character via the setActiveAnimation() function. In this case, we want the character to play the walk animation so we call it with that animation clip.
End Result
Here is our final result of the character walking in Phaser 3 below! :)
There are many more functions available to you to control the animation of your character in Phaser 3. You can explore these functions and download this sample project from the Creature WebGL Github site. I hope you had fun reading this article and enjoy deploying 2D skeletal animation assets in Phaser 3!
