1 decade ago by jaygarcia
Hi,
I am trying to figure out why sometimes the animation for flipping a chip is silk smooth and other times it's extremely jumpy! I've tested in Chrome, Fx and even Safari. Same issue. :-\
Demo url: http://moduscreate.com/tmp/othello
Click on any chip, and you'll see that sometimes it moves very well, and other times, it simply flips to another color with only a few key frames of animation.
Here is the class. Does anyone see anything that is glaring? many thanks!
I am trying to figure out why sometimes the animation for flipping a chip is silk smooth and other times it's extremely jumpy! I've tested in Chrome, Fx and even Safari. Same issue. :-\
Demo url: http://moduscreate.com/tmp/othello
Click on any chip, and you'll see that sometimes it moves very well, and other times, it simply flips to another color with only a few key frames of animation.
Here is the class. Does anyone see anything that is glaring? many thanks!
var flipBlack = [0,1,2,3,4,5,6,7,8,9,10,11], flipWhite = [11,10,9,8,7,6,5,4,3,2,1,0]; EntityChip = ig.Entity.extend({ animSheet : new ig.AnimationSheet('media/images/chip-sprite.png', 48,48), collides : ig.Entity.COLLIDES.NEVER, size : { x : 48, y : 48 }, init : function(x,y,settings) { var me = this; me.parent(x,y,settings); me.addAnim('idle_white', 1, [0]); me.addAnim('idle_black', 1, [11]); me.addAnim('flip_black', .1, flipBlack); me.addAnim('flip_white', .1, flipWhite); me.currentAnim = me.anims['idle_' + me.color]; }, update : function() { var me = this, newColor, oldAnim; // is not animating && the event type is click if (! me.animating && ig.input.pressed('click')) { newColor = (me.color == 'black' ? 'white' : 'black'); if (me.isItemClicked()) { me.animating = true; me.newColor = newColor; me.currentAnim = me.anims['flip_' + (me.color == 'black' ? 'white' : 'black')]; } } if (me.animating && me.currentAnim.frame === 11) { oldAnim = me.currentAnim; newColor = (me.color == 'black' ? 'white' : 'black'); me.color = me.newColor; me.currentAnim = me.anims['idle_' + (this.color == 'black' ? 'black' : 'white')]; oldAnim.gotoFrame(0); me.animating = false; } me.parent(); }, isItemClicked : function() { var me = this, igInput = ig.input, igMouse = igInput.mouse, thisPos = me.pos, thisSize = me.size, mouseY = igMouse.y, mouseX = igMouse.x, posX = thisPos.x, posY = thisPos.y, sizeY = thisSize.y, sizeX = thisSize.x, boundY = mouseY >= posY && mouseY <= sizeY + posY, boundX = mouseX >= posX && mouseX <= sizeX + posX; return (boundY && boundX) } });