Game Tutorial 1

목표

• 게임 테두리 객체를 만들고 화면에 표시합니다.
• 스크린의 기본 설정을 바꾸는 법과 스크린을 생성을 익힙니다. (참고문서:TM.ScreenManager)
• 스크린에 커서를 숨기는 법을 익힙니다.(참고문서: TM.ScreenManager_Cursor)
• 스크린의 원하는 위치에 텍스트를 표시하는 법을 익힙니다. (참고문서:TM.ScreenManager)

코드

**소스 코드: 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,
};

가로 칸수를 55로, 세로 칸수를 22로 하고, 외부폰트를 가져옵니다. 외부 폰트의 위치는 https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding 이며 폰트의 이름은 Nanum Gothic Coding입니다. 참고로 폰트는 monospace 계열(각 글자의 가로길이가 모두 같은 폰트계열)이 보기에 좋고, 특히 coding용 폰트가 좋습니다. 

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

TMS, TMI, TMD를 생성해 줍니다. Game Tutorial 1에는 TMS만 사용하고, 나머지는 나중의 튜토리얼에서 사용됩니다.

TM.ScreenManager의 인스턴스를 생성하면 스크린이 생성됩니다.

TMS.cursor.hide();

TMS.cursor.hide 함수는 깜박이는 커서를 안보이게 해줍니다.

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

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라는 이름으로 함수를 만들고 화면을 그리는 코드를 작성하였습니다. 먼저 TMS.clearScreen() 함수로 스크린을 전부 지운 후에 TMS.insertTextAt 함수와 TMS.insertText 함수를 사용하여 점수와 게임 테두리를 그립니다.

draw();

draw 함수를 호출합니다.

예제의 실행

게임의 테두리가 표시됩니다.

다음 강의로 넘어가기 전에 스크린의 기본 설정을 바꾸어보고 TMS.insertTextAt 함수와 TMS.insertText 함수를 사용하여 텍스트를 입력하는 연습을 해봅시다.