Programming with the Babylon.js Editor

Published in

Babylon JS (unofficial)

5 min readDec 5, 2016

The Babylon.js Editor version 1.0 comes with new features including a workflow to add your own code in your games. For example, to add some gameplay functions in it. To do it, just export a template using the editor and you are ready to develop your game :)

This workflow is optimized for Visual Studio Code as it includes all configuration files such as the TypeScript compiler and debugger configurations for Google Chrome.

The Babylon.js Editor is reachable at: http://editor.babylonjs.com

Exporting a game template

The first step consists on exporting a project template using OneDrive or your local storage (using Electron).

Note: this tutorial uses Electron

To export a template, just choose “Template on OneDrive” (or “Create Template” with Electron) in “Project” in the main toolbar.

Then, a window appears showing the current storage folder (OneDrive or local storage).

Content of the template already exported in Desktop/test/ (for example)

Just choose the folder where to export the template and click “Choose”. Now the editor exports the needed files of the template. I mean:

index.html which runs the game
run.bat and run.sh which runs a local webserver (using server.js and node.js) to test your game in your favorite browser
the “scene” folder contains the scene you are editing in the editor
the “materials” folder contains all the materials (JavaScript files) used in the scene (the editor exports only the used materials)
the “libs” folder contains the references to Babylon.js and the Editor Extensions library (the Post-Process Builder for example)
the “defines” folder contains all the TypeScript definition files you’ll need to code (Babylon.js for example)
Finally, the “code” folder which contains your future code. When you export a template, the editor checks if the folder “code” exists. If not, it exports a template of code we will examine

Note: when exporting a template, all the files are overwritten except the files in the folder “code”

Let’s examine the generated tempate

To begin programming your game, let’s open the folder containing your project with Visual Studio Code.

If you open the file “code/game.ts”, you’ll find your main entry point: the GameExtension constructor. In fact, the GameExtension works as an extension of the editor so the instance is automatically created for you when the scene is loaded.

Then, once created, the extensions mechanism will call the function “apply” for you.

The last line (28) registers the extension by calling RegisterExtension

You are totally free to add all the code you want in the function “apply“ using the Babylon.js APIs etc.

Compiling the game

To compile the game, just press CTRL + SHIFT + B (or CMD + SHIFT + B for Mac). Once compiled the file “game.js” (which contains all your code) and its source maps “game.js.map” will be generated in the folder “libs”.

Running the game

To run the game, just execute the file “run.bat” (or “run.sh” on linux and mac). These files are just a shortcut to run the file “server.js” using Node.js. Once you executed the file, the script will install a local web server (if it doesn’t exists yet) in the root folder and will run the game in your favorite browser.

Anyway, you can access the game using the URL http://localhost:8000/

Debugging the game

Anyway, if you want to debug your game in Visual Studio Code, you can use the “Debugger For Chrome” extension:

Once you installed the extension, press F5 in Visual Studio Code. You are now able to debug your game:

Catching events sent from the editor

In the Actions Builder tool

The version 1.0 of the editor comes with a new version of the Actions Builder: the version 2. This Actions Builder tool was designed to be able to load new actions on the fly using the TypeScript definitions files of Babylon.js and the Babylon.js Editor Extensions.

On this principle, the editor extensions come with a new action, with its cute name “SendDevelopmentEventAction”, which allows you to send custom datas, like events, to your code.

The events are organized as:

A namespace, which can contain multiple events
An event name which is in a namespace

In the example above, once the user clicks on the plane, it will execute the action which will send the event named “test” of the namespace “development” with a custom data which contains one key: “stringExample”.

Note: you can name your namespaces and event names as you want

Catching an event using TypeScript

The scene will now send an event (with data) to the namespace “development” using the event named “test”. To receive events, let’s examine the file “code/development.ts” which is used to catch the events sent from the editor.

The class “Development” extends the class “EXTENSIONS.DevelopmentBaseExtension” which allows to catch events. In the constructor, the parent class takes 2 arguments:

the Babylon.js scene
the namespace, which is a string

From now, the only thing to do in this class is to register event listeners using the method “onEvent<T>(eventName, callback)”. Here, the event named “test” for example.

Then, if you come back to the file “code/game.ts”, you just have to register the class “Development” as an event listener using the editor extensions: