Creating an extension - Display elements

Often you want to display items in the game, for example:

  • A life bar
  • UD
  • Image
  • etc

Classes RPGJS manager display are :

  • Scene_Map : Main class map
  • Spriteset_Map : the various elements of the map
  • Sprite_Character : Character element in map

To access at Spriteset_Map and Sprite_Character classes, you must recover the scene. Several ways

  1. Recovery with API CanvasEngine :

    var scene = RPGJS_Canvas.Scene.get("Scene_Map");
    

    In RPGJS, you can access classes CanvasEngine with the global variable RPGJS_Canvas

  2. In a method that returns the scene

    mapLoadImages: function(array_img, scene) {
    
    }
    
  3. With the scene property

     drawCharactersEnd: function(spriteset_map) {
            var scene = this.scene;
     }
    

Note that there are methods which refers directly to Spriteset_Map or Sprite_Character

To get Spriteset_Map class :

var spriteset = scene.getSpriteset(); 

To retrieve a Sprite character in map :

var chara = spriteset.getEvent(1);

1 is the identifier of the event. To retrieve the player, put 0

Structure of the extension

At this point, here is the structure of our extension :

  1. Server side, we have a blank class :

     Class.create("Game_Foo", {
    
    
     }).extend("Game_Plugin");
    
  2. Display side, we get classes when the map and events were designed :

    Class.create("Sprite_Foo", {
    
        drawCharactersEnd: function(spriteset_map) {
            var scene = this.scene;
            var chara = spriteset_map.getEvent(0);
        }
    
    }).extend("Sprite_Plugin");
    

Create elements with CanvasEngine

The scene recovered will allow us to create elements :

    Class.create("Sprite_Foo", {

        drawCharactersEnd: function(spriteset_map) {
            var scene = this.scene;
            var chara = spriteset_map.getEvent(0);

            var el = scene.createElement();
            el.fillStyle = "red";
            el.fillRect(0, 0, 32, 32);
            el.opacity = 0.3;

            chara.getSprite().append(el);

        }

    }).extend("Sprite_Plugin");

Here we create a red square on the player. This is not very useful, but it shows the use of CanvasEngine

Load images

If you want to display an image, you must first load :

A method named mapLoadImages() to retrieve the array of images to load :

    mapLoadImages: function(array) {

        array.push(RPGJS.Path.getFile("pictures", "foo.png", "foo"));

        return array;
    }

We add a picture named foo.png with foo id. Info getFile()

In a more complete example, here is his use :

   Class.create("Sprite_Foo", {

    mapLoadImages: function(array) {

        array.push(RPGJS.Path.getFile("pictures", "foo.png", "foo"));

        return array;
    },

    drawCharactersEnd: function(spriteset_map) {
        var scene = this.scene;
        var chara = spriteset_map.getEvent(0);

        var el = scene.createElement();
        el.drawImage("pictures_foo");

        chara.getSprite().append(el);

    }

}).extend("Sprite_Plugin");

Note that to get the image in CanvasEngine, the identifier is: type +" _ "+ id

You have the same concept with the sounds with the mapLoadSounds () method