Game Tutorial 1

Objective

• Create game frame object and draw it.
• Learn how to change Screen default settings and how to create Screen. (See also: TM.ScreenManager)
• Learn how to hide cursor on Screen. (See also: TM.ScreenManager_Cursor)
• Learn how to print text on Screen. (See also: TM.ScreenManager)

Code

**View source code: game-tutorial1.js

var screenSetting = {
  // canvasId: 'tm-canvas',
  // frameSpeed: 40,
  // column: 60,
  // row: 20,
  // backgroundColor: '#151617',
  // webFontJsPath: 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js',
  // fontFaceObserverJsPath:'https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.js',
  // fontColor: '#F5F7FA',
  // fontFamily: 'monospace',
  // fontSource: null,
  // fontSize: 30,
  // zoom: 0.5,
  column: 55,
  row: 22,
  fontFamily: 'Nanum Gothic Coding',
  fontSource: 'https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding',
};

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

This piece of code sets the number of column to 55, the number of row to 22.

It also sets an external font - Nanum Gothic Coding from https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding

It's better use monospace fonts(a fonts that has the same width for each character), coding fonts are a good choice.

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

TMS, TMI and TMD are created. Only TMS will be used in this poster, other will be used in later tutorial.

Screen is created when TMS is created.

TMS.cursor.hide();

TMS.cursor.hide function hide the blanking cursor on Screen. 

var frame = {
  x: 5,
  y: 2,
  width: 44,
  height: 18,
  score: 0,
};

frame object has the data for drawing the game frame.

function draw(){
  //clearScreen
  TMS.clearScreen();

  //draw score
  TMS.insertTextAt(frame.x,frame.y-1,"Score: ");
  TMS.insertText(frame.score);

  //draw frame
  for(var i=0; i<frame.height; i++){
    for(var j=0; j<frame.width; j++){
      if((i===0 || i==frame.height-1 || j===0 || j==frame.width-2)&&(j%2 === 0)){
        TMS.insertTextAt(frame.x+j,frame.y+i,"■");
      }
    }
  }
}

draw function is created. It deletes everything on Screen using TMS.clearScreen function, then draw the game frame and game score using  TMS.insertTextAt and TMS.insertText functions.

draw();

draw has been called.

Run Example

The game frame is on Screen.

Before you move to the next chapter, practice changing settings of Screen and print texts on it.