Strange behavior of animation in Easeljs

505 views Asked by At

i'm only began to learn Javascript, so i have some troubles with animation in EaselJs. I'm trying to move object on mouse click (that's ok as i've expected), but when i'm try to add animation of movement in proper way, my animation doesn't acts, just stops at one frame when object moves. Here's the code of main.js and example of problem: http://rustem.ucoz.com/onMouseRun/index.html

var canvas;
var stage;
var imgCharRun = new Image();
var imgCharIdle = new Image();
var bmpAnimation;
var canvasx;
var isClicked = false;

function init() {
    canvas = document.getElementById('canvas');
    canvasx = canvas.offsetLeft;
    imgCharRun.src = "monsterRun.png";
    imgCharIdle.src = "monsterIdle.png";
    startGame();
}

function startGame(){
    stage = new createjs.Stage(canvas);
    stage.enableMouseOver(10);

    var spriteSheet = new createjs.SpriteSheet({
    images: [imgCharRun, imgCharIdle], 
    frames: {width: 64, height: 64, regX: 32, regY: 32}, 
    animations: {   
    walk: [0, 9, "walk"],
    idle: [10, 20, "idle"]
    }
    });
    bmpAnimation = new createjs.BitmapAnimation(spriteSheet);
    bmpAnimation.gotoAndPlay ("idle");
    bmpAnimation.scaleX = 1;
    bmpAnimation.x = canvas.width/2;
    bmpAnimation.y = canvas.height-100;
    bmpAnimation.currentFrame = 9;
    stage.addChild(bmpAnimation);
    createjs.Ticker.addListener(window);
    createjs.Ticker.useRAF = true;
    createjs.Ticker.setFPS(30);
}
document.onmousedown = function(e) {
    isClicked = true;
    window.mousex = e.clientX-canvasx;
}

function isMouseClicked() {
    if (isClicked){
        moveToMouse();
    }
}

function moveToMouse() {
    if(bmpAnimation.x<mousex) {
        bmpAnimation.x+=5;
        bmpAnimation.gotoAndPlay("walk");
        bmpAnimation.scaleX = -1;
    }
    if(bmpAnimation.x>mousex) {
        bmpAnimation.x-=5;
        bmpAnimation.gotoAndPlay("walk");
        bmpAnimation.scaleX = 1;
    }

}
function tick() {
    stage.update();
    isMouseClicked();
}

Please, help me with this problem:

2

There are 2 answers

0
Rustem On

Problem is solved, thanks. Here is what i wanted: http://rockfor.us/onMouseRun/index.html

4
Lanny On

You are calling gotoAndPlay("walk") every frame while the mouse is down, so it constantly sets the animation to the first frame of the walk animation. You need a flag to indicate if the animation is running already, and ensure you only call it one time.