TypeWriterMessageWindow System - Updated (16/10/2017)

Share completed tutorials and asset packs with the community.
Post Reply
User avatar
swordmaster
Site Admin
Posts: 52
Joined: Tue May 23, 2017 11:22 pm

TypeWriterMessageWindow System - Updated (16/10/2017)

Post by swordmaster » Mon Oct 16, 2017 2:40 pm

Summary
A fully animated typewriter style message window system that can be configured with different colors and sound effects. Similar to those found in the "Legend of Zelda" series of games.

What it looks like:

Image

Where to get it:

This asset pack is hosted directly in the RPGWizard's Github repository in the examples directory, you simply need to download "TypeWriterMessageWindow.js":
Features:
  • Fully animated character typing.
  • Automatic line and window wrapping.
  • Configurable size, colors, sounds, and next marker image.
  • Advances with user keypress.
Basic Usage:

Note: A more detailed example, "Usage.js", is included in the same directory as the library.

Code: Select all

var assets = {
   "programs": [
      "TypeWriterMessageWindow.js"
   ],
   "images": [
      // Provide your own image here.
      //"arrow_18.png"
   ],
   "audio": {
      // Provide your own sound here.
      //"typing": "typing_loop.wav",
   }
};

rpgcode.loadAssets(assets, function() {
   // Pixel settings.
   var width = 250;
   var height = 57;
   var padding = 15;
   var linePadding = 10;

   // Font, typing sound to play, image for the next marker.
   var fontSize = 20 * rpgcode.getScale(); // Proivdes a scalable 20px font size.
   var fontFamily = fontSize + " Arial";

   // Assign the image and sound files if required.
   var typingSound = ""; //"typing";
   var nextMarker = ""; //"arrow_18.png";

   // Only need to call setup once, unless you want to change it again later on.
   TypeWriter.setup(width, height, padding, linePadding, fontFamily, typingSound, nextMarker);

   TypeWriter.showDialog("This text will appear like a typewriter, and wrap across multiple lines.", 
      function() {
         rpgcode.log("The message window has been closed.");
         rpgcode.endProgram() 
      }
   );
});

Post Reply