시작하기에 앞서 & 텍스트게임메이커

이 항목의 게시물들은 텍스트 게임 메이커 JS 라이브러리(Text Game Maker JS, 이하 텍스트게임메이커)를 사용합니다.

텍스트게임메이커

텍스트게임메이커는 자바스크립트를 사용하여 웹 브라우저에 윈도우 콘솔(일명 도스창)과 같은 환경을 구현하는 것을 기본으로 하는 라이브러리입니다.

[크롬 브라우저의 콘솔화면. 크롬브라우저에서 F12키를 누르면 열 수 있다. '>'에 코드를 입력할 수 있고, 만약 console.log명령어가 있으면 그 다음줄에 해당 내용을 출력하며 코드의 최종 결과값은 '<'에 출력한다.]

브라우저의 콘솔은 코드의 입력과 출력이 번갈아가면서 이루어집니다. 반면에 윈도우 콘솔은 아래와 같이 가로 X칸, 세로 Y칸의 정해진 공간(이러한 공간을 그리드(grid)라고 합니다) 안의 원하는 위치에 자유롭게 텍스트를 출력할 수 있습니다.

[윈도우의 콘솔화면. X좌표와 Y좌표를 이용해서 원하는 위치에 원하는 텍스트를 출력할 수 있다.]

그렇기 때문에 위와 같은 게임을 만드는 것이 가능하죠.

[브라우저에서 텍스트게임메이커를 사용하여 x좌표 1, y좌표 2의 위치에 Hello World를 출력한 모습]

텍스트게임메이커를 사용하면 브라우저에 윈도우 콘솔과 유사한 화면을 연출할 수 있습니다. 이름이 텍스트'게임메이커'이지만, 그 기본은 도스창처럼 자바스크립트로 텍스트를 그리드에 표시하는 것입니다. (물론 게임을 만들 수 있죠. 텍스트게임메이커로 만든 게임 보러가기(클릭)) 그러므로 다양한 프로그램을 만드는 것이 가능합니다.

물론 텍스트게임메이커없이 순수 자바스크립트만 사용해서 화면에 원하는 것을 출력할 수도 있습니다. 외부라이브러리의 사용 없이 순수 자바스크립트를 공부하고 싶으신 분들도 있겠으나, 프로그래밍을 배우는 입문자에게는 꽤 복잡한 내용이므로 오히려 불필요한 복잡성을 추가하게 된다고 판단되어 이 연습문제 항목에는 텍스트게임메이커 라이브러리를 사용하게 되었습니다.

<도전! 연습문제>에서는 텍스트게임메이커 라이브러리를 코드의 실행결과를 화면에 출력하는 최소한의 용도로만 사용하고 다른 부분은 순수 자바스크립트만 사용하여 해답 코드를 작성하겠습니다. 나중에 자바스크립트를 어느 정도 익히고 나면 텍스트게임메이커 없이 자신만의 코드로 직접 출력까지 만들어 보세요.

텍스트게임메이커 온라인 샌드박스

https://a-mean-blogger.github.io/text-game-maker-js/sandbox 에서 간단히 텍스트게임메이커 라이브러리를 사용할 수 있습니다. 다운받고 라이브러리를 설치하는 과정없이 코드를 실행해 볼 수 있습니다. 한번 간단히 연습해 봅시다.

위 주소로 접속하면 아래의 화면과 같이 페이지로 연결이 됩니다.

화면에 표시되는 텍스트는 아래와 같은 내용을 나타내는 것으로, 지금은 그다지 중요하지 않습니다. 한번 확인만 해보고 넘어갑시다.

  • TMSText Game Maker의 Screen Manager 객체(object)로, 화면 출력과 관련된 함수를 가지고 있습니다.
  • TMIText Game Maker의 Input Manager 객체로, 키입력과 관련된 함수를 가지고 있습니다.
  • TMDText Game Maker의 Debug Manager 객체로, 디버깅과 관련된 함수를 가지고 있습니다.

우리는 화면에 텍스트를 출력하는 용도로만 사용할 것이기 때문에 TMS 객체만 사용하게 됩니다.

F12키를 눌러 브라우저 콘솔을 열고 TMS.clearScreen()를 입력해 봅시다.

TMS.clearScreen()은 현재 화면의 모든 텍스트를 지우고 커서를 0,0 좌표로 이동시키는 함수입니다.

다음으로 TMS.insertText("Hello World!")를 입력해 봅시다.

TMS.insertText(출력할_문자열, 글자색, 배경색, 폰트이름)는 현재 커서 위치에 문자열을 출력하는 함수입니다. 리턴값(위 화면에서 {x:12, y:0})은 출력 후 x, y좌표이고 출력할_문자열을 제외한 모든 항목들은 생략할 수 있습니다. **폰트이름는 현재 브라우저에서 표현가능한 폰트만 사용가능합니다.

마지막으로 TMS.insertTextAt(2, 2, "Hello Internet!")를 입력해 봅시다.

TMS.insertTextAt(X_좌표, Y_좌표, 출력할_문자열, 글자색, 배경색, 폰트이름)는 특정한 위치에 문자열을 출력하는 함수입니다. x,y좌표를 입력하는 것 외 나머지는 TMS.insertText와 동일합니다.

이처럼 텍스트게임메이커의 라이브러리의 코드는 항상 TMS, TMI, TMD의 객체를 통해 실행되므로 나중에 라이브러리 없이 자신의 코드로 전환할 때는 해당 함수드를 직접 작성해 주시면 되겠습니다.

마치며...

<도전! 연습문제>의 연습문제들은 순수 자바스크립트로 코드를 작성하고, 거기에 텍스트게임메이커의 화면관련 함수(TMS.clearScreen, TMS.insertText, TMS.insertTextAt 등)를 이용하여 결과를 화면에 출력합니다.

윈도우의 '메모장', 혹은 다른 텍스트 에디터 프로그램으로 정답 코드를 작성하고 텍스트게임메이커의 온라인 샌드박스 페이지에서 콘솔을 열어 코드를 실행합시다.

물론 텍스트게임메이커를 다운받으셔서 전체 코드를 js로 작성하여 자신의 컴퓨터나, 온라인에 배포하실 수도 있습니다. 텍스트 게임메이커의 상세한 사용법은 https://www.a-mean-blog.com/ko/blog/Text-Game-Maker-JS 페이지를 참고하시기 바랍니다.

댓글

댓글쓰기

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

UP