TM.InputManager_Keyboard

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

타입

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

**이 클라스는 TM.InputManager의 하위 항목으로 사용하기 위해 만들어졌습니다. 그래서 클라스이름이 InputManager_로 시작합니다.

용도

키보드 입력을 확인하기 위한 인스턴스를 생성하는 클라스입니다. TM.InputManager의 인스턴스 생성시 keyboard 항목에 이 인스턴스가 자동으로 생성됩니다.

중요 항목들

• isActive: init 함수가 실행되면 true(활성화 상태)가 되고 inactivate 함수가 실행되면 false(비활성화 상태)가 됩니다. 현재 활성화/비활성화 상태를 확인할 수 있는 항목입니다.

중요 함수들

• init(): 인스턴스를 활성화 상태로 만듭니다.(인스턴스 생성시 자동 실행)
• inactivate(): 인스턴스를 비활성화 상태로 만들고 키보드입력상태를 더이상 저장하지 않게됩니다. 키 입력 상태 확인 함수들을 호출하는 경우 무조건 false가 return됩니다.

Key State 관련 함수들

Text Game Maker JS에서 key state는 함수가 실행되는 순간의 키 상태를 뜻합니다.

• checkKeyState(keyCode): 현재 해당 key code의 key가 눌려진 상태인지 확인합니다.
• checkKeyStateAny(): 현재 아무 키라도 눌려진 상태인지 확인합니다.
• removeKeyState(keyCode): 해당 key state 정보를 강제로 지웁니다.  
• clearKeyState(): 모든 key state 정보를 강제로 지웁니다.

Key Pressed 관련 함수들

Text Game Maker JS에서 key pressed는 이전에 체크한 시간 이후로 해당 키가 눌려진 적이 있는지를 뜻합니다.

• checkKeyPressed(keyCode): 이전에 체크한 이후에 해당 keyCode가 눌려진 적이 있는지를 확인합니다.
• checkKeyPressedAny(): 이전에 체크한 이후에 어떠한 키라도 눌려진 적이 있는지를 확인합니다.
• removeKeyPressed(keyCode): 해당 key pressed 정보를 강제로 지웁니다.
• clearKeyPressed(): 모든 key pressed 정보를 강제로 지웁니다.

Key 관련 함수들

key state와 key pressed의 한번에 체크하는 함수들입니다.

• checkKey(keyCode): 이전에 체크한 이후에 해당 key code가 눌린적이 있는지, 혹은 현재 해당 key code가 눌려져 있는지를 확인합니다.
• checkKeyAny(): 이전에 체크한 이후로 어떠한 키라도 눌린적이 있는지, 혹은 현재 어떠한 키라도 눌려져 있는 상태인지 확인합니다.
• removeKey(keyCode): 해당 key 정보를 강제로 지웁니다.
• clearKey(): 모든 key 정보를 강제로 지웁니다.

기타 함수들

• getInput(question): question 문자열을 브라우저에 popup으로 띄어 사용자로부터 문자열을 입력받습니다.

코드 작성 예제

**예제 소스 코드 보기: input-manager_keyboard-tutorial.js

var TMS(Text Game Maker Screen)에 TM.ScreenManager의 인스턴스를 생성합니다.
var TMI(Text Game Maker Inputs)에 TM.InputManager의 인스턴스를 생성합니다. TMI.keyboard에 TM.InputManager_Keyboard의 인스턴스가 자동으로 생성됩니다. 

var TMS = new TM.ScreenManager(),
    TMI = new TM.InputManager(null, true);

사용할 key의 key code들을 알아보기 쉽게 KEYSET 객체를 만들어 넣어줍니다. 이 키값은 TMI = new TM.InputManager(null,true);로 TMI를 생성하면 키입력이 있을 때마다 브라우저 콘솔에 표시가 됩니다.

var KEYSET = {
  A: 65,
  S: 83,
  D: 68,
};

TM.Interval 클라스로 0.2초 마다 키입력을 확인하는 인스턴스를 만듭니다.
A 키는 checkKeyState 함수를 이용해 확인하고, S 키는 checkKeyPressed 함수를 이용해 확인하고, D 키는 checkKey 함수를 이용해 확인합니다.

var myInputMgr = new TM.Interval(200,function(){
  var textA = "TMI.keyboard.checkKeyState(KEYSET.A)";
  if(TMI.keyboard.checkKeyState(KEYSET.A)) TMS.insertTextAt(1,1,textA);
  else TMS.deleteTextAt(1,1,textA);

  var textS = "TMI.keyboard.checkKeyPressed(KEYSET.S)";
  if(TMI.keyboard.checkKeyPressed(KEYSET.S)) TMS.insertTextAt(1,2,textS);
  else TMS.deleteTextAt(1,2,textS);

  var textD = "TMI.keyboard.checkKey(KEYSET.D)";
  if(TMI.keyboard.checkKey(KEYSET.D)) TMS.insertTextAt(1,3,textD);
  else TMS.deleteTextAt(1,3,textD);
})
myInputMgr.init();

예제의 실행

이 스크린을 먼저 클릭한 다음 키입력을 해 주어야 키입력이 확인됩니다.

현재 페이지의 브라우저 콘솔을 연 다음 아래의 명령어들을 입력하여 바로 테스트해 봅시다.
혹시 단축키로 브라우저 콘솔이 열리지 않는다면, 스크린을 제외한 다른 부분을 한번 클릭한 다음 단축키를 입력해 주세요. 스크린은 다른 키입력을 차단합니다.

//TMI.keyboard 비활성화
TMI.keyboard.inactivate();

//TMI.keyboard를 다시 활성화
TMI.keyboard.init();

키입력이 있는 경우 콘솔에 해당 키의 code를 출력하는 것을 볼 수 있습니다. 이것으로 키보드의 키값을 알 수 있습니다.

위 예제를 통해 checkKeyState, checkKeyPressed, checkKey의 차이점을 알 수 있습니다.

checkKeyState 함수로 확인하는 A키는 빠르게 눌렀다가 때는 경우 가끔씩 모니터에 아무런 문자열이 나타나지 않는 것을 알 수 있습니다. 이는 0.2초마다 키입력을 확인하는데, 확인하는 그 순간에 해당 키가 눌리지 않으면 false를 리턴하기 때문입니다.

checkKeyPressed 함수로 확인하는 S키는 아무리 빠르게 눌렀다가 때어도 항상 모니터에 문자열이 나타나는데, 이는 0.2초사이에 눌린적이 있는지를 확인하기 때문입니다. 하지만 키를 꾹 누르고 있는 경우 모니터에 문자열이 표시되었다가 사라진 후 다시 나타나는 경우가 있는데, 이는 브라우저에서 키가 계속 눌려있는 경우 처음에 시간간격이 자동으로 들어가기 때문입니다.

checkKey 함수로 확인하는 D키의 경우 빠르게 눌렀다가 때어도, 계속 누르고 있어도 항상 일정하게 문자열이 표시되는 것을 볼 수 있습니다.