Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

1 decade ago by slayer3600

I'm a programmer by trade and definetly no digital artist, so I have some questions about how you guys are using existing and open source spritesheets.

Many of the spritesheets in the wild aren't as "uniform" as the examples that come with the ImpactJS example (i.e. example player sprite that is layed out on a perfect 16 X 16 grid). Instead they can have different sizes and different characters and sprites that are at varying positions. Often time no meta data is available about the sprite sizes.

1. How do you determine the correct H X W using a given sprite sheet in which the meta data is not provided?

Example:
/><br /> <br /> 2. How do you handle spritesheets that contain non-uniform sprite sizes (by this, I mean not all sprites are the same size)? Does ImpactJS have a way of dealing with these?<br /> <br /> Example:<br /> <img src=

1 decade ago by Donzo

1. I take the largest frame and set my frames to this H x W. Then, I set grid to half of width. I do this to center all of the frames. I choose some point, like between the eyes or something, and set all frames to this point so that they do not jump when animating.

2. I change the size of the entity when it engages in the larger or smaller animation.

if (this.ducking == true) {
this.size.y = 5;
}
else {
this.size.y = 10;
}

You know, like that in the entities update.

Also, offset is key.
Turn on debugger and set entities to "show collision box" will help with tweaking.

1 decade ago by slayer3600

Hi Donzo,

Thanks!

#2 is crystal clear, I see what you're doing there.

Regarding #1, do you mind elborating a little further? I understand finding the largest frame, but how do you find the "correct" H X W, do you go from the furthest pixel in each direction for example? Also when you talk about setting the grid to half of width, do you mean width of the frame or the entire spritesheet. I concede I might be missing something here, just trying to get a process in which I can reuse some of the open source spritesheets correctly.

9 years ago by Xander

I simply have to reply to this because I am the author of the above sprites!

I've found that you have to restructure the entire sheet for Impact, setup a new image with a grid size that is large enough to have a centered sprite and then all it's animations.

/><br /> <br /> Here's an example of a refactored sheet with a 32x32 grid.<br /> <br /> Because not all sprites are the same, you need to have an offset. we want the part of the sprite that will collide with other things to be smaller than the 32x32 size.<br /> <br /> size: {x: 12, y:26},<br /> offset: {x: 10, y: 6},<br /> <br /> Using this code, the collision box for the sprite is 12 by 26. Since the tile is 32 pixels to start, you offset the x value by 10. This is so there are 10 pixels, then the 12 pixels for the collision box, then the last 10 pixels are blank space - this has the effect of having the collision box be the 12 center pixels on the x axis. Since the sprite is standing on the bottom of the 32x32 grid space, the y offset is only 6 pixels: the remaining 26 pixels of height extend right to the edge of the 32 pixel vertical space.<br /> <br /> Hopefully that's not too confusing! </div> </div> <div class= Page 1 of 1
« first « previous next › last »