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좌표를 출력하는 코드를 추가했습니다.

예제의 실행


두가지 문제들이 해결되었고 화면 우측에 디버깅용 데이터가 출력됩니다.

댓글

n
nodejs222222222222222222222223 2017.10.31
재미있어보여욥 ! 시간있을때 따라진행해봐야겠어용
I
Ian H 2017.10.31
@nodejs222222222222222222222223,
뭔가 만드시면 제게도 알려주세요^^
H
Hiro 2018.04.15
양질의 좋은 글 올려주셔서 감사합니다! 열심히 공부해서 제것으로 만들고 싶네요 ㅎㅎㅎ 
I
Ian H 2018.04.16
@Hiro,
반갑습니다^^ 화이팅!
김찬민 2019.09.25
글 정말 잘 보았습니다!! 그런데, onReady 함수를 사용하는 코드에서
var mainInterval; TMS.onReady(function(){   mainInterval = window.setInterval(function(){     calculate();     draw();     TMD.print{"Player",{x:player.x,y:player.y}};   },30); });
TMD.print 직후에 {} 괄호가 아니라 () 괄호를 사용해야 하네요 :) 아마 바쁘셨거나 단순한 오타인 것 같은데, 여유가 되신다면 수정 부탁드리겠습니다!!
유익한 글에 매우 감사드리며, 오늘도 좋은 하루 되시길 바래요!  :)
I
Ian H 2019.09.25
@김찬민,
앗 맞습니다. 실수했네요. 죄송합니다. 본문 코드 수정하였구요, 좋은하루되세요^^
댓글쓰기

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

UP