Curious to know why my Createjs with Mousetrap is going slow. (jsfiddle provided)

Question

I'm working with the new createjs, and they've removed flip and addflipframes. Apparently scaleX=-1 is suppose to be faster but now I get a weird lag when I want to move my character left and right. I'm just hoping that I've coded my movement functions faulty, or if its just mousetrap.js not being friendly with create.js

http://jsfiddle.net/w5uZF/8/ This is the jsFiddle with the test game. I'm just learning on how to use the new system.

These are my mousetrap bindings:

Mousetrap.bind('a', function(){moveLeft();}, 'keydown');
Mousetrap.bind('d', function(){moveRight();}, 'keydown');

these are my functions for movement:

function moveRight(){
    var speed = 20;
    sayaka.x += speed;
    sayaka.scaleX= 1;
}

function moveLeft(){
    var speed = 20;
    sayaka.x -= speed;
    sayaka.scaleX= -1;
}

I guess it would be good if I showed how I made my sprite, which has 8 frames to it.

var dataSayaka = {
    images: ["http://i.imgur.com/rxDkp2Q.png"],
    frames: {width:133, height:139, regX: 50, regY:50},
    animations: {runRight:[0,1,2,3,4,5,6,7, "runRight"]}
};

var spriteSheetSayaka = new createjs.SpriteSheet(dataSayaka);
var animationSayaka   = new createjs.Sprite(spriteSheetSayaka, "runRight");
sayaka = new createjs.Sprite(spriteSheetSayaka, animationSayaka);

I'm open to any suggestions and criticism as I would love to know how to increase the movement performance.

I have tried to use native Javascript key events to move my character, however the effect was the same. It's weird how the character lags when I move left and right.

Answer 1

If you are referring to the delay between scaleX=-1/1 and the x-movement: This has nothing to do with CreateJS(or any other JS framework) this is the way of browsers dispatching keydown events.

Try for example pressing a key in a text-input, you will notice that at first the character you pressed will appear immediatly, but only after a delay of a couple milliseconds the pressed key will cause additional characters to appear. This is to prevent the system from accidentally typing a character multiple times when the used only intended to type just one character.

---

Solution: To solve this, just set a flag whenever a certain key is keydown and unset the flag on keyup. For example you can use a global object pressedKeys and whenever a is pressed you set pressedKeys.a = true; and onkeyUp -> pressedKeys.a = false; then in your handleTick you check if a or d is set to true and call the according method moveRight/moveLeft if so.