Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add in offset for packed sprites #1043

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

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