API in the game

In the code editor, you have two tabs to create plugins in the game :

  1. Display
  2. Server

It is important to differentiate the two :

  • Display can retrieve data and perform displays. Only displays !
  • Server can process data as the user. After various calculations, they are sent to Display for display.

This allows compatibility archictecture for MMORPG and respects the engine structure of CanvasEngine


The default code is the following :

Class.create("Sprite_MyPlugin", {


MyPlugin is the name of your plugin specified during its creation.


The default code is the following :

Class.create("Game_MyPlugin", {



The API is the RPG JS and CanvasEngine. Consider an example. If you want to display an image after loading the map, you will use the drawMapEnd and mapLoadImages :

Class.create("Sprite_MyPlugin", {

      mapLoadImages: function(array) {
         array.push(RPGJS_Core.Path.getFile("pictures", "hub.png", "hub"));
         return array;

      drawMapEnd: function(spriteset_map) {
           var el = this.scene.createElement(),
           stage = this.scene.getStage();

           el.x = 10;
           el.y = 15;



Here, with the mapLoadImages method, we load up an image using RPG JS API. The image is automatically searched in the Pictures/hub.png directory and has the pictures_hub id

The drawMapEnd method will draw the image on the scene after when displaying the map is completed. We use the API to create a CanvasEngine element, assign the image, position and place it on the stage.

Using data from the editor in the game

You've probably used the Editor tab to add fields in the editor. How to use the data editor in the game ?

RPG JS support multiple data but especially a file containing the data from the database.

Remember that data manipulation is only Server part.

Consider an example.

Onglet Editeur :

Plugin.hook("database", "add_tab", {
    name: "Foo",
    id: "foo"
}, function(layout, attr) {
    layout.addInput("name", attr.name, {
        label: "Name"

Here, we add a tab in the database with a text field only asking any name.

Server Tab :

 Class.create("Game_MyPlugin", {

    loadMap: function() {
        var data = global.data.foo;
        this.callSprite("drawData", [data]);


We recover data from the tab created in the database (with foo id) and send the data to the display

Display tab

 Class.create("Sprite_MyPlugin", {

      _drawData: function(data) {
        for (var id in data) {


The data is then displayed in the console.

It is normal to put a _ before of method. The call system between Display and Server uses this naming convention to differentiate with the methods called by RPG JS