swordmaster by swordmaster May 30, 2017
Tutorial

Dialog on a Delay

In the last part of the tutorial we showed you how to load assets into the engine, here we are going to cover how to actually use them in a dialog window. The RPGWizard engine comes with a simple built-in dialog system where you can set the profile of the person talking and the background image. You can add several lines of dialog to a window, clear it, show it again, etc. Showing a single line of dialog might produce something like this:

In the above example we are using the dialog graphics from the demo game that comes with RPGWizard. Once we've loaded the required images into the engine we can set the dialog box's profile picture and background, and then show a single line of dialog with:


// Set the dialog profile and background image.
rpgcode.setDialogGraphics("sword_profile_1_small.png", "mwin_small.png");

// Show the message in the dialog box.
rpgcode.showDialog("This message will last 5 seconds on screen!");

                                

Extra lines of dialog can be added with more calls to rpgcode.showDialog, and the dialog will remain on the screen until rpgcode.clearDialog is called. One simple way of clearing dialog automatically is to put the call to rpgcode.clearDialog inside a delayed callback using rpgcode.delay. This simple function can be used to execute code after a certain period of time has elapsed:


// Set a timer that removes the message after 5 seconds and ends the program.
rpgcode.delay(5000, function() {
   rpgcode.clearDialog();
   rpgcode.endProgram();
});

                                

You will find the complete code example below for this part of the tutorial:


/*
 * Example of how to set the dialog box graphics, display a message, and close the message 
 * after it has been visible for 5 seconds.
 */

// Game assets used in this program
var assets = {
    "images": [
        "mwin_small.png",
        "sword_profile_1_small.png",
    ]
};

// Load up the assets we need for this program
rpgcode.loadAssets(assets, function() {
   // Set the dialog profile and background image.
   rpgcode.setDialogGraphics("sword_profile_1_small.png", "mwin_small.png");

   // Show the message in the dialog box.
   rpgcode.showDialog("This message will last 5 seconds on screen!");

   // Set a timer that removes the message after 5 seconds and ends the program.
   rpgcode.delay(5000, function() {
      rpgcode.clearDialog();
      rpgcode.endProgram();
   });
});

                                

Dialog with a Key Press

Clearing dialog on key press is nearly identical to the timer example, only instead of setting a delay we wait for a key press. The function rpgcode.registerKeyDown takes three parameters the first being the name of the key we want to listen to, second the callback we want to invoke when it has been pressed down. The final boolean parameter tells the engine whether or not it should listen for this key after the program has ended, setting it to false means it will unregistered automatically when the program ends. Under the hood the RPGWizard engine uses CraftyJs for handling keyboard input and a complete list of all the available keys can be found here.


// Listen for the SPACE key, when it is pressed close the message window.
rpgcode.registerKeyDown("SPACE", function () {
    rpgcode.clearDialog();
     rpgcode.endProgram();
}, false); // False here means the keyhandler should not live after this program has ended.

                                

If you run the complete code example you will be presented with a dialog box, and it will only disappear when the spacebar has been pressed:


/*
 * Example of how to set the dialog box graphics, display a message, and close the message 
 * only after the player presses the spacebar on their keyboard.
 */

// Game assets used in this program
var assets = {
    "images": [
        "mwin_small.png",
        "sword_profile_1_small.png",
    ]
};


// Load up the assets we need for this program
rpgcode.loadAssets(assets, function() {
   // Set the dialog box background image, and profile picture.
   rpgcode.setDialogGraphics("sword_profile_1_small.png", "mwin_small.png");

   // Show the message in the dialog box.
   rpgcode.showDialog("This message will only disapper when the spacebar has been pressed!");

   // Listen for the SPACE key, when it is pressed close the message window.
   rpgcode.registerKeyDown("SPACE", function () {
      rpgcode.clearDialog();
      rpgcode.endProgram();
   }, false); // False here means the keyhandler should not live after this program has ended.
});