TM.IObject

소스 코드 보기: https://github.com/a-mean-blogger/text-game-maker-js/blob/master/src/base-objects/i-object.js

타입

인터페이스 클라스

**클라스의 역할이 인터페이스라는 뜻으로 자바스크립트에는 실제로 인터페이스 클라스가 없습니다. 코드 작성시 이 클라스를 직접 사용하지 않고 이 클라스를 상속받는 새로운 클라스를 만들어 사용합니다.

용도

자체적으로 반복하지 않는 객체의 클라스를 만들 때 사용됩니다. 프로그램 실행중에 일정한 시간 간격으로 움직이지 않고 변하지 않는 객체를 만들 때 사용됩니다.(예: 게임의 테투리 등)
TM.IObject는 다른 모든 Text Game Maker JS 클라스들의 기본이 되는 클라스이기도 합니다. 다른 모든 클라스들은 이 클라스를 상속받아 만들어졌습니다.

사이클

생성자 인자들

new TM.IObject(data, skipInit)

• data(옵션): 클라스에서 사용되는 데이터들을 object 형태로 받습니다(예 {x:1,y:2}). 전달받은 data는 this.data에 저장됩니다.
• skipInit(옵션): TM.IObject는 인스턴스가 생성되면 자동으로 init함수를 실행합니다. true/false를 받아 true인 경우 인스턴스 생성시 init함수의 실행을 생략합니다. 값을 전달하지 않으면 자동으로 false가 되어 init함수가 실행됩니다.

항목들

• isActive: init 함수가 실행되면 true(활성화 상태)가 되고 inactivate 함수가 실행되면 false(비활성화 상태)가 됩니다. 현재 활성화/비활성화 상태를 확인할 수 있는 항목입니다.
  **비활성화가 되었다고 해서 해당 인스턴스를 사용할 수 없는 것이 아닙니다. 활성화(this.isActive == true)일 때 행동와 비활성화(this.isActive == false)일 때 행동의 차이가 필요한 함수들은 이 값을 참조하여 직접 그 행동들을 만들어 주어야 합니다.

함수들

• init(): 인스턴스를 활성화 상태로 만듭니다. 기본적으로 인스턴스 생성시 자동 실행되지만 생성자에서 인자 skipInit으로 true를 전달 받으면 인스턴스 생성시 자동 실행되지 않습니다. 이 경우 이 함수를 직접 호출하여야 인스턴스가 활성화 상태가 됩니다.
• inactivate(): 인스턴스를 비활성화 상태로 만듭니다.

함수의 상속(확장)

TM.IObject를 상속할 때 위 함수들의 코드는 해당 함수를 직접 상속받아 작성하지 말고 아래의 함수들(_가 붙어있는 함수들)에 코드를 작성하여야 합니다. 아래 함수들에 코드를 작성하면 _가 없는 함수를 호출하면 _가 있는 함수가 자동으로 실행됩니다.

• _init: 인스턴스가 활성화 될 때 해야할 일을 작성합니다.(예: 게임 테두리를 화면에 그림)
• _inactivate: 인스턴스가 비활성화 될 때 해야할 일을 작성합니다.(예: 게임 테두리를 화면에서 지움)
  

코드 작성 예제

**예제 소스 코드 보기: i-object-tutorial.js

TM.IObject를 상속받아 x,y 좌표를 data로 받고 게임 테두리를 그리는 Frame 클라스를 만들어 봅시다. 전체 소스 코드(i-object-tutorial.js)와 함께 보시면 더 이해하기 쉽습니다.

메니저 인스턴스 생성

var TMS = new TM.ScreenManager();

화면에 텍스트를 그리기 위해 TM.ScreenManager의 인스턴스를 생성하여 변수 TMS에 저장하였습니다.

TM.IObject의 상속

//=============================
// Frame
//=============================
// Object Type: TM.IObject
// Description: a sample game frame object
var Frame = function(data){
  this.data = {
    x: undefined,
    y: undefined,
    frame: [
      '+-----------<  My Frame  >-----------+\n',
      '|                                    |\n',
      '|                                    |\n',
      '|                                    |\n',
      '|                                    |\n',
      '|                                    |\n',
      '|                                    |\n',
      '|                                    |\n',
      '+------------------------------------+\n'
    ],
    todayText: null,
  };
  TM.IObject.call(this, data);
};
Frame.prototype = Object.create(TM.IObject.prototype);
Frame.prototype.constructor = Frame;

TM.IObject를 상속받아 Frame 클라스를 작성하였습니다.

this.data는 클라스가 기본적으로 가지는 값이며, 인자로 전달받는 data는 this.data를 덮어쓰게 되는 값입니다. 이때 인자로 전달받아야 할 값을 this.data의 항목의 undefined로 표시하였고, null은 기본값이 없는 것을 나타냅니다. 즉 이 클라스로 인스턴스를 만들때 data로 x, y를 받아야 한다는 것을 나타냅니다.

skipInit을 전달하지 않았으므로 위 함수를 이용해서 인스턴스를 생성하면 init함수가 자동으로 실행됩니다.

TM.IObject 함수들의 상속

위에서 설명한 것 처럼, 함수를 직접 상속받지 말고 함수이름 앞에 _를 붙여 코드를 작성하면 해당 함수 호출시 같이 호출됩니다. TM.IObject는 init, inactivate를 가지고 있으므로 _init, _inactivate를 작성해 줍니다.

// TM.IObject functions implementation
Frame.prototype._init = function(){
  this.updateTodayText();
  this.drawFrame();
  this.drawTodayText();
};
Frame.prototype._inactivate = function(){
  this.drawTodayText(true);
  this.drawFrame(true);
};

함수가 활성화될 때와 비활성화될 때 호출되어야 하는 함수들을 기록하였습니다. 다음으로 이 함수들을 작성해 줍시다.

Frame 함수의 작성

// Frame functions
Frame.prototype.updateTodayText = function(){
  var today = new Date();
  var year = today.getFullYear();
  var month = today.getMonth()+1;
  var date = today.getDate();
  this.data.todayText = year+'-'+month+'-'+date;
};
Frame.prototype.drawFrame = function(remove){
  TMS.cursor.move(this.data.x, this.data.y);
  for(var i=0; i<this.data.frame.length; i++){
    if(remove) TMS.deleteText(this.data.frame[i]);
    else TMS.insertText(this.data.frame[i]);
  }
};
Frame.prototype.drawTodayText = function(remove){
  TMS.cursor.move(this.data.x+2, this.data.y+1);
  if(remove) TMS.deleteText(this.data.todayText);
  else TMS.insertText(this.data.todayText);
};

data의 값을 변경하고, TMS를 이용하여 화면에 텍스트를 그리고 지우는 Frame의 함수들입니다.

인스턴스의 생성

var myFrame = new Frame({x:2,y:2});

{x:2, y:2}를 초기값으로 갖는 myFrame 인스턴스를 생성합니다.

예제의 실행

현재 창의 브라우저 콘솔에 다음의 명령어를 입력하여 테스트해 봅시다.

//myFrame 비활성화
myFrame.inactivate();

//myFrame를 다시 활성화
myFrame.init();

//Frame의 새로운 인스턴스(myFrame2) 생성
var myFrame2 = new Frame({x:4,y:4});