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:
Problem is solved, thanks. Here is what i wanted: http://rockfor.us/onMouseRun/index.html