Creating an extension - Start


Here are some essential theoretical concepts to create an extension.

An extension is divided into three parts:

  • Editor: Viewing items in the editor to assign new data to your extension
  • Display: Graphic elements (only) to display in the game
  • Server: Data Manipulation in the game

Hold three external links :

  1. Documentation RPGJS - lastest version
  2. Documentation CanvasEngine - lastest version
  3. Documentation jQuery - for editor, version 1.8.0

Create an extension

  1. Go to the Plugins tab
  2. Click on Create/Edit a plugin
  3. Click on Develop a new plugin
  4. You are prompted to enter information for extensions :

    • Name, description, category, key words
    • The name of the class

  5. The first three tabs incorporate the concepts above. On the Display tab, you have :

    Class.create("Sprite_Map_Name", {

    Note that the class name must not be changed. For the Server tab, you have :

    Class.create("Game_Map_Name", {
  6. To test your extension, click the button. The extension is in the list of your installed with the label (dev) extensions. After a change in the code, it is not necessary to re-click this button.

Your extension has been created !

Use hooks

At a particular time, engine or editor calls a function.

Display Tab

For example, in the game, when the Action key is pressed (Input), then pressAction() method is executed.

A link is present in the list on the left in the Display tab

Class.create("Sprite_Map_Name", {

    pressAction: function(scene_map) {
        console.log("Action key is pressed");


The method can have multiple parameters. Here, scene of current map is returned. This scene is part of the API CanvasEngine : API de CanvasEngine and extends in l'API RPG JS. Thus, you can use methods or create new elements to display content :

Class.create("Sprite_Map_Name", {

    pressAction: function(scene_map) {


Server Tab

On the data side, the principle is the same. For example, when the player comes into contact with an event (collision), the eventContact() is called :

 Class.create("Game_Map_Name", {

    eventContact: function(event, game_map) {


You can get the event concerned and class of managing the map.

Editor Tab

The editor allows you to customize your extension.

Plugin.hook("settings", "game", function(layout, attr) {
    layout.addInput("range", attr.range, {
       label: "Distance"
       min: 0
       max: 10
       type: "number"

A field requiring a distance of between 0 and 10 will be on the settings in editor

Communication between the different parties

With the above code, you may want to get the distance and then display it.

Class.create("Game_Test", {

    eventContact: function(event, game_map ) {
        var range =;
        this.callSprite("displayRange", [range]);


Ci-dessus, nous récupérons la donnée dans la variable globale et nous l'envoyons la classe d'affichage avec la méthode callSprite().

Above, we get the data in the global variable and send it to the class display with callSprite() method.

Class.create("Sprite_Test", {

    el: null,

    drawMapEnd: function(spriteset_map) {
        var stage = this.scene.getStage(),  scene = this.scene;
        this.el = scene.createElement();
        this.el.fillStyle = "black";
        this.el.font = "15px Arial";
        this.el.fillText(0, 0, 0);
        this.el.y = 20;

    _displayRange: function(range) {
        this.el.fillText(range, 0, 0);


As a first step, we create an element after viewing the map (occurs once). The _displayRange() is called by the class wrote earlier server.

Note that the method starts with _ to differentiate personal methods and hook methods

Utilisation des APIs

Side game, you use two APIs: RPGJS and CanvasEngine (links at the beginning of the tutorial)

For example, if you need to activate the switch # 4 when the amount of money is changed, then you will :

Class.create("Game_Test", {

    changeGold: function(val, player) {
        RPGJS.Switches.set(4, true);


Useful links :