swordmaster by swordmaster May 30, 2017
Tutorial

Drawing Text

Up until this point all the graphic drawing you have done had been placed on the default canvas. This canvas is created and managed by the engine itself, and is also used by the default dialog system. Creating your own canvas has the advantage of ensuring you do not affect the state of the default one. A canvas can be created using rpgcode.createCanvas which takes: a width, height, and string ID associated with the canvas.

Every time you want to draw onto the canvas you've created you need to pass the ID to the drawing function you want to use. Canvases are expensive objects to keep in the engine's memory so you should destroy it when you've finished with it by passing the ID to rpgcode.destroyCanvas:


/*
 * Example of how to create a custom canvas and draw text to it. 
 */

var customCanvas = "mycanvas";

// Create the canvas to draw onto.
rpgcode.createCanvas(640, 480, customCanvas);

// Move to (270, 300) and draw the text "PRESS SPACE" to the screen
rpgcode.drawText(270, 300, "PRESS SPACE", customCanvas);
rpgcode.renderNow(customCanvas);

// End the program when the spacebar is pressed
rpgcode.registerKeyDown("SPACE", function () {
   rpgcode.clearCanvas(customCanvas);
   rpgcode.endProgram();
}, false); // False here means the keyhandler should not live after this program has ended

                                

Drawing an Image


/*
 * Example of how to create a canvas and draw an image to it.
 */

// Game assets under in this program
var assets = {
    "images": [
        "startscreen.png"
    ]
};

var customCanvas = "mycanvas";

// Load up the assets we need
rpgcode.loadAssets(assets, function() {
   // Create a new custom canvas with dimensions 640x480px
   // with the ID stored in customCanvas.
   rpgcode.createCanvas(640, 480, customCanvas);
   
   // Set the image onto the custom canvas starting at (0, 0)
   // and extending up to (640, 480)
   rpgcode.setImage("startscreen.png", 0, 0, 640, 480, customCanvas);

   // Show the contents of the custom canvas
   rpgcode.renderNow(customCanvas);

   // End the program when the spacebar is pressed
   rpgcode.registerKeyDown("SPACE", function () {
      rpgcode.clearCanvas(customCanvas);
      rpgcode.endProgram();
   }, false); // False here means the keyhandler should not live after this program has ended
});