
The editor provides a tool to create and edit animations. This tool is not intended to create complex animations, modelers (3ds Max, Blender, etc.) will do it better than the editor.

Anyway, modelers are not able to access objects such as post-processes (for example animating the depth of field in the default or standard rendering pipeline). This is where the Animations Editor exists.

**Note: all animations added and edited in the modeler will not be saved in the editor project event if you modify it inside the editor**

## Using the Animations Editor
To access the tool, just click on the toolbar **Tools -> Animations Editor...**.

If the selected object has already animations, the tool will select the first one by default.

## Overview
To add a new animation, you can click on the toolbar **Add**. A window will open and show you a tree of all available properties (numbers, vectors, colors, etc.).
All properties with a red icon are not supported: for example, you cannot animate "material", but you can animate "material.alpha", "material.diffuseColor", etc.

To select an animation, you can access the list of the available animations for the atteched object using the toolbar **Animations -> the animation to editor**.

To remove the current animation being modified, just click on the toolbar **Remove Animation**.

## Adding keys
When you add a new animation, 2 keys will be created by default with a default value from frames 0 to 60.

To add new keys, just ckick on the toolbar **Add Keys**. Then, the tool will be in mode "Adding Keys", select the frame and click on the red circle to add the new key.

## Removing keys
To remove keys, just click on the toolbar **Remove Keys**. Then, click on all the keys to remove.

## Previewing Animation
To preview the current animation, you can click on the toolbar **Play**. Or use the slider (by default on top-left or the tool)

## Example animating the alpha value of a material
<iframe width="560" height="315" src="https://www.youtube.com/embed/zl_bUqo3juI" frameborder="0" allow="autoplay; encrypted-media" allowFullScreen></iframe>



The editor provides a tool to help creating path finders. That will require programming skills.

For example in this video, a path finder is used to animate randomly a particle system in a given mesh surface:
<iframe width="560" height="315" src="https://www.youtube.com/embed/7HucXzBYC34" frameborder="0" allow="autoplay; encrypted-media" allowFullScreen></iframe>

## Using the Path Finder Editor
To access the tool, just click on the toolbar **Tools -> Path Finder...**.

The tool will show 2 panels:
* List of meshes surfaces where positions are available (on the left)
* Preview of the path finder output (black = wall, white = available)

To add new available surfaces, just click on the button **Add New** in the list (left). Once you add or remove surfaces, the preview will be updated.

To edit the path finder configuration, just click on the toolbar **Edit**. Now, the editor's **Inspector** will show you the available properties:
* Name: The name of the path finder configuration (important and used when programming)
* Size: Can be seen as the quality (number of positions available) of the path finder
* Ray Height: In some cases (like huge/high terrains), the ray height represents the start position on Y axis for rays being launched to check collisions on mesh surfaces. Sometimes you'll have to set a higher value
* Ray Length: Represents the length of rays being launched to check collisions. Sometimes, you'll have to set higher value
* Remove...: Remove the current path finder configuration
* Create new...: Create a new path finder configuration

## Selecting a path finder configuration
To select a path finder configuration, just click on the toolbar **Paths -> the configuration to edit**.

## Programming using path finder configurations
As a developer, you'll want to use a previously configured path finder. For example, when you add a script to a node, you can use the global instance named **tools** to access all extensions including the path finder extension.

For example, animating randomly an object:

```javascript
class Script implements IScript {
    // Public members
    public isPlaying: boolean = false; // If the object is being animated

    /**
     * Constructor
     */
    constructor ()
    { }

    /**
     * Called once starting the script
     */
    public start (): void {
        // Here we are editing a mesh
        console.log(mesh);
    }

    /**
     * Called on each frame
     */
    public update (): void {
        // Get the path finder instance. Let's have a configuration named "tutorial"
        const pathFinderConfiguration = tools.getPathFinder('tutorial');

        // Now, get start and end positions calculated by the path finder.
        // To do that, you'll have to find the nearest available point for the current node position
        const start = pathFinderConfiguration.findNearestPoint(mesh.position);
        
        const randomIndex = (Math.random() * pathFinderConfiguration.availablePoints.length) >> 0;
        const end = pathFinderConfiguration.availablePoints[randomIndex];

        // Now compute path using the path finder instance
        const path = pathFinderConfiguration.fromTo(start, end);

        // Now, create an animation. This is used as an helper to create easily a traval animation
        // Here we create an animation named "AnimationName" set as 60FPS
        const animation = pathFinderConfiguration.createAnimation('AnimationName', path, 60);

        // Animate the node!
        this.isPlaying = true;
        scene.stopAnimation(mesh);
        scene.beginAnimation(mesh, 0, path.length - 1, false, 0.4, () => {
            // On animation end, set isPlaying to false
            this.isPlaying = false;
        });
    }
}

// Function that exports the script
exportScript(Script);
```



The editor provides a tool to write and attach custom scripts to objects in the scene.

This includes:
* The scene itself
* Meshes
* Cameras
* Lights
* Particle systems

