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.

Comments

Add Comment

Login with SNS account to write comments. see details

UP