How to use Javascript events

Using Javascript events, you can insert an arbitrary code of Javascript into your games created with the Web platform.

This can be useful if you want to use some external libraries or a very specific code. With external source files, you can also integrate entire Javascript source files into your game: it's nice to progressively learn Javascript programming or create a game with a programmer.

Add a Javascript event

Simply add the event into a game: the event is called Javascript code.

When added, double click on it to edit the code that will be executed. Note that in the code, you have access to a variable named runtimeScene representing the scene being played. If you choose some objects in the field below the code, then an objects variable will be available. It's an array containing the selected objects.

Check the GDJS documentation for more informations about these types:

To check that the event is working, you can start by calling a simple method on the runtimeScene, like the one to change background color:

runtimeScene.setBackgroundColor(0,0,255); //Set the background to blue.

or change objects position:

for(var i = 0;i<objects.length;++i) {
    objects[i].setX(50); //Set the X position of all picked objects to 50.
}

Use external source files

Using external Javascript source files (.js files) is very easy: just include it into the folder of the game (or a subfolder).

Then, activate the use of external source files in your game property (right click on the game name in the Project Manager, than choose properties, and finally check Activate the use of C++/JS source files).

Now there is a new item in the structure of your projet called Sources. Make a right click on it to choose to create a new source file or to import an existing one.

You can edit the files using GD integrated editor or you preferred text editor (take a look at Sublime Text). When your game will be exported or when you launch a preview, the source files will be integrated to the game.

Source files are included like any other javascript file: if you want to access to functions defined inside, you have to store them into a global object or make these functions globals (just declare it with any prefix, like this: function myFunction() { … }). Then you can call them from your events using a Javascript event.

Tips about writing Javascript code

If you don't know how to code in Javascript, there are lots of nice tutorials available.

Here are some tips about Javascript events and external source files:

  • Always use the debugging tools available in your browser to check if you made errors in your code: any error will block the game from running. Developers tools are most of the time available by pressing F12 in your browser.
  • If you use lots of Javascript in your game, you'll better use external sources files and a dedicated text editor (like Sublime Text).
  • Read the documentation to know how to use the objects and functions provided by GDevelop.

Code examples

Read and change the value of a variable:

var myVar = runtimeScene.getVariables().get("MyVar");
var myVar2 = runtimeScene.getVariables().get("MyVar2");
 
var currentValue = myVar.getAsNumber();
myVar.setNumber(currentValue+1);
 
myVar2.setString("Hello, world");

See the documentation of gdjs.Variable and gdjs.VariablesContainer.