EaselJS 키보드 시계 문제

Question

저는 처음으로 EaselJS를 실험하고 있는데, 나는 평범한 사각형 움직임을 만들려고합니다. 나는 Ticker를 사용하여 화면의 왼쪽에서 오른쪽으로 사각형을 움직이게 만들었습니다. 고르지 못한 것처럼 보였으므로 나는 Ticker.setFPS(60)을 통해 그 증권 시세의 FPS를 올렸다.

내 다음 단계는 사각형을 움직일 수 있도록 키보드 이벤트를 추가하는 것입니다. 나는 그렇게 성공적으로 해왔지만 똑같은 고파 성이 돌아왔다. 나는 Ticker의 FPS를 더 높은 속도로 설정하려고 시도했는데, 이것은 내 문제를 전혀 수정하지 못합니다.

var c = document.getElementById("c"); 
var stage = new createjs.Stage("c"); 
var square = new createjs.Shape(); 

function init() { 
    square.graphics.beginFill("#3A5FCD").drawRect(0, 0, 75, 75); 
    square.x = 50; 
    square.y = 50; 

    stage.addChild(square); 
    stage.update(); 

    //Update stage will render next frame 
    createjs.Ticker.addEventListener("tick", stage); 
    createjs.Ticker.addEventListener("tick", move); 
    createjs.Ticker.setFPS(60); 

    this.document.onkeydown = move; 
} 

function move(event) { 
    switch(event.keyCode) { 
     case 37: 
      square.x -= 10; 
      break; 
     case 39: 
      square.x += 10; 
      break; 
     case 38: 
      square.y -= 10; 
      break; 
     case 40: 
      square.y += 10; 
      break; 
    } 
} 

그래서, 내 질문을 요약하면, 내가 더 잘 아직 시세에 부착하지 않고 FPS를 증가 또는 얼마나, 어떻게 티커에 키보드 이벤트를 첨부 할 수 있습니다 : 여기 내 코드는?

미리 감사드립니다.

Answer 1

onkeydown 핸들러에서 직접 모양 위치를 수정하기 때문에 "choppiness"는 일반적인 키보드 이벤트 동작 일 수 있습니다. 초당 문자 수는 OS에 따라 다르며 대개 가장 빠른 30 Hz와 같습니다 환경.

움직임 처리 로직에서 입력 핸들링을 분리해야합니다. 키보드 이벤트 핸들러에서 현재 눌려져있는 키를 등록하고 이에 따라주기적인 "눈금"기능으로 오브젝트를 조작하십시오. 이 줄의 어떤 것 :

var stage; 
var square; 
var keys = {}; 

function init() { 
    stage = new createjs.Stage("c"); 
    square = new createjs.Shape(); 
    square.graphics.beginFill("#3A5FCD").drawRect(0, 0, 75, 75); 
    square.x = 50; 
    square.y = 50; 
    stage.addChild(square); 

    createjs.Ticker.addEventListener("tick", tick); 
    createjs.Ticker.setFPS(60); 

    this.document.onkeydown = keydown; 
    this.document.onkeyup = keyup; 
} 

function keydown(event) { 
    keys[event.keyCode] = true; 
} 

function keyup(event) { 
    delete keys[event.keyCode]; 
} 

function tick() { 
    if (keys[37]) square.x -= 10; 
    if (keys[38]) square.y -= 10; 
    if (keys[39]) square.x += 10; 
    if (keys[40]) square.y += 10; 
    stage.update(); 
}