Problems with Spritesheets :(

I’m cutting up spritesheets for use in a rpg-style game, but they’re not cooperating. Is there a better way to take the sprites out of the spritesheet?

I’ve attached an example photo and the two projects I’m using. RogueLike World Editor has RogueLike as a dependency. RogueLike has Juice as a dependency, but I don’t believe it’s being used yet. The five spritesheets that are attached here go in the documents folder.

The example photo comes from RogueLike World Editor where I’m trying to set up a scene. Here’s the problem: There’s always a little sliver of black between different sprites adjacent to each other (doesn’t happen if they’re the same sprite). Thanks for the help in advance!

They look like they’re separated equally, so you should be able to pull each section out without any problems. I’m just looking at your png images and not the zip files.

@dave1707 It seems like that, but there’s always a tiny (just enough to be annoying) line around different tiles.

Is it happening with some of the sprites in all of the png images or just some of the sprites in one of them. If only one, which one. I’ll try playing with it in about an hour. Watching TV at the moment.

@dave1707 The problem happens with all of them, but affects different sprites differently, some with a line on one side, some looking like they are contained in a box. The UI spritesheet is broken anyway, I don’t really care about it too much, but as for the others— it would be nice to get them working better. Thanks for agreeing to look into this!

@Attila717 I copied the roguelikeDungeon png file and loaded it in a Codea program. What I found was the image size was 246 x 152 pixels. The individual sprites in the image was 29 x 18. Dividing 246/29 gives 8.4827586206897 and 152/18 gives 8.4444444444444 . A Sprite sheet should have the sprites separated by integer values so you can seperate them. With the values I show, I don’t think you can pull the sprites out which is why you’re getting slivers of the other sprites. I didn’t look at the other ones, but if you have the same problem, then I would say those don’t have the sprites on integer boundaries either.

@Attila717 are you rendering with noSmooth()? It could be the bilinear filtering bleeding over into the adjacent sprites of the sheet.

@Attila717 Are you using the Sprite sheets from the above png files, or are you getting them from someplace else.

@dave1707 @Simeon Those are the exact spritesheets used in the program, they’ve got a 1 pixel gap between them, which is why the dimensions are a bit off.
Also, I tried placing noSmooth() in the setup and it seemed to solve the problem! Gotta love simple solutions. Thank you both!

Hi, @Attila717

I had this problem when I first started working with sprite sheets and I still had this problem using no smooth anyway for a sharp pixel feel.

But the answer for me was simple: have a one pixel safety area around EACH sprite as that will make your sheet easy to divide and work much better with the meshes. It’s not enough to have one pixel between each frame because if you do at least one frame is touching the border of where you mask part of the sheet.

E.g.
If a sprite is 30 pixels wide by 46 pixels high then my sprite sheet will be made in multiples of 32 wide by 48 high.

So if the sprite has 8 frames of animation across 4 columns and 2 rows, the sprite sheet size is 128 pixels wide by 192 pixels high.

That gives each sprite a single pixel clearance around ALL its edges. As meshes can deal with fractions of pixels it means each frame is two pixels away from each other for great clearance.

That’s the best way