Actions Builder

Published in

Babylon JS (unofficial)

7 min readSep 20, 2015

Hello all ☺

For this first article about my beloved BabylonJS framework, let’s talk about a new feature introduced into 2.2 named the “Actions Builder”.

The Actions Builder is part of the 3ds Max plugin made for artists to create actions on their 3D objects without a single line of code (and soon available in web tools like the BabylonJS Sandbox).

For instance, it allows you to create an action that will open a door when the player will push a button. Of course, the button’s color can be changed also.

Featured scenes

The Mansion scene

Can you imagine that this scene has been entirely created by Michel Rousseau without a single line of code? Try to find the interactive part of the scene to have some fun.

The WebGL Paris demo

You can read this great article, wrote by Michel Rousseau, about how he used the Actions Builder to build the WebGL Paris demo.

Stop speaking! How to install it?

If you’re not using the latest Max2Babylon plugin version, just download it here.

Because you’ll use the Actions Builder as a 3ds Max plugin, you have to install the plugin in “3dsMaxFolder/bin/assemblies/” (typically located at C:\Program Files\Autodesk\3ds Max 20xx\). The Actions Builder is located in the “BabylonActionsBuilder” folder.

The selected folder contains the Actions Builder files

Our first example

Let’s create an amazing scene containing a plane and a box in 3ds Max (which is the limit of my awesome skills in 3ds Max).

Now in this first example, we’d like to create an animation on the box. This animation will translate the box until it reaches the coordinates (0, 0, 0). This animation will be launched when the user will left click on the box.

First, we have to set the object as “pickable” to tell to BabylonJS that we want to be able to click on the object. In 3ds Max, right-click on the object, open the “Babylon Properties” and check “Pickable”.

Now that the object is “Pickable”, we’re going to play with the BabylonJS Actions Builder. Let’s add the animation we’d like to perform!

To open the Actions Builder, right-click on the object and select “Babylon Actions Builder”.

Once opened, let’s review the main interface:

On the left, there are 3 lists of elements you can add into the graph. The graph is on the center of the window. This is where we can find our current white box node (which is empty as default).

On the right (empty for now), this is the place where you will modify the parameters of the actions you’d like to create, once added into the graph.

Triggers

You can think of triggers like events. When something (trigger) happens, do something specific (action). There are several triggers you can manipulate in your scenes. For now, the trigger we’re going to use is “left pick” as we want to animate the box when the user left clicks on it.

Actions

An action is executed when a trigger happens, for instance the “left click” trigger. These actions allow you to play animations, play sounds and typically modify a lot of objects’ parameters of your scene. To create the box animation, we will use the “interpolate value” action.

Flow Controls (Conditions)

These elements allow you to add conditions in your graph. For example: when the user left clicks (trigger) on the object, if the object’s position x is 0 (condition) then do the action (action).

How to create our animation

To add elements in the graph, you just have to drag’n’drop elements from the lists to the targeted node in the graph. First, let’s add the “left click” trigger to the root node (our object).

Once the trigger added, every children’s actions you will add to the trigger will be executed when the trigger happens.

In our case, just add the “interpolate value” action as a child of the trigger, it will allow us to interpolate the box position. Once the action added, just click on it and have a look on the parameters.

We added the trigger and the action (interpolate value action)

Most of the actions will contain the following parameters:

target: the target object in the scene, choose type and then the target’s name.
Note: Scene doesn’t have any target
propertyPath: the property we want to modify
example: position.x or material.diffuseColor, etc.)
value: the new value we want to assign to propertyPath

Configure our animation

We want our box’s position to go at the (0, 0, 0) coordinates. A first solution could be to combine 3 actions: 3 “interpolate value” actions that will respectively modify the x, y, and z values. But we can also specifically modify the whole position’s vector by selecting the x, y, z element in the propertyPath combo box.

Test our first action!

Open the “Babylon.JS Exporter” and click “Export & Run”. Now you can click on the box and see that the animation happens ☺.

The video

Adding a condition

Conditions are used to block the actions’ pipeline and then get the control on your scenarios.

Scenario example: If the user left clicks (trigger) on the box, move the box at coordinates (0, 0, 0) (action). If the user left-clicks again (trigger) and if the box position coordinates are (0, 0, 0) (condition) then increase the box scale on y (action).

To implement, this scenario, we need to add a condition after the “interpolate value” action, and then add a “set value” action to increase the box scale.

Why adding the condition after the last action?

Let’s start with the following pipeline:

Imagine a token placed on the “Action 1”. Every time the user left clicks on the box, the token will go on the next action until it loops on the first action.

In our scenario:

The user left-clicks on the box: execute “Action 1”
The user left-clicks again on the box: if the condition is true, execute “Action 2”
The user left-clicks again on the box: come back to the “Action 1” and execute the “Action 1”.
etc.

Adding the condition

To block the token, we must add the condition that will verify if the box position coordinates are (0, 0, 0). If true, execute “Action 2”. If not, execute nothing and don’t move the token.

We can see that our target, propertyPath, value tuple is also present. So, our “target” is the box, the “propertyPath” is “position” and the value is 0, 0, 0 (see above)

The operator is used to know when to set the condition as true. Examples:

If the coordinates (0, 0, 0) “is equal” to the box position, then true else false
If the coordinates (0, 0, 0) “is different” to the box position, then true but if the box position coordinates are (0, 0, 0) the condition is false.
etc.

Here we want to verify if the box position coordinates are equal to (0, 0, 0).

Exercise

Create the pipeline yourself ! ☺

The full pipeline

Here is the full pipeline:

If you try it, the first click will animate the cube to reach the (0, 0, 0) coordinates and if you click again on it, it’ll do nothing until it reached the (0, 0, 0) coordinates. Else, the box scale will be increased to 2 on y.

Multiple pipeline management

BabylonJS Actions Builder allows us to manage multiple pipelines even if triggers are same. It is particularly useful when we need to create distinct behaviors for a same trigger.

Imagine a scene with 3 buttons and a door. When the player clicks on a button, it changes the opening animation of the door. For example, if the first button was pushed, the opening animation will play a sound. If the second button was pushed, the opening animation will set the door as invisible. Etc.

To add another pipeline, simply drag’n’drop a new trigger on the root node in the graph.

Here, on the first click on the cube, its position will reach the (0, 0, 0) coordinates and will increase its scale to (2, 2, 2).

Conclusion

We’ve just created our first example using BabylonJS Actions Builder basic steps. It’s now up to you to free your imagination. Don’t hesitate to play with the Mansion scene created by Michel Rousseau to have an idea of its potential ☺