Character animation in Babylon.js

Questions
7

Hello I will try to describe basic principle of what I am doing to animate my objects.

1. Create “connected” meshes

I have created “wrapper” around mesh that can be connected to each other - upper leg is connected to body, lower leg is connected to upper leg and foot is connected to lower leg (similar for arms).

My “engine” supports 6 sides - thus I can connect leg to the “bottom side of body” and head to the “upper side of body”, arms to the left and right (also more than one child can be attached to one side of parent).

That wrapper objects contains info about their children (what is connected to them and on which side)

2. Update object positions

Then I have written function that is keeping meshes connected to each other depending on their parent/child relationship.

Example: I rotate upper leg forward -> its bottom side is moved -> lower leg is automatically moved accordingly to stay connected to upper leg

In these 2 steps I created model, that “holds together” no matter how I rotate each of body parts - but it is not animated yet.

3. Animation

Basic philosophy of my animations is similar to what would I do in 3D program. I just need to specify rotations for all the meshes in some “keyframes” and then extrapolate its curent position each frame.

My animation objects consist of “steps” - each step represents one “keyframe” (body part rotations). Each step has also specified time (how long will it take to reach specified coordinates).

Animation object then run step by step (once or in loop) and it calculates rotation of body parts accordingly to elapsed time and final predefined positon while my model is keeping all parts connected (as described in point 1 and 2).

How is attack animation defined ? It is pretty simple, look at following code - there are just two steps and thats it (preparation and slash itself).

As you can see, I dont use any mesh deformations, just rotations, thats why it is only useful for “zoomed out view” but for smaller things it works and it take just several minutes to create another animation like that.

var anim = new Animation(this);
var step = new AnimationStep(anim, 225);

// Sword arm prepare
step.addVector(this.body, new BABYLON.Vector3(0, -0.4, 0));
step.addVector(this.arm2, new BABYLON.Vector3(1.5, -0.4, 1.5));
step.addVector(this.hand2, new BABYLON.Vector3(2.5, -1, 2.5));

// Shield arm defensive stance
step.addVector(this.arm1, new BABYLON.Vector3(0, 0.8, -1.2));
step.addVector(this.hand1, new BABYLON.Vector3(1.2, 0.8, -1.2));

// Slash
step = new AnimationStep(anim, 200);
step.addVector(this.arm2, new BABYLON.Vector3(-0.8, -0.5, 0.8));
step.addVector(this.hand2, new BABYLON.Vector3(-0.8, -0.5, 0.8));

step.addVector(this.body, new BABYLON.Vector3(-0.05, 0.4, 0));
step.addVectorMulti([ this.uleg2 ], new BABYLON.Vector3(0.3, 0, -0.2));
step.addVectorMulti([ this.uleg1 ], new BABYLON.Vector3(-0.2, 0, 0.2));

At the end of the day I am pretty lame and only for 2 weeks in Babylon.js so take this as an advice from absolute novice noob. Maybe I am doing that all wrong, but it works for my needs so far.

1 Like