Many sprite animation (Adobe Edge) tools pack the sprites in such a way that the
size of the image is optimized. In order to play the sprite properly
you need to change the x and y coordinate of the image so the sprite
plays properly. Here is an example where the bunny's feet are supposed to stay still and the body are supposed to move. Instead of ducking because of the way it is packed he looks like he is jumping.
Currently in Kineticjs there is no place to store this
offset data. I added the offset data optionally to the sprite object
and changed the scene function to use it if it exists.
Many sprite animation (Adobe Edge) tools pack the sprites in such a way that the size of the image is optimized. In order to play the sprite properly you need to change the x and y coordinate of the image so the sprite plays properly. Here is an example where the bunny's feet are supposed to stay still and the body are supposed to move. Instead of ducking because of the way it is packed he looks like he is jumping.
Currently in Kineticjs there is no place to store this offset data. I added the offset data optionally to the sprite object and changed the scene function to use it if it exists.
here is the code that fits with that sprite newTarget.KI = new Kinetic.Sprite({ image: tarImage, x: newTarget.left, y: newTarget.top, hitGraphEnabled: false, animation: 'robot', animations: { robot: [ 0,0,103,174, 103,0,103,174, 103,0,103,174, 103,0,103,174, 103,0,103,174, 206,0,107,174, 313,0,113,174, 426,0,116,179, 542,0,120,178, 662,0,120,180, 782,0,120,180, 782,0,120,180, 782,0,120,180, 782,0,120,180, 902,0,120,180, 1022,0,121,181, 1143,0,96,175, 1239,0,97,174, 1336,0,96,174, 1336,0,96,174, 1336,0,96,174, 1336,0,96,174, 1336,0,96,174, 1432,0,96,174, 1528,0,99,176, 1627,0,126,164, 1753,0,139,152, 1892,0,143,159, 0,181,145,159, 145,181,143,159, 288,181,141,159, 429,181,139,159, 568,181,140,159, 708,181,140,159, 848,181,140,159, 848,181,140,159, 848,181,140,159, 848,181,140,159, 848,181,140,159, 848,181,140,159, 988,181,140,159, 1128,181,136,153, 1264,181,141,170, 1405,181,105,174, 1510,181,103,174, 1510,181,103,174, 1510,181,103,174, 1613,181,103,174, 1716,181,104,175, 1820,181,110,175, 1930,181,116,178, 0,359,119,181, 119,359,119,180, 238,359,119,181, 238,359,119,181, 238,359,119,181, 357,359,119,181, 476,359,122,181, 598,359,98,176, 696,359,95,176, 791,359,95,175, 791,359,95,175, 791,359,95,175, 791,359,95,175, 791,359,95,175, 886,359,95,175, 981,359,99,175, 1080,359,136,163, 1216,359,134,156, 1350,359,141,159, 1491,359,144,159, 1635,359,141,159, 1776,359,138,159, 0,540,136,159, 136,540,137,159, 273,540,139,159, 412,540,139,159, 412,540,139,159, 412,540,139,159, 412,540,139,159, 412,540,139,159, 412,540,139,159, 412,540,139,159, 412,540,139,159, 551,540,141,170 ] }, offsets: { robot: [ 51,7, 51,7, 51,7, 51,7, 51,7, 52,7, 56,7, 55,2, 53,3, 53,1, 53,1, 53,1, 53,1, 53,1, 53,1, 47,0, 47,6, 47,7, 47,7, 47,7, 47,7, 47,7, 47,7, 47,7, 40,5, 13,17, 2,29, 0,22, 0,22, 0,22, 0,22, 0,22, 0,22, 0,22, 0,22, 0,22, 0,22, 0,22, 0,22, 0,22, 0,22, 4,28, 0,11, 49,7, 51,7, 51,7, 51,7, 51,7, 30,6, 21,6, 19,3, 18,0, 18,1, 18,0, 18,0, 18,0, 18,0, 22,0, 43,5, 46,5, 46,6, 46,6, 46,6, 46,6, 46,6, 46,6, 50,6, 52,18, 50,25, 47,22, 44,22, 47,22, 50,22, 52,22, 51,22, 49,22, 49,22, 49,22, 49,22, 49,22, 49,22, 49,22, 49,22, 49,22, 50,11 ] }, frameRate: 12, frameIndex: 0 });