Easeljs Keyboard Ticker Problems

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

Solution 1:

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 = {};

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

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

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

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