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.
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.
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.
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.
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.
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.
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 ☺.
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”.
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.
Here we want to verify if the box position coordinates are equal to (0, 0, 0).
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).
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 ☺