swordmaster by swordmaster May 30, 2017
Tutorial

Drawing Text

Placing a piece of text on the screen is very straight forward, you simply to need to specify the (x, y) coordinates if you are using the default canvas. The text will not appear at first and is instead wrote to an off screen buffer. You have to tell the engine that it is ready to be rendered, and also when to clear it.


/*
 * Example of how to draw text to the screen on the default canvas.
 */

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

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

                                

Drawing an Image

Placing an image on the screen is also very straight forward, you simply to need to specify the (x, y) coordinates and the width and height of the image you want to draw. The image will not appear at first and is instead wrote to an off screen buffer. You have to tell the engine that it is ready to be rendered, and also when to clear it.


/*
 * Example of how to set an image on the default canvas and
 * render it to the screen.
 */

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

// Load up the assets we need
rpgcode.loadAssets(assets, function() {
   // Set the image onto the default canvas starting at (0, 0)
   // and extending up to (640, 480)
   rpgcode.setImage("startscreen.png", 0, 0, 640, 480);

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

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