Jump to content

Little bug with animation


Recommended Posts

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) {}


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} 
Link to comment
Share on other sites

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();		}}
Link to comment
Share on other sites

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();  }*/}
Link to comment
Share on other sites

'===' 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 :).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...