Creature: Advanced 2D Skeletal Animation Tool for HTML5

Creature: Advanced 2D Skeletal Animation Tool for HTML5

Today on our blog, Jiayi Chong (owner of Kestrel Moon Studios in Singapore) talks about Creature, an advanced 2D Character Animation Tool that exports to HTML5 WebGL Game Engines and currently supports the following frameworks: PixiJS, BabylonJS, ThreeJS and the new Cocos2d-html5 V4 Alpha.

Let’s hear it, Jiayi!

Stunning Animation for HTML5 + WebGL

Before I start explaining in depth what Creature is, take a look at this character authored in Creature and then exported out for playback using provided Creature HTML5 runtimes:


(click the dragon to see the animation!)


Creature Live WebGL demo

What makes Creature so special?

Creature is quite unlike any other animation tool on the market today. As every animator and technical artist knows, animating secondary motion like flopping hair, swaying dresses and dynamic flesh is both tedious and difficult.

With Creature, those types of motion can be automatically generated via a user directed process.
Here an example of an Automated Animation with Creature:



In the above example, the entire animation sequence of the walking ram was done using Creature’s powerful Automated Animation tools. The total time spent animating the above sequence was about 20 minutes.

Save Time and Get Great Results with Directible Automated Animation

At the heart of Creature is a sophisticated physics and procedural animation engine. When you build a character rig in Creature, all components of the system interface with the engine to allow for the generation of various kinds of dynamic motion.

Here is another example of procedural physics and animation in action, Dynamic Cloth, Hair and Walk Motors:


Modular Animation via Motors

With Creature, we introduce the concept of Motors. A motor is simply a component that performs a specific task on either a group of bones or a character input mesh:


Modular Animation via Motors


Different motors perform different tasks on your character. If you wanted to animate the arm of your character manually, you would simply install a FK motor onto that arm. If IK is desired, an IK motor can be installed to perform IK.

Of course, FK and IK methods are just the tip of the iceberg in terms of what is possible. Want to easily make a floppy tail? Install a Bend Physics Motor that will automatically move fluidly and respond to the actions of the rest of your skeleton. There are Bone Motors that will procedurally generate automated walk cycles. There are also Bone Motors that simulate directible ropes, making them suitable for any kind of motion requiring animatable bend shapes like the necks of animals. This incredibly powerful feature will save time and cost while unlocking the true creative potential of the animation artist.

Physics, Mesh Deformation and IK Walk Motors in action:



The above example demonstrates some of the more sophisticated motors of Creature working together in a character rig. Such types of motion are easily accomplished with Creature using its built in set of procedural motors.

Powerful Animation Framework and Workflow

Creature presents to the artist a powerful yet intuitive interface to produce stunning, high quality animation.

HTML5 games animations

The process of animation involves importing a single image of body parts, rigging it with Creature’s rigging editor and then finally animating the character in animation mode:

Animation Mode HTML5 games

Support for HTML5 + WebGL

We believe strongly that HTML5 + WebGL are technologies that are here to stay. As such, Creature supports the playback of authored animations via provided JS source code runtimes. Currently Creature supports the following: PixiJS, BabylonJS, ThreeJS and the new Cocos2d-html5 V4 Alpha.
Full documentation on how to integrate Creature animations into your HTML5 content/games is provided here.

Find out more about Creature

What I have described in the paragraphs above have barely scratched the surface of what Creature is capable of doing. In addition to procedural animation, Creature also contains advanced features normally only found in high end VFX Software. These include Soft Body DynamicsMotion Capture and Path Motion Transfer.

Sign up for our mailing list on the website to stay updated on the future development of Creature! We have a lot more exciting things in store in the coming months!




Thank you Jiayi, we’re absolutely amazed by your work and we’re sure lots of HTML5 game developers will enjoy what you are doing as well!

For our readers: if you are interested in find out more about Creatures, have a look at their website:
and be sure to follow their Twitter account: @KestrelmMoon!