To access the tool, just click on the toolbar **Tools -> Code Editor...**.

All the scripts you will write are standalone and can be attached to objects (by creating links).
That means you'll first have to add a new script. Then, attach the new script to your object(s).

To add a new script, just click **Add New Script...** in the toolbar and give it a name. If you selected an object before, the script will be automatically attached.
Once you added the new script, the assets panel will be updated and you able to drag'n'drop the new script on another objects.

To add a new reference to a script to the selected object, just click on **Add New** in the grid and select the script to attach.

Once you select another object in the scene, the tool will refresh and draw the available scripts for the new selected object.

<iframe width="560" height="315" src="https://www.youtube.com/embed/6U87lDX8i3A" frameborder="0" allow="autoplay; encrypted-media" allowFullScreen></iframe>

## Explaining the code

```javascript
import { Scene, Color4 } from 'babylonjs';

class Script implements IScript {
    // Public members
    public blackColor = new Color4(0, 0, 0, 1);
    public customParam: string = '';

    /**
     * Constructor
     * @param mesh the mesh reference the script is applied on. Can be of type "Scene", "Light", etc.
     * @param scene the scene reference containing the current script.
     */
    constructor (public mesh: Mesh, public scene: Scene) {

    }

    /**
     * Called once starting the script
     */
    public start (): void {
        // You can access the scene everywhere.
        // That means the scene is globally accessible
        this.scene.clearColor = this.blackColor;

        // You can access the attached object everywhere
        // The attached object can also be "scene", "pointlight", etc.
        console.log(this.mesh);

        // Finally, you can console.log a custom parameter set from the editor
        console.log(this.customParam);
    }

    /**
     * Called on each frame
     */
    public update (): void {
        // Your code... For example:
        this.mesh.rotation.y += 0.01;
    }
}

// Function that exports the script
exportScript(
    Script, // Constructor of the script. No parameters allowed

    // Custom parameters accessible from the editor in order to customize the script.
    // These values will be available in the Inspector panel in the folder 'Script'
    { customParam: 'Hello' }
);
```

## Debugging the code
Once you are happy and want to test your code, just run the scene by clicking in the toolbar **Play and Debug**. The editor will open a new window.

To see errors and debug your code (break points, logs, etc.), just type F12 in the new opened window. To set breakpoints, all the custom scripts are available at **behaviors/**. For instance, sourcemaps are not supported but will come in future versions.

## Importing custom classes in your scripts

To help you factorizing your code, you can create different kinds of scripts:
* Scripts that you'll attach to nodes
* Scripts used to store functionalities

Given this script named `"Maki"` attached to `Sphere Standard`:
![EditorCodeEditor](/img/extensions/Editor/CodeEditor/maki.png)

We would like to import a class we'll write to create new instances and call methods. To add a new script you'll import, just click the button "Add" in the assets panel and give it a name (here `"Dog"`):
![EditorCodeEditor](/img/extensions/Editor/CodeEditor/dog.png)

By default, the new class implements a constructor and a function `"log"`.

Let's rename the class to `Dog`:

![EditorCodeEditor](/img/extensions/Editor/CodeEditor/class_dog.png)

Back to our script `"Maki"`, we are now able to import the class `Dog` from the script named `"Dog"`:

![EditorCodeEditor](/img/extensions/Editor/CodeEditor/maki_final.png)

Then, running your project, the `.log` function is called:

![EditorCodeEditor](/img/extensions/Editor/CodeEditor/maki_result.png)

## Accessing the project files
The Editor is designed to create, edit and add the maximum of scene objects using the Editor's tools. The code editor is done to only interact with the scene objects and add logic.
Anyway, it is also possible to create scene objects in scripts such as textures etc. and that means you have to access the files.

To access the files of the project in your scripts, you have to use the editor's tools class to get the right URLs of the wanted files.
Each script exposes a **`tools`** object that contains some useful methods. In our case, the tools provide a method to get a the real URL of a file according to its name.

Example creating a cube texture:

```javascript
import { Scene, CubeTexture } from 'babylonjs';

class Script implements IScript {
    /**
     * Constructor
     * @param mesh the mesh reference the script is applied on. Can be of type "Scene", "Light", etc.
     * @param scene the scene reference containing the current script.
     */
    constructor (public mesh: Mesh, public scene: Scene) {

    }

    /**
     * Called once starting the script
     */
    public start (): void {
        const cubeTexture = new CubeTexture('Space', this.scene, null, false, [
            tools.getFileUrl('tex1.jpg'),
            tools.getFileUrl('tex2.jpg'),
            tools.getFileUrl('tex3.jpg'),
            tools.getFileUrl('tex4.jpg'),
            tools.getFileUrl('tex5.jpg'),
            tools.getFileUrl('tex6.jpg'),
        ]);

        this.mesh.material.reflectionTexture = cubeTexture;
    }
}

...
```

Adding Animations

Using the Animations Editor

Overview

Adding keys

Removing keys

Previewing Animation

Example animating the alpha value of a material