Programming with the Babylon.js Editor

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.

Project -> Create template…

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:

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:

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:

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:

That’s all, you are now able to communicate with the editor :)

If you test using the debugger, the event will be sent when the user clicks on the plane:

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store