EaselJS键盘自动收报机问题 [英] EaselJS Keyboard Ticker Problems

问题描述

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

I'm experimenting with EaselJS for the first time, and I'm trying to make a normal square move. I created used a Ticker to animate a square from the left to the right of the screen. It seemed choppy, so I raised the FPS of that ticker (via Ticker.setFPS(60)).

我的下一步是添加键盘事件以允许方块移动。我已经成功地做到了，但同样的不稳定已经回来了。我已经尝试将Ticker的FPS设置为更高的速率，这根本不能解决我的问题。这是我的代码：

My next step is to add keyboard events to allow the square to move. I've done so successfully, but the same choppiness has come back. I've tried setting the FPS of the Ticker to a higher rate, which isn't fixing my problem at all. Here is my code:

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而不附加到Ticker，或者更好的是，如何将键盘事件附加到Ticker？

So, to sum up my question, how would I increase the FPS without being attached to the Ticker, or better yet, how can I attach the keyboard events to the Ticker?

提前致谢。

推荐答案

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

Since you are modifying the shape position directly in the onkeydown handler, the "choppiness" might just be the normal keyboard event behavior - the characters per second rate is OS dependent I think, and usually something like 30 Hz on the fastest setting.

您可能应该将输入处理与移动逻辑分离：在键盘事件处理程序中，只需注册当前按下的键，然后操作对象相应的周期性滴答功能。这些内容：

You should probably decouple input handling from the movement logic: In the keyboard event handlers, just register which key(s) is/are currently pressed, and manipulate the object in a periodic "tick" function accordingly. Something along these lines:

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键盘自动收报机问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！