[HTML5 Game] Moving Object

이번 글에서는 게임 오브젝트를 움직여 이동시키는 방법에 대해 알아보자.

키보드의 방향키에 반응하여 상,하,좌,우로 움직여 볼텐데 뻔한 개념이니 바로 코드를 살표보자.

 

먼저 다음과 같이 Character 객체 기반을 작성한다. 지금까지 작성해오던 코딩 패턴과 유사하기에 별도의 설명은 생략하며, 위치 정보를 위한 position 객체 변수와 이 값을 기준으로 이미지를 그리고 있는 것을 확인하자.

function Character(asset, x, y, canvasElement){ 
  this.canvasSize = {width: canvasElement.width, height: canvasElement.height};
  this.canvasContext = canvasElement.getContext('2d');
 
  this.asset = asset;
  this.position = {x: x, y: y}; 
  
  this.drawCharacter = function(){  
      this.canvasContext.clearRect(0, 0, this.canvasSize.width, this.canvasSize.height);    
      this.canvasContext.drawImage(asset, this.position.x, this.position.y);  
   }
}

 

이어지는 코드에서는 키보드의 방향키에 반응하여 앞서 생성한 Character 객체의 위치 값(position)을 변경하면서 그리기 작업을 호출하고 있다. speed라는 전역변수는 이동 속도 즉 간견을 위한 값이다. 여기서 사용한 캐릭터는 전투기 이미지인데 구글에서 다운 받아서 무단으로 사용한 것이다 ㅡ,ㅡ;

var fps = 30;
var canvasElement;
var gameContext;
var character;         
var asset;  
var speed = 10;
   
function init(){
  canvasElement = document.getElementById('GameCanvas');
  gameContext = canvasElement.getContext('2d');
  
  asset = new Image(); 
  asset.src = 'image/fighter.png';        
  asset.onload = onAssetLoadComplete;      
}

 

function onAssetLoadComplete(){
 var frameCounter = new FrameCounter();  
 character = new Character(asset, 200, 200, canvasElement,frameCounter);
 character.drawCharacter();
}

 

function onKeyDown(e){ 
 if(e.keyCode == 37){                //left
   character.position.x -= speed;
 }

 if(e.keyCode == 38){                //up
   character.position.y -= speed;
 }

 if(e.keyCode == 39){                //right
   character.position.x += speed;
 }
 if(e.keyCode == 40){                //down
   character.position.y += speed;
 }
  
 character.drawCharacter();
}

 

window.addEventListener("load", init, false);
window.addEventListener("keydown", onKeyDown, false);

 

코드는, 전형적인 자바스크립트 키 이벤트 처리 로직이며 브라우저로 실행해 보면 전투기가 방향키대로 움직이는 것을 확인할 수 있다.

 

 

문제점

브라우저로 결과를 확인해 봤다면 뭔가 완전하지 않다는 것을 느꼈을 것이다. 전투기가 방향키에 반응해 원하는 곳으로 이동 하는 것은 분명하지만 완성도 있는 게임으로써는 뭔가 부족하다.

 

먼저 제일 문제가 되는 것은 '동시 키 입력'이 되지 않는다는 것이다.

예를 들어 대각선 방향으로 이동하기 위해 '→, ↑'  두 키를 동시 누르고 있더라도 뒤에 눌러진 키에만 반응하여 한쪽 방향으로만 이동하게 된다. 이것은 PC에서 Sift, Alt 키와 같은 보조키를 제외하고는 동시키 입력을 지원하지 않기 때문에 발생하는 현상이다. 따라서 이에 대한 처리를 별도로 해 줘야 한다.

 

두 번째 문제는, 전투기 이동의 시작이 매끄럽지 못하다는 것이다. 전투기를 끊김 없이 이동 시키기위해 키를 떼지 않고 계속 누르고 있을 경우 처음 이동이 끊기는 현상을 볼 수 있다. 이것은 키 입력이 지속될 때 발생하는 최초 지연 현상 때문인데 실제로 키 입력의 초당 실행수를 측정해 보면 최초 시작시점에 1~5사의 값이 나오고 이후부터는 최대 30정도로 유지되는 것을 확인할 수 있었다.

 

결국 이 두가지 문제를 해결해야 정상적인 이동 처리가 가능하며 다음 글에서 해결된 내용을 살펴볼 것이다.