Game Development Reference
In-Depth Information
In the preceding screenshot, you will notice that the
hierarchy
element's first child (
0
)
has a
parent
element (
-1
) and a
keys
array. The
keys
array has five elements and each
element has the
time
,
pos
,
rot
, and
scl
values. This shows that the animation has five
frames. Similarly for all other bone elements, we will have the
keys
array with five
elements. The
time
element defines the time at which the pose will be activated.
Loading the animation data
We took the basic strategy to load the animation data from
three.js
(
Animation
and
AnimationHandler
). We modified its code to handle our objects. So, let's understand
the basic strategy.
AnimationHandler
is a static class and does three functions:
•
Maintain the list of active objects of
Animation
to play.
•
Parse the animation data and store it in an array. The index of the array is the
name of animation.
•
Invoke the
update
function of active objects of
Animation
when invoked
with elapse time.
Open
primitive/AnimationHandler.js
in your editor. The
AnimationHandler
class maintains three arrays:
•
playing
: This array contains the list of animation objects
•
library
: This array maintains the animation data
•
that
: This array is the static object with functions.
The
update
function iterates over the list of
Animation
objects and invokes their
update
function with
deltaTimeMS
, the time since the last update call as shown in
the following code snippet:
AnimationHandler = (function() {
var playing = [];
var library = {};
var that = {};
//--- update ---
that.update = function( deltaTimeMS ) {
for( var i = 0; i < playing.length; i ++ )
playing[ i ].update( deltaTimeMS );
};
