Introduction

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 enemies moving from 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 press the arrow keys.
  • Score increases and a new enemy appears when the player hits the enemy.
  • A new enemy also appear when an existing enemy hit the bottom of the frame.
  • X position, and speed of a new enemy are 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/print 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 and 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 comprises a Text Game Maker JS library file, a sample code file(main.js) and index.html file that execute the sample file with the library file.
in this post, let's see what's in the sample code.

Download text-game-maker-js-starter-program.zip file from https://github.com/a-mean-blogger/text-game-maker-js/releases, unzip it and then double click index.html

Open main.js file with an text editor program like Notepad in Windows

**View the code on the browser: main.js (click)

var screenSetting = {
  /* Default Values */
  // canvasId: 'tm-canvas', // DOM ID in HTML file to create Screen
  // frameSpeed: 40,
  // column: 60,
  // row: 20,
  // backgroundColor: '#151617',
  // webFontJsPath: 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js', // don't change this
  // fontFaceObserverJsPath: 'https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.js', // don't change this
  // fontColor: '#F5F7FA',
  // fontFamily: 'Nanum Gothic Coding',
  // fontSource: 'https://cdn.jsdelivr.net/font-nanum/1.0/nanumgothiccoding/nanumgothiccoding.css',
  // fontSize: 30,
  // zoom: 0.5,

  column: 70,
  row: 9,
};

screenSetting is an object variable 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.

you can see it  overwrites number of column and row to the default settings.

var charGroups = {
  /* Default Values */
  // korean: {
  //   chars: '\u3131-\uD7A3', //ㄱ   -힣 // target Unicode range
  //   isFullwidth: true, // true to 2 blocks characters, false to 1 block characters
  //   sizeAdj: 1, // size adjustment for this group (0.5 for half size, 2 for 2 times larger)
  //   xAdj: 0, // x position adjustment for this group
  //   yAdj: 0, // y position adjustment for this group
  // },
  // fullwidth: {
  //   chars: '\u2500-\u2BFF\u2022\u2008', // ■□★☆△▷▽◁┍┑┕┙│━┏┓┗┛━┃...
  //   isFullwidth: true,
  //   sizeAdj: 1.2,
  //   xAdj: -0.05,
  //   yAdj: 0.03,
  // },
};

charGroups variable contains special setting for certain characters selected by Unicode range. Same as above, the commented lines are the default values.

there are 'korean' group and 'fullwidth' group as default, you can add your own group as your needs

var debugSetting = {
  /* Default Values */
  // devMode: false, // true to debugging values
  // outputDomId: 'tm-debug-output', // DOM ID in HTML file to show the values

  devMode: true,
};

debugSetting is an object variable when TM.debugManager's instance is created.

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 = 'http://a-mean-blog.com/en/blog/Text-Game-Maker-JS';

These are the variables that is used in Starter Program.

TMS.cursor.move(x,y);

TMS.cursor 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 takes text, color, background color and font name as parameters and prints text on the current cursor location. "\n" in text break line and move the cursor's x position to the initial x position.

color, background color and font name and 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.

TMD.print('debug-data',{
  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!

Comments

Add Comment

Login with SNS account to write comments. see details

UP