Game Tutorial 5

목표

• 프로그램의 디버깅데이터를 출력합니다.
• 또한, 지금까지 강의를 따라하면서 아래 두가지가 거슬렸던 분들이 계셨을텐데 :

1. 게임 테두리와 플레이어의 크기, 간격이 미묘하게 맞지 않는 문제

2. 폰트가 로딩되기 전까지 loading... 문구와 함께 기본폰트로 화면이 표시되는 문제

이번에는 이부분을 고쳐보겠습니다.

코드

**소스 코드: game-tutorial5.js

이전 튜토리얼에서 변경이 없는 부분은 설명을 생략합니다.

var charGroups = {
  wall: {
    chars: '■',
    isFullwidth: true,
    sizeAdj: 1.2,
    xAdj: -0.05,
    yAdj: 0.03,
  },
};

charGroup은 특정한 문자들의 출력에 대한 미세조절을 지정하기 위한 세팅입니다. wall은 그룹의 이름으로 원하는 다른 이름을 넣을 수도 있습니다. 

• chars는 해당 그룹안에 들어갈 문자들을 띄어쓰기 없이 넣어줍니다. 지금은 ■만 들어가 있는데, 만약 □도 이 그룹에 넣고 싶다면 '■□' 이렇게 넣어줍니다. 직접 해당문자를 넣지 않고 Unicode 값을를 \u25A0(■), \u25A1(□) 넣을 수도 있습니다.
• isFullwidth는 해당 문자가 전각(두칸을 차지)인지 아닌지(한칸만 차지)를 나타냅니다.
• sizeAdj는 해당 그룹의 문자를 확대, 축소합니다. 1 = 100%
• xAdj, yAdj는 픽셀단위로 해당 그룹의 문자의 위치를 조절합니다. 

var mainInterval;
TMS.onReady(function(){
  mainInterval = window.setInterval(function(){
    calculate();
    draw();
    TMD.print("Player",{x:player.x,y:player.y});
  },30);
});

TMS.onReady 함수는 loading이 있는 경우 loading이 끝나면 해당 함수부분을 호출합니다. 즉 폰트가 로딩되기 전까지는 프로그램을 실행하지 않게 됩니다.
TMD.print는 디버깅용 데이터를 출력하는 함수입니다. player의 x, y좌표를 출력하는 코드를 추가했습니다.

예제의 실행