Question

I’m trying to make an HTML5 RPG game using easelJS to handle sprite animations. When I press the arrow keys in any direction the character does not play the animation through, instead it seems to jump back to frame 0 and stop instead of looping the animation.

What I need is the animation to continue looping while the key is being pressed down, instead the character get’s stuck in a frame.

Here is the game I have so far, it’s really a mess because I’m experimenting and still learning HTML5.
http://cloudrealms.com/dev/

Here is the code that I am using:

Arrow Key capture:

      $(window).keydown(
        function(e){
            keys[e.which] = true;
            if(isMovementKey(e.which))
            {
                moveOrder.unshift(e.which);
                jQuery.unique(moveOrder);
                animationsToPlay.push(1);
            }
            e.preventDefault();
            return false;
        }
    );
    $(window).keyup(
        function(e){
            keys[e.which] = false;
            if(isMovementKey(e.which))
            {
                moveOrder.splice(jQuery.inArray(e.which, moveOrder),1);
            }
        }
    );

In my tick I have a function called HandleInput() here is the code:

function HandleInput()
{
    switch (moveOrder[0]) {
        case 38:  /* Up arrow was pressed */
            playerSequence[playerID].gotoAndPlay("walk_up");
            playerSequence[playerID].y -= playerSequence[playerID].vY;
        break;
        case 40:  /* Down arrow was pressed */
            playerSequence[playerID].gotoAndPlay("walk_down");
            playerSequence[playerID].y += playerSequence[playerID].vY;
        break;
        case 37:  /* Left arrow was pressed */
            playerSequence[playerID].gotoAndPlay("walk_left");
            playerSequence[playerID].x -= playerSequence[playerID].vX;
        break;
        case 39:  /* Right arrow was pressed */
            playerSequence[playerID].gotoAndPlay("walk_right");
            playerSequence[playerID].x += playerSequence[playerID].vX;
        break;
    }
}

What I want to know is how can I animate the player sprite while the arrow key is being held down?

Answer 1

It is a little confusing, and its hard to tell what your code is doing, could you provide a link?

In terms of getting your player to move while the key is down I can offer a few pieces of advice. The way the onkeydown events work is that as long as the key is down, the event will be fired.

If I were you, I would have a boolean that represents whether or not they key has been pressed. On the keydown event, you set it to true, on the keyup event you set it to false.:

$(window).keydown(
    function(e){
        bool_keyDown = true;
    }
);
$(window).keyup(
    function(e){
        bool_keyDown = false;
    }
);

Note this works for any key, you will have to specify which you want in the keydown function, but you can leave it generic in the keyup function. In your ticker you check whether it is true. In the event that it’s true, you run the gotoandplay functionality on your spritesheet:

function HandleInput()
{
    if(bool_keyDown) 
        playerSequence[playerID].gotoAndPlay("walk_up");
}

This is not specific to any one key. So you might want to change it from a bool to a string. Maybe have the strings “up”, “down”, “left”, “right”, etc. , and null for no key pressed. Hope this helps.

–Ashley