Introduction

Text Game Maker JS 튜토리얼에 오신것을 환영합니다.

이 게시물 시리즈에서는 Text Game Maker JS의 Starter Program을 사용하여 아래와 같은 간단한 프로그램을 만듭니다.

  • 위에서 아래로 떨어지는 적(X)과 키보드로 조정이 가능한 플레이어([-<>-])가 있습니다.
  • 키보드의 방향키로 플레이어를 움직일 수 있습니다. 화면을 먼저 마우스로 클릭한 후에 키입력이 가능합니다.
  • 적과 플레이어가 충돌하면 점수가 올라가고 새로운 적이 등장합니다.
  • 적이 게임 테두리에 닿으면 새로운 적이 등장합니다.
  • 새로운 적의 등장 x좌표와 이동 속도는 랜덤하게 바뀝니다.
  • 간단한 예제 제작을 위해 게임오버는 없습니다.

위 프로그램을 두가지 다른 방법으로 만들어 보겠습니다.

첫번째 방법은 Text Game Maker JS를 단순 입출력 라이브러리로 사용하는 방법으로 Text Game Maker JS의 매니저 클라스들(TM.ScreenManager, TM.InputManager, TM.DebugManager)만 사용합니다. Text Game Maker JS의 가장 기본적인 기능만 쓰고 나머지는 자신의 방법대로 자유롭게 코딩할 수 있는 방법입니다.

두번째 방법은 Text Game Maker JS를 프레임워크로 사용하는 방법으로 TM.IObject, TM.ILoopObject, TM.IProgram 클라스를 상속받아 객체지향적인 코딩을 하는 방법입니다. 첫번째 방법으로도 충분히 원하는 결과물을 만들 수 있지만 복잡한 프로그램을 체계적으로 만들고 싶을 때 사용할 수 있는 "옵션"입니다.

Starter Program

Starter Program에는 Text Game Maker JS 파일과 기본 html, JS 코드가 들어있습니다.
https://github.com/a-mean-blogger/text-game-maker-js/releases 에서 다운 받을 수 있습니다. 이 포스팅에서는 main.js 코드를 살펴보겠습니다.

**소스 코드: main.js

var screenSetting = {
  // canvasId: 'tm-canvas',
  // fontSize: 30,
  // frameSpeed: 10,
  // zoom: 0.5,
  // column: 60,
  // row: 20,
  // backgroundColor: '#151617',
  // defalutFontColor: '#F5F7FA',
  // webFontJsPath: 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js',
  // fontFamily: 'monospace',
  // fontSource: null,
  column: 70,
  row: 9,
};

screenSetting은 HTML5 canvas 스크린을 생성할 때 사용되는 오브젝트입니다. 주석처리된 부분은 기본값을 표시한 것이며 따로 값을 지정해 주지 않으면 기본값이 사용됩니다. 각각 항목의 의미는 TM.defaultSettings.screen 문서를 참고해 주세요.
위 코드를 통해 Starter Program은 가로 70칸(column) 세로 9줄(row)으로 기본 설정을 덮어쓴 것을 알 수 있습니다.

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

debugSetting은 TM.debugManager의 인스턴스 생성에 사용되는 오브젝트 입니다. 마찬가지로 주석처리된 부분은 기본 값을 표시한 것이며, 각 항목의 의미는 TM.defaultSettings.debug 문서를 참고해 주세요.
디버깅 데이터의 출력을 위해 devMode 항목을 true로 덮어썼습니다.

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

Text Game Maker JS의 세 매니저 클라스인 TM.ScreenManager, TM.InputManager, TM.DebugManager의 인스턴스를 생성하는 코드입니다. TMS(TM.ScreenManager), TMI(TM.InputManager), TMD(TM.DebugManager)에 각각의 인스턴스를 대입하였습니다.

  • TM.ScreenManager: canvas 스크린을 생성하고 텍스트를 출력/삭제하는 인스턴스를 만드는 클라스입니다.
  • TM.InputManager: 사용자 입력을 확인하는 인스턴스를 만드는 클라스입니다.
  • TM.DebugManager: 디버깅 데이터를 출력하는 인스턴스를 만드는 클라스입니다.

TMS와 TMD 생성시에는 각 생성자에 위에서 만든 설정 오브젝트를 넣어주었습니다.

TMS는 인스턴스가 생성되는 즉시 브라우저에 스크린을 생성하며, TMS의 함수들로 스크린을 조작할 수 있습니다.

TMI 생성시에는 첫번째 인자로 키입력을 감지할 키입력 감지할 HTML tag ID를 문자열로 받고, 두번째 인자로 감지된 입력값을 브라우저 콘솔에 출력할지 말지를 true/false로 받습니다. 즉 위 코드의 경우 첫번째 인자(screenSetting.canvasId)는 undefined이 전달되어 기본값(화면)이 적용되고, 두번째 인자는 true가 전달되어 감지된 입력값을 브라우저 콘솔에 출력하게 됩니다.

var x = 1,
    y = 1,
    blogUrl = 'http://a-mean-blog.com/en/blog/Text-Game-Maker-JS';

Starter Program에서 사용되는 변수들입니다.

TMS.cursor.move(x,y);

TMS.cursor는 TM.ScreenManager_Cursor의 인스턴스가 들어있으며 커서를 옮기는 함수(move), 숨기는 함수(hide), 보이게 하는 함수(show)가 있습니다. 
TMS.cursor.move함수로 커서를 변수 x값, 변수 y값인 1,1로 옮기는 코드입니다.

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

TM.ScreenManager의 인스턴스인 TMS는 스크린 조작을 위한 다양한 함수들이 들어 있습니다. insertText 함수는 인자로 텍스트, 글자색, 배경색을 받아 현재 커서 위치에 텍스트를 출력합니다. 텍스트에 \n을 넣으면 줄바꿈이 되며, 줄을 바꾼 후 커서를 해당 텍스트의 처음 시작 x좌표로 옮깁니다. 글자색, 배경색은 canvas에서 지원하는 형태의 색깔 포맷으로 입력할 수 있으며 글자색, 배경색을 입력하지 않은 경우 자동으로 TMS에 설정된 기본값이 입력됩니다.

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

insertTextAt 함수는 추가로 x,y좌표를 받아 해당좌표로 커서를 이동한 후 텍스트를 출력합니다. TM.ScreenManager의 인스턴스는 위 함수들 외에도 화면조작을 위한 다양한 함수들을 가지고 있습니다. 해당 문서를 참고해 주세요. 

TMD.print('debug-data',{
  x: x,
  y: y,
  'Blog Url': blogUrl,
});

TM.DebugManager의 인스턴스인 TMD는 브라우저에 텍스트로 디버깅 데이터를 출력할 수 있는 print함수를 가지고 있습니다. 첫번째 인자로 디버깅 이름이 들어가고 두번째 인자로 출력할 오브젝트가 들어갑니다. 입력된 오브젝트는 JSON 형태로 화면에 출력됩니다.

Starter Program에는 TMI가 사용되지 않았는데, 앞으로의 튜토리얼에서 설명됩니다. 다음 게시물부터는 처음에 봤던 게임을 만들어 보겠습니다.

댓글

댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP