TM.ScreenManager

소스 코드 보기: https://github.com/a-mean-blogger/text-game-maker-js/blob/master/src/managers/screen-manager/screen-manager.js

타입

클라스(TM.ILoopObject를 상속받음)

용도

브라우저에 HTML canvas 화면을 생성하며 화면에 텍스트를 추가하거나 삭제할 수 있는 인스턴스를 생성할 수 있는 클라스입니다. Text Game Maker JS 의 핵심 클라스입니다.

생성자 인자들

new TM.ScreenManager(customSreenSetting, customCharGroups)
  • customSreenSetting(옵션): TM.defaultSettings.screen의 형태의 값을 받아 스크린을 설정합니다. 만약 값이 없으면 TM.defaultSettings.screen의 기본값을 사용합니다.
  • customCharGroups(옵션): TM.defaultSettings.charGroups의 형태의 값을 받아  특별 문자 그룹을 설정합니다. 만약 값이 없으면 TM.defaultSettings.charGroups의 기본값을 사용합니다.

중요 항목들

  • isActive: init 함수가 실행되면 true(활성화 상태)가 되고 inactivate 함수가 실행되면 false(비활성화 상태)가 됩니다. 현재 활성화/비활성화 상태를 확인할 수 있는 항목입니다.
  • cursor: TM.ScreenManager_Cursor 인스턴스입니다. 화면에서 커서의 위치를 옮기거나 커서를 보이게/감추게 할 수 있습니다.

중요 함수들

  • init(): 인스턴스를 활성화 상태로 만듭니다.(인스턴스 생성시 자동 실행)
  • inactivate(): 인스턴스를 비활성화 상태로 만들고 스크린에 더이상 아무것도 표시되지 않습니다.

스크린 관련 함수

  • insertText(text,color,backgroundColor): 현재 커서 위치에 text를 출력합니다. color와 backgroundColor는 옵션입니다.
  • insertTextAt(x,y,text,color,backgroundColor): x, y위치에 text를 출력합니다. color와 backgroundColor는 옵션입니다.
  • deleteText(text): 현재 커서 위치에 text로 입력된 문자열의 길이 만큼의 길이를 지웁니다.
  • deleteTextAt(x,y,text): x, y 위치에 text로 입력된 문자열의 길이 만큼의 길이를 지웁니다.
  • clearScreen(): 화면의 모든 text와 배경색을 모두 지웁니다(초기화).
  • fillScreen(char, color, backgroundColor): 입력받은 문자로 화면을 모두 채웁니다. color와 backgroundColor는 옵션입니다. 빈칸과 배경색을 넣어 화면을 모두 한 색으로 채울 수 있습니다.
  • consoleScreenData(): 화면 데이터를 브라우저 콘솔에 출력합니다.(디버그용 함수)
  • copyScreen(): 현재 canvas data(화면데이터가 아님)를 저장하여 return합니다.
  • pasteScreen(canvas): canvas data를 받아 화면에 뿌립니다.
  • onReady(func): 외부폰트 로딩이 있는 경우 로딩이 끝나면 전달받은 함수를 실행합니다.

**text에 "\n"을 넣어 줄바꿈을 할 수 있습니다. 줄바꿈을 하면 해당 택스트의 시작 x좌표로 커서가 이동됩니다.
**text에 "\r"을 넣으면 해당줄의 첫번째 칸으로 커서가 이동됩니다.
**color, backgroundColor에는 HTML5 canvas가 지원하는 모든 색깔 포맷이 지원됩니다. (예: 'red', '#fff', '#fa4ede', rgb(255, 100, 70)', 'rgba(255, 255, 255, 0.5)' 등)

코드 작성 예제

**예제 소스 코드 보기: screen-manager-tutorial.js

var TMS(Text Game Maker Screen)에 TM.ScreenManager의 인스턴스를 생성합니다.

var TMS = new TM.ScreenManger();

현재 커서위치에 Hello World를 출력합니다.

TMS.insertText("Hello World\n");

예제 코드의 실행

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

//현재 커서 위치에 Hello World를 빨간색으로 출력후 줄 바꿈
TMS.insertText("Hello World\n", "red"); 
//현재 커서 위치에 Hello World를 빨간색, 배경은 흰색으로 출력
TMS.insertText("Hello World\n", "red", "#fff"); 
//(5,5) 위치에 Hello World를 빨간색으로 출력후 줄 바꿈
TMS.insertTextAt(5, 5, "Hello World\n", "red");

TMS.clearScreen(); //화면 지움
TMS.fillScreen("A"); //화면을 A로 채움
TMS.fillScreen("A", null, "white"); //화면을 흰색으로 채움

댓글

댓글쓰기

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

UP