Skip to content

Conversation

@leohenning
Copy link

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.

lb_robot

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

Many sprite animation 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.  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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant