Question

我第一次尝试使用EaselJS，我正试图进行正常的方形移动。我创建了一个Ticker，用于为屏幕左侧到右侧的方块设置动画。它似乎不稳定，所以我提出了该股票的FPS（通过Ticker.setFPS(60)）。

我的下一步是添加键盘事件以允许方块移动。我已经成功地做到了，但同样的波动又回来了。我已经尝试将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;
    }
}

所以，总结一下我的问题，如何在不附加到Ticker的情况下增加FPS，或者更好的是，如何将键盘事件附加到Ticker？

提前致谢。

Answer 1

由于您正在onkeydown处理程序中直接修改形状位置，因此＆＃34;波动＆＃34;可能只是普通的键盘事件行为 - 我认为每秒字符数与操作系统有关，通常最快设置为30 Hz。

您应该将输入处理与移动逻辑分离：在键盘事件处理程序中，只需注册当前按下的键，然后定期操作对象＆＃34; tick＆＃34;功能相应。这些方面的东西：

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();
}

EaselJS键盘自动收报机问题

1 个答案: