Little bug with animation

[Rustem]

Greetings to all. I'm trying to animate my character when he moves to mouse clicks, but he doesn't act properly (animation stops at one frame and sometimes moves when it should not be). Here's the example of it: http://rockfor.us/onMouseRun/index.html

Can you help me with this problem please?

[Calanthe]

Look how was it done in http://www.createjs.com/#!/EaselJS/demos/spritesheet example.

Just use 

stage.addEventListener('stagemousedown', callback)

instead of 

document.onclick = function(e) {}

Also 

window.mousex = e.stageX-canvasx;

to calculate mouse's X position instead of 

window.mousex = e.clientX-canvasx;

Whole working code should look like:

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);  stage.addEventListener("stagemousedown", handleClick);}function handleClick(e) {  isClicked = true;  window.mousex = e.stageX-canvasx;  moveToMouse();}//this function is not needed/*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(); I dont think its needed here} 

[Rustem]

Of course thanks for reply, but your decision doesn't work properly

[Calanthe]

Maybe I just don't understand what does 'work properly' mean . 

 

The main character changes its animation after click. If I understood you correctly, that was the main issue. 

[Rustem]

No, in start of this theme, main issue was the character didn't animate and froze at one frame like here: http://rockfor.us/issuedAnimation/index.html

Bit later i fixed this issue and got other (now he stops sometimes, and reason of these bug i understand) like this: http://rustem.ucoz.com/onMouseRun/index.html

Earlier i've tried to make primitive movement by simply adding or subtracting 5pixels from .x coordinate of character (you can see it in code). But if i wanted character to stop when character.x==mouse.x, the problem appeared, because character.x was just roughly close to the mouse.x, but not ==mousex. How can i make not such primitive movement to mouseclick?

document.onclick = function(e) {	isClicked = true;	window.mousex = e.clientX-canvasx;	bmpAnimation.gotoAndPlay("walk");}function isMouseClicked() {	if (isClicked){		moveToMouse();	}}function checkStaying() {	if (bmpAnimation.x==mousex) {	bmpAnimation.gotoAndPlay("idle");	}}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();	if (isClicked) {		checkStaying();		}}

[Calanthe]

Try adding additional variable which will indicate direction of movement and then update condition inside checkStaying() a little:

var direction;/*other declarations and functions*/document.onclick = function(e) {  isClicked = true;  window.mousex = e.clientX-canvasx;  bmpAnimation.gotoAndPlay("walk");}function isMouseClicked() {  if (isClicked){    moveToMouse();    checkStaying();  }}function checkStaying() {  if ((bmpAnimation.x === mousex) ||      (bmpAnimation.x > mousex && direction === 'right') ||      (bmpAnimation.x < mousex && direction === 'left')) {      bmpAnimation.gotoAndPlay("idle");      direction = '';      isClicked = false;  }}function moveToMouse() {  if(bmpAnimation.x<mousex && direction !== 'left') {    bmpAnimation.x+=5;    //bmpAnimation.gotoAndPlay("walk");    bmpAnimation.scaleX = -1;    direction = 'right';  }  if(bmpAnimation.x>mousex && direction !== 'right') {    bmpAnimation.x-=5;    //bmpAnimation.gotoAndPlay("walk");    bmpAnimation.scaleX = 1;    direction = 'left';  }}function tick() {  stage.update();  isMouseClicked();  /*if (isClicked) {    checkStaying();  }*/}

[Rustem]

Excellent! Thanks a lot, Zosia! It works as i wanted. Can you explain me what does mean '===' symbol in whole and this check staying() function in example?

[Calanthe]

'===' is an identity operator, and '==' is an equality operator, which means that  '===' compares also (additional to values) types of compared variables.

More detailed informations can be found e.g. here: http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons

 

I am glad that I helped you .