One of the great features of Voxelent -besides being totally awesome!- is its capability and efficiency in rendering animated scenes. In this tutorial, we are gonna go through a simple example to demonstrate how you can create your own animation without breaking a sweat!

First and foremost, you need to a) setup the view, and then b) load the models. Note that, since we are creating an animated scene, multiple models (or ‘actors’) are required to be loaded by creating a ‘list’:

view = vxl.api.setup('view-1');
scene = view.scene;
var list = ["actor1.JSON", "actor2.JSON", .... , "actor20.JSON"]; //  # of models: 20
vxl.api.load(list,'path/to/JSON/files');

After loading the models, we are required to define our ‘animation map‘ which is necessary to provide frame-to-frame animation. Animation map is essentially a JSON object where each property name is one frame and each property value is a list of actors (i.e. models):

var map = {"frame1":["actor1.JSON","actor2.JSON"], ..., 
"frameLast":["actor19.JSON","actor20.JSON"]};

After defining the map, we need to place all these keyframes within one object AKA ‘animation object‘ that can be added to the scene. To do so, you may create an instance of the class vxlFrameAnimation():

animation = new vxlFrameAnimation(map);

And finally tell the scene to run the animation:

scene.setAnimation(animation);
view.start(); //Start the view
animation.start(100); //Start the animation at 100 fps

That’s all you need to do! To handle asynchronous events, however, you may subscribe to vxl.events.MODELS_LOADED event and call animation.start() after models are loaded:

vxl.api.subscribe(vxl.events.MODELS_LOADED, this);
function handleEvent(event, src) {
if (event == vxl.events.MODELS_LOADED) { animation.start(100);  }}

To see a live example, you may check out our famous heart demo and take a sneak peak at its source code.

Voxelent rocks.