EaselJS 键盘收录问题

Posted 2023-03-05

【中文标题】EaselJS 键盘收录问题

【英文标题】：EaselJS Keyboard Ticker Problems

【发布时间】：2014-07-06 04:39:32

【问题描述】：

我是第一次尝试使用 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？

提前致谢。

【问题讨论】：

如果您正在处理按键输入的移动，则不需要自动收报机。

那我该怎么做才能在没有ticker的情况下增加FPS呢？

没关系。 FPS 只是自动收报机的帧速率。您是在按键输入上调用 move 方法，而不是在刻度上。

那么如何调用 Ticker 上的 Display Object 的 move 方法呢？

据我所知，您甚至没有在代码中调用 handleTick。什么是显示对象？你似乎没有定义它。

【参考方案1】：

由于您直接在 onkeydown 处理程序中修改形状位置，因此“断断续续”可能只是正常的键盘事件行为 - 我认为每秒字符速率取决于操作系统，通常在 30 Hz 上最快的设置。

您可能应该将输入处理与移动逻辑分离：在键盘事件处理程序中，只需注册当前按下的键，并相应地在周期性“tick”函数中操作对象。类似这样的事情：

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

【讨论】：

谢谢。我几天前解决了，但无论如何我都会接受。 :)