TM.ILoopObject

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

타입

인터페이스 클라스(TM.IObject를 상속받음)

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

용도

자체적으로 반복하는 객체의 클라스를 만들 때 사용됩니다. 프로그램 실행중에 일정한 시간 간격을 두고 움직이거나 변하는 객체를 만들때 사용됩니다.(예: 게임의 적군, 아군 비행기 등)

사이클

생성생성자에 의해 인스턴스가 생성됩니다.
활성화init 함수로 활성화가 됩니다. 반복이 시작됩니다.
반복calculatecalculate 함수를 실행합니다.
drawdraw 함수를 실행합니다.
비활성화inactivate 함수로 비활성화가 됩니다. 반복이 중지됩니다.

생성자 인자들

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

항목들

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

함수들

  • init(): 인스턴스를 활성화 상태로 만듭니다. 기본적으로 인스턴스 생성시 자동 실행되지만 생성자에서 인자 skipInit으로 true를 전달 받으면 인스턴스 생성시 자동 실행되지 않습니다. 이 경우 이 함수를 직접 호출하여야 인스턴스가 활성화 상태가 됩니다.
  • inactivate(): 인스턴스를 비활성화 상태로 만들고 반복을 멈춥니다. init함수를 호출하여 다시 활성화시킬 수 있습니다.
  • calculate(): 인스턴스가 활성화 상태일 때 반복하여 실행됩니다. this.data의 값을 변경하는 함수입니다.
  • draw(): 인스턴스가 활성화 상태일 때 반복하여 실행됩니다. this.data의 값을 바탕으로 화면에 텍스트를 그리는 함수입니다.

**calculate와 draw는 그 근본이 다른 것이 아니라 this.speed를 간격으로 반복하는 빈 함수입니다. 역할에 따라 코드를 분리하여 코딩을 알아보기 쉽게 하는 것이 목적입니다.

함수의 상속(확장)

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

  • _init: 인스턴스가 활성화 될 때 해야할 일을 작성합니다.(예: 게임 테두리를 화면에 그림)
  • _inactivate: 인스턴스가 비활성화 될 때 해야할 일을 작성합니다.(예: 게임 테두리를 화면에서 지움)
  • _calculate: 반복중에 this.data의 값들을 계산하는 코드를 작성합니다.
  • _draw: 반복중에 this.data의 값들 바탕으로 화면에 텍스트를 그리는 코드를 작성합니다.

코드 작성 예제

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

TM.ILoopObject를 상속받아 x, y좌표와 초기 x방향을 data로 받고, speed를 받아 해당방향으로 10칸씩 왕복운동을 하는 비행기를 만드는 MovingObject 클라스를 만들어 봅시다. 전체 소스 코드(i-loop-object-tutorial.js)와 함께 보시면 더 이해하기 쉽습니다.

메니저 인스턴스 생성

var TMS = new TM.ScreenManager();

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

TM.ILoopObject의 상속

//=============================
// MovingObject
//=============================
// Object Type: TM.ILoopObject
// Description: a sample moving object
var MovingObject = function(speed, data){
  this.data = {
    x: undefined,
    y: undefined,
    dX: undefined, // x direction -1 or 1 (-1:left, 1:right)
    pX: null, // previous x position
    text: '[<>]',
    width: 4,
    turnCount: 0,
  };
  TM.ILoopObject.call(this, speed, data);
};
MovingObject.prototype = Object.create(TM.ILoopObject.prototype);
MovingObject.prototype.constructor = MovingObject;

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

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

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

TM.ILoopObject 함수들의 상속

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

// TM.ILoopObject functions implementation
MovingObject.prototype._init = function(){
  this.data.pX = this.data.x;
};
MovingObject.prototype._inactivate = function(){
  TMS.deleteTextAt(this.data.x, this.data.y, this.data.text);
};
MovingObject.prototype._calculate = function(){
  this.move();
  this.changeDirection();
};
MovingObject.prototype._draw = function(){
  TMS.deleteTextAt(this.data.pX, this.data.y, this.data.text);
  TMS.insertTextAt(this.data.x, this.data.y, this.data.text);
};

MovingObject 함수의 작성

// MovingObject function
MovingObject.prototype.move = function(){
  this.data.pX = this.data.x;
  this.data.x += this.data.dX;
};
MovingObject.prototype.changeDirection = function(){
  this.data.turnCount++;
  if(this.data.turnCount%10 == 0){
    this.data.turnCount = 0;
    this.data.dX = (this.data.dX == 1)?-1:1;
  }
};

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

인스턴스의 생성

var myMovingObject = new MovingObject(200,{x:12,y:2,dX:1});

speed가 200 이며{x:12,y:2,dX:1}를 초기값으로 갖는 myMovingObject 인스턴스를 생성합니다.

예제의 실행

현재 페이지의 브라우저 콘솔을 연 다음 아래의 명령어들을 입력하여 바로 테스트해 봅시다.

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

//myMovingObject를 다시 활성화
myMovingObject.init(); //MovingObject의 새로운 인스턴스(myMovingObject2) 생성
var myMovingObject2 = new MovingObject(300,{x:24,y:4,dX:-1});

댓글

댓글쓰기

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

UP