
# Getting Started - Character Animation

## A Walking Figure

Sometimes the easiest way to add a model to a scene is to obtain one from elsewhere. This could be one you have created in your favorite model-building software or one you have purchased.

The _Dude_ model is one that has been built with its own skeleton animation.

![dude walking](/img/getstarted/dude.webp)

Once imported, the character and its skeleton are obtained from the meshes and skeletons properties of the result object.

```javascript
BABYLON.ImportMeshAsync("/scenes/Dude/Dude.babylon" /* model file */, scene, { meshNames: "him" }).then((result) => {
  var dude = result.meshes[0];
  dude.scaling = new BABYLON.Vector3(0.25, 0.25, 0.25);

  scene.beginAnimation(result.skeletons[0], 0, 100, true, 1.0);
});
```

<Playground id="#SFW46K#1371" title="Loading an Animated Character" description="Simple example of loading an animated character into your scene." image="/img/playgroundsAndNMEs/getingStartedCharacterAnimation.webp"/>

Currently, the character stands in one position, and we would like him to walk around the village. This time, instead of creating another animation object for the character, we will change its position and orientation before each frame is rendered.




# Getting Started - Working With Code

## A Walk Around The Village

There is a useful property of a mesh, *movePOV*, which allows us to move a mesh relative to its point of view. Generally, a newly created mesh is considered to face the negative z direction, and this is the direction of its point of view. To move a mesh forward 6 units in the direction of its point of view, you use

```javascript
mesh.movePOV(0, 0, -6)
```
The parameters are, in order, the distance to move to the right, up, and forward. In the mesh's local space, these are generally the negative x axis, the positive y axis, and the negative z axis.

In Babylon.js you can write code that will be executed before the rendering of the next frame using

```javascript
scene.onBeforeRenderObservable.add(() => {
    //code to execute
});
```

In this way, the properties of objects can be changed frame by frame as the scene renders.

Let us take the simple case of a sphere moving around the edges of a triangle. We want the sphere to appear to slide along one side, turn to slide along the next, then turn and slide along the last side before repeating.

This is also an opportunity to introduce two types of mesh you can create: a sphere and a series of lines. Take a sphere sliding around an isosceles right-angled triangle as an example.

```javascript
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 0.25});

//end points for the line sequence in an array
//y component can be non zero
const points = [];
points.push(new BABYLON.Vector3(2, 0, 2));
points.push(new BABYLON.Vector3(2, 0, -2));
points.push(new BABYLON.Vector3(-2, 0, -2));
points.push(points[0]); //close the triangle;

BABYLON.MeshBuilder.CreateLines("triangle", {points: points})
```

Also you can see another method, *rotate*, of rotating. This method rotates the mesh about the given axis by the given angle in radians. It adds to the current rotation.
```javascript
mesh.rotate(axis, angle, BABYLON.Space.LOCAL);
```

To produce the animation, the sphere moves a distance of 0.05 before each render frame. When the distance it has travelled is greater than 4, the sphere makes a turn. When it is greater than 8, it turns again, and when it is greater than the perimeter, it resets and starts again.

We set up a track array of objects with the properties turn and distance. After travelling the given total distance, the sphere rotates by the given turn value.

```javascript
const slide = function (turn, dist) { //after covering dist apply turn
    this.turn = turn;
    this.dist = dist;
}
const track = [];
track.push(new slide(Math.PI / 2, 4));  //first side length 4
track.push(new slide(3 * Math.PI / 4, 8)); //at finish of second side distance covered is 4 + 4
track.push(new slide(3 * Math.PI / 4, 8 + 4 * Math.sqrt(2))); //all three sides cover the distance 4 + 4 + 4 * sqrt(2)
```

Whenever the required distance is reached, a turn is made and the array index pointer, p, is increased by 1. The modulo operator *%* is used to reset the pointer to zero at the end of the array.

```javascript
if (distance > track[p].dist) {        
    sphere.rotate(BABYLON.Axis.Y, track[p].turn, BABYLON.Space.LOCAL);
    p +=1;
    p %= track.length;
}
```

To prevent floating-point errors from accumulating, whenever the index pointer is reset to 0, the position and rotation of the sphere are also reset.

```javascript
if (p === 0) {
    distance = 0;
    sphere.position = new BABYLON.Vector3(2, 0, 2); //reset to initial conditions
    sphere.rotation = BABYLON.Vector3.Zero();//prevents error accumulation 
}
```

<Playground id="#N9IZ8M#1" title="Animating To a Path" description="Simple example of animating an object along a path." image="/img/playgroundsAndNMEs/gettingStartedVillageWalk1.webp"/>

This is a little trickier, and by using a bit of trial and error for the turns and distances, we can achieve a more complicated walk for the character around the village. One reason for using degrees and converting them to radians for the *rotate* method is that it is easier to adjust by adding one or two degrees.

Since the character, dude, imported from the *.babylon* file has had its rotation set using a *rotationQuaternion* rather than rotation, we use the rotate method to reset the character's orientation.

```javascript
dude.position = new BABYLON.Vector3(-6, 0, 0);
dude.rotate(BABYLON.Axis.Y, BABYLON.Tools.ToRadians(-95), BABYLON.Space.LOCAL);
const startRotation = dude.rotationQuaternion.clone(); //use clone so that variables are independent not linked copies
```

```javascript
if (p === 0) {
    distance = 0;
    dude.position = new BABYLON.Vector3(-6, 0, 0);
    dude.rotationQuaternion = startRotation.clone();
}
```

<Playground id="#KBS9I5#81" title="Character Walking Through Town" description="Animate a character walking through the village." image="/img/playgroundsAndNMEs/gettingStartedVillageWalk2.webp"/>

We now have two things moving around the village: a car and a character. How can we avoid them colliding?



# Getting Started - Car Animation

## Animate the Car in the Village

In a similar way to how we animated the wheels, we now animate the car so that it travels in a straight line over 5 seconds, stops for 2 seconds, and then repeats.
```javascript
const animCar = new BABYLON.Animation("carAnimation", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

const carKeys = []; 

carKeys.push({
    frame: 0,
    value: -4
});

carKeys.push({
    frame: 150,
    value: 4
});

carKeys.push({
    frame: 210,
    value: 4
});

animCar.setKeys(carKeys);

car.animations = [];
car.animations.push(animCar);

scene.beginAnimation(car, 0, 210, true);
```

<Playground id="#KDPAQ9#5561" title="Animated the Car Forward" description="Simple example of how to animate the car's position forward." image="/img/playgroundsAndNMEs/gettingStartedCarAnimation1.webp"/>

After adjusting the position of the car and its route so that it travels past the village houses, we have:

<Playground id="#KJ6XKH#1" title="Add the Car to the Village" description="Add the animating car back into the village." image="/img/playgroundsAndNMEs/gettingStartedCarAnimation2.webp"/>

In this case, we built the car ourselves. Let's now look at a model character that we can import along with its built-in animation.


Getting Started - Chapter 3 - Character Animation

A Walking Figure