Welcome to the tutorial of Text Game Maker JS.

In this tutorial series, we will code a simple game below using the Starter Program of Text Game Maker JS.

  • There are an enemy moving top to bottom and a player that you can control with your keyboard.
  • The player can be moved pressing arrow keys on your keyboard. Click the Screen first then it will capture your keyboard input.
  • Score increase and new enemy appear when The Player hit the enemy.
  • New enemy appear when the enemy hit the bottom frame.
  • X position and speed of new enemy is random.
  • There is no ending of this game to make the example simple.

We will make this program in 2 different ways.

The first way is using Text Game Maker JS as a input/output library with manager classes (TM.ScreenManager, TM.InputManager and TM.DebugManager) of Text Game Maker JS. You are only using the basic functionalities of Text Game Maker JS then code how ever you want.

The second way is using Text Game Maker JS as a framework with extending TM.IObject, TM.ILoopObject and TM.IProgram classes and build a program as OOP(Object Oriented Programming). This is an optional method to build a complex program in a structure with OOP.

Starter Program

Starter Program includes Text Game Maker JS library file and base HTML/JS codes.
You can download it from

Let's look closer at main.js file.

**View source code: main.js

var screenSetting = {
  // canvasId: 'tm-canvas',
  // fontSize: 30,
  // frameSpeed: 10,
  // zoom: 0.5,
  // column: 60,
  // row: 20,
  // backgroundColor: '#151617',
  // defalutFontColor: '#F5F7FA',
  // webFontJsPath: '',
  // fontFamily: 'monospace',
  // fontSource: null,
  column: 70,
  row: 9,

screenSetting is an object that is used to create HTML5 Canvas Screen. commented lines are the default values so they will be used if you don't use the properties of default values. Please see TM.defaultSettings.screen document to learn each property's meaning.

We can see this setting overwrites number of column and row of default setting.

var debugSetting = {
  // devMode: false,
  // outputDomId: 'tm-debug-output',
  devMode: true,

debugSetting is an object when TM.debugManager's instance is created. Same as above, the commented lines are the default values, please see TM.defaultSettings.debug document to learn each property's meaing.

devMode is true so we can get debug data later.

var TMS = new TM.ScreenManager(screenSetting),
    TMI = new TM.InputManager(screenSetting.canvasId,debugSetting.devMode),
    TMD = new TM.DebugManager(debugSetting);

This is the code to create instances of Text Game Maker's 3 manager classes -TM.ScreenManager, TM.InputManager and TM.DebugManager. the instances are assinged to TMS(TM.ScreenManager), TMI(TM.InputManager) and TMD(TM.DebugManager).

  • TM.ScreenManager: creates an instance that creates HTML5 Canvas Screen and print/delete texts on it.
  • TM.InputManager: creates an instance that captures user inputs.
  • TM.DebugManager: creates an instance that prints debugging data on the browser.

The setting object we saw earlier pass to TMS and TMD's constructors.

Screen appear on the browser when TMS is created, you can control it using functions of TMS.

As constructor parameters of TMI, the first parameter is HTML tag ID that will listen user input and the second parameter is a boolean(true/false) if you want to show the information of user inputs on the browser console. screenSetting.canvasId is undefined so the default value(the canvas tag ID) will apply for the first parameter and true was passed as the second parameter so it will show the information on the browser console when user input is captured.

var x = 1,
    y = 1,
    blogUrl = '';

These are the variables that is used in Starter Program.


TMS.cursor is an instance of TM.ScreenManager_Cursor, it has functions to move, hide and show cursor. 
This code will move the cursor to (1,1) as variable x is 1 and y is 1.

TMS.insertText('Hello World!\n\n', 'white', '#4e4e4e');
TMS.insertText('I\'m Text Game Maker JS!');

TMS, an instance of TM.ScreenManager has many functions to do thing on Screen. insertText function gets text, color, backgroundColor as parameters and print text on the current cursor location. "\n" in text break line and move the cursor's x position to the initial x position.

color and backgroundColor are optional so default value will used if you don't pass them. They can be any formats that HTML5 Canvas takes as color.

TMS.insertTextAt(x,y+5,'Find more information of me at:');
TMS.insertTextAt(x+3,y+6, blogUrl);

insertTextAt function takes additional x and y positions as parameters and move cursor first and then print text.

The instance of TM.ScreenManager has many other functions to control Screen.
Please find them in the TM.ScreenManager document.

  x: x,
  y: y,
  'Blog Url': blogUrl,

TMD, an instance of TM.DebugManager has print function to print debug data to the browser. The first parameter is the name of data set and the second one is an object that will be printed out. This object will be printed as JSON format.

TMI was not used in Starter Program, but it will be explained later tutorials. We will code the game in the beginning in next post!


Add Comment

Login with SNS account to write comments. see details