
# 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 - 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 - Wheel Animation

## Foundation of Animation

We will start with a wheel and rotate it about its axle. Remember that, to make the car upright, we rotated it about the x axis, so the axle is along the y axis of the cylinder.

We need to create a new animation object:

```javascript
const animWheel = new BABYLON.Animation("wheelAnimation", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
```

This has the following parameters: name, property to animate, animation frames per second, property-to-animate type, and loop mode, which in this case repeats the animation.

We follow this with the key frame array, where we set values for the property to animate by frame number.

```javascript
const wheelKeys = [];

//At the animation key 0, the value of rotation.y is 0
wheelKeys.push({
  frame: 0,
  value: 0,
});

//At the animation key 30, (after 1 sec since animation fps = 30) the value of rotation.y is 2PI for a complete rotation
wheelKeys.push({
  frame: 30,
  value: 2 * Math.PI,
});
```

Finally, we link the key frame array to the animation, link the animation to the mesh, and begin it.

```javascript
//set the keys
animWheel.setKeys(wheelKeys);

//Link this animation to the right back wheel
wheelRB.animations = [];
wheelRB.animations.push(animWheel);

//Begin animation - object to animate, first frame, last frame and loop if true
scene.beginAnimation(wheelRB, 0, 30, true);
```

<Playground id="#KDPAQ9#14" title="Simple Wheel Animation" description="Simple demonstration of animating one of the car's wheels." image="/img/playgroundsAndNMEs/gettingStartedWheelAnimation1.webp"/>

Since all the wheels rotate the same way, we can use the same animation for all of them.

```javascript
scene.beginAnimation(wheelRF, 0, 30, true);
scene.beginAnimation(wheelLB, 0, 30, true);
scene.beginAnimation(wheelLF, 0, 30, true);
```

To ensure that new code in later playgrounds is not overwhelmed by a large amount of previous code, we will save the car as a model and import and animate it as an item.

```javascript
BABYLON.ImportMeshAsync("url to model car" + "car.babylon").then(() => {
  const wheelRB = scene.getMeshByName("wheelRB");
  const wheelRF = scene.getMeshByName("wheelRF");
  const wheelLB = scene.getMeshByName("wheelLB");
  const wheelLF = scene.getMeshByName("wheelLF");

  scene.beginAnimation(wheelRB, 0, 30, true);
  scene.beginAnimation(wheelRF, 0, 30, true);
  scene.beginAnimation(wheelLB, 0, 30, true);
  scene.beginAnimation(wheelLF, 0, 30, true);
});
```

<Playground id="#KDPAQ9#15" title="Animating All 4 Wheels" description="Adding the wheel animation to all 4 tires." image="/img/playgroundsAndNMEs/gettingStartedWheelAnimation2.webp"/>

We can now animate the car itself and add it to the village.


Getting Started - Chapter 3 - Car Animation

Animate the Car in the Village