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 클라스를 상속받아 객체지향적(OOP)인 코딩을 하는 방법입니다. 첫번째 방법으로도 충분히 원하는 결과물을 만들 수 있지만 복잡한 프로그램을 체계적으로 만들고 싶을 때 사용할 수 있는 "옵션"입니다.

Starter Program

Starter Program은 Text Game Maker JS의 라이브러리 파일과 간단히 텍스트를 출력하는 샘플 코드(main.js), 그리고 라이브러리 파일과 샘플 코드를 브라우저에 출력하는 index.html파일로 구성되어 있습니다. 이 게시물에서는 예제의 게임 제작에 앞서, 이 Starter Program의 코드를 살펴봅시다.

https://github.com/a-mean-blogger/text-game-maker-js/releases 에서 text-game-maker-js-starter-program.zip을 다운받은 후 앞축을 풀고 index.html을 더블클릭하여 Starter Program을 실행해 봅시다.

윈도우의 메모장등의 텍스트 에디터 프로그램으로 main.js 파일을 열어서 샘플코드를 살펴봅시다.

**웹 버전으로 보기: main.js (클릭)

var screenSetting = {
  /* Default Values */
  // canvasId: 'tm-canvas', // HTML 파일에서 화면으로 사용할 대상의 ID
  // frameSpeed: 40, // 초당 프레임의 수
  // column: 60, // 화면 가로 길이
  // row: 20, // 화면 세로 길이
  // backgroundColor: '#151617', // 배경의 색
  // webFontJsPath: 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js', // 폰트 로더(webFontJS)의 위치 -- 바꾸지 마세요
  // fontFaceObserverJsPath: 'https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.js', // 폰트 옵져버(fontFaceObserverJs)의 위치 -- 바꾸지 마세요
  // 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 이라는 변수를 선언하고 있습니다. 대부분 항목은 주석처리되어 있고 column과 row값만 지정되어 있는 것을 볼 수 있습니다. 이 변수는 HTML5 canvas 화면을 만드는 인스턴트(TM.screenManager)를 생성할 때 전달됩니다. 주석처리된 부분은 설정할 수 있는 값들과 기본값을 표시한 것이며 따로 값을 설정해 주지 않으면 기본값이 사용됩니다.

위 코드를 통해 Starter Program은 스크린의 크기를 가로 70칸(column) 세로 9줄(row)으로 설정한 것을 알 수 있습니다. (주석처리된 부분을 통해 기본 크기는 60칸, 20줄 인 것도 알 수 있습니다.)

var charGroups = {
  /* Default Values */
  // korean: {
  //   chars: '\u3131-\uD7A3', //ㄱ   -힣 //대상 그룹의 유니코드 그룹
  //   isFullwidth: true, // 2칸짜리 글씨라면 true, 한칸짜리 글씨라면 false
  //   sizeAdj: 1, // 대상 그룹의 크기 (0.5라면 원래크기의 절반, 2라면 원래크기의 2배)
  //   xAdj: 0, // 대상 그룹의 x위치 조절
  //   yAdj: 0, // 대상 그룹의 y위치 조절
  // },
  // fullwidth: {
  //   chars: '\u2500-\u2BFF\u2022\u2008', // ■□★☆△▷▽◁┍┑┕┙│━┏┓┗┛━┃...
  //   isFullwidth: true,
  //   sizeAdj: 1.2,
  //   xAdj: -0.05,
  //   yAdj: 0.03,
  // },
};

charGroups 변수는 특정한 문자 그룹들에 대한 설정을 담고 있으며, screenSetting와 마찬가지로 TM.screenManager를 생성할 때 전달됩니다. 모든값이 주석처리되어 있어 Starter Program은 기본값만을 사용하는 것을 알 수 있습니다.

기본으로 korean 그룹과 fullWidth 그룹이 설정되어 있으며, 필요에 따라 새로운 그룹을 추가할 수 있습니다.

var debugSetting = {
  /* Default Values */
  // devMode: false, // true이면 디버깅 값들을 표시
  // outputDomId: 'tm-debug-output', // HTML 파일에서 디버깅 값을 표시할 대상의 ID

  devMode: true,
};

debugSetting 변수는 디버깅에 대한 설정을 담고 있으며, 디버깅 데이터를 표시하는 인스턴트(TM.debugManager)를 생성할 때 전달됩니다.

디버깅 데이터의 출력을 위해 devMode 항목을 true로 덮어썼습니다. 기본값은 false로 디버깅 데이터를 화면에 출력하지 않습니다.

var TMS = new TM.ScreenManager(screenSetting,charGroups),
    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)에 변수를 선언하고 각각의 인스턴스를 대입하였습니다. screenSetting, charGroups, debugSetting의 객체 혹은 그 객체의 값들이 전달되는 것을 알 수 있습니다.

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

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에는 커서를 움직이거나 숨기거나, 보이게 하거나 하는 함수들(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!');

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,
});

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

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

댓글

댓글쓰기

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

UP