swordmaster by swordmaster November 3, 2018
Tutorial

Summary

Character dialog is key part of any entertaining RPG game, and it is important to keep that dialog as interesting as possible for the reader. The RPGWizard comes bundled with an animated typewriter style dialog window, which was inspired by the Zelda games that I played in my childhood. It supports fully animated text, typing sounds, profile pictures, and a flashing next indicator, all this functionality is completely free!

Steps

Using the default dialog is incredibly simple, and only requires a few lines of code to get your characters talking! For example, to create the dialog above you will just need to ensure that you have loaded the default programs into the engine. Then you can supply the text, and any other images you want to display. See the below code snippet from "The Wizard's Tower" for a better idea:


// Declare the program assets we will need to load.
var assets = {
  "programs": [
      "defaults/gui.js",
      "defaults/dialog.js"
  ]
};


// Text used of the intro.
var introText = 
"For as long as the villagers can remember the wizard's tower has stood upon the " +
"grey plains. A reminder to not leave the village after dark. " +
"Every hundred years somebody always goes missing from the village. " +
"And the hundred years is up. " +
"And this time is no different, apart from the fact that the girl that is missing is the " +
"sister of a knight. " + 
"Without delay he grabs his armour and heads to the tower.....";

rpgcode.loadAssets(assets, function() {

      // Specify the config for the dialog.
      var config = {
         position: "CENTER",
         nextMarkerImage: "next_marker.png",
         profileImage: rpgcode.getCharacter().graphics["PROFILE"],
         typingSound: "typing_loop.wav",
         text: introText
      };
      
      // Show the intro dialog.
      dialog.show(config, function () {
        // Dialog has finished, do something interesting next.
        // TODO
      });

});

                                

The default dialog system uses a single key "E" to advance the dialog a full description can be found in the table below:

Key Mappings
Key What it Triggers
E If there is more dialog to be shown it will trigger its display, otherwise it will close the dialog window, and trigger the supplied callback function.

The dialog.show function must be passed a configuration object, and a callback function to invoke when the dialog has finished. There are only a small number of configuration options that can be set, all of them are optional excluding the text to display (for obvious reasons). You learn more about how to use and configure the dialog box from its API Reference. Below you will find a table containing a list of all the configuration options that can be set, and what they will do:

Configuration Parameters
Parameter Description Required Example Values Default Value
text The actual text to show in the dialog, will be automatically word wrapped, and split across several boxes if it is too long for a single box. Yes Hello world! N/A
position Specifies the general position the dialog box will appear at on the screen. No TOP, CENTER, BOTTOM BOTTOM
nextMarkerImage The image file to load and use as the dialog flashing next marker. No next_marker.png N/A
profileImage The image file to load and use as the speaker's profile image. No rpgcode.getCharacter().graphics["PROFILE"] N/A
typingSound The sound file to play will the text is being drawn. No typing_loop.wav N/A

A Note on Customisations

Manual Customisations

While you are free to customise and redistribute the default systems, you will have merge your customisations with newer versions yourself.