Unleash your animations with ACE

Babylon.js
3 min readApr 30, 2021

ACE stands for Animation Curve Editor and it is a new editor we are planning to ship with Babylon.js 5.0.

Why do we need an animation curve editor?

Animations in almost all contexts could be really tricky to create if you do not have a tool. Think about any game you played: the hero has to jump, roll, dash, use a weapon, grab an object. All of these actions have to be represented by animations of the main character and its environment.

Example of a sequence of multiple animations

Without a tool , describing the complex sequence of movements involved by a simple jump could be simply not doable unless you have an infinite patience (not my case honestly :)).

This is why most of the animations are produced with tools like Autodesk Max, Autodesk Maya or Blender 3D.

But these tools are not for everyone either. You must face a wall when trying to learn all the features, the richness and sometimes the complexity of such tools.

This is why, in our constant quest for simplicity, we decided to add a new tool right in our Inspector: The Animation Curve Editor.

Accessing ACE from the Inspector

You can try it from this playground.

Disclaimer: This is still a very early alpha. Not all the features are connected or even supposed to work completely.

ACE in action

How does it work?

ACE will give you access to the current animations attached to an entity (I will add support for Animation Groups and Skeletons very soon).

You can visualize individual animations and when we are talking about complex types like Color3 or Vector3, you can see individual channels as well:

Animation curves for a Vector3 property

ACE let you delete, update or create new animations. You can move each keyframe, add new ones and even control the tangents to define the shape of each curve.

Curve manipulation using tangents

What’s next?

We still have a lot of quality checks to do to make sure we can reliably use ACE but this is already a great start. I must admit I can spend a lot of time now playing with complex animations. There is something almost mesmerizing to play with the curves and see in real-time the objects animate subsequently ;)

Enjoy and please let us know on the forum what you think about ACE!

Deltakosh (@deltakosh) / Twitter

--

--

Babylon.js

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/