Problem with gaps between sprites

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

Problem with gaps between sprites

(9 posts) (5 voices)

Started 2 years ago by micah
Latest reply from gaminghorror

Tags:

micah
Member

Hey cocos2d! I'm starting a new tile-based game and I decided to roll my own level editor so I can have total control over how it works. Since I don't really know how to write Mac apps, and I want to end up sharing a lot of code between the level editor and the actual game, I decided to write the level editor as an iPhone app and use cocos2d for it.

Each screen has 16x10 tiles, with each tile be 30x32 pixels (making a total of 480x320). The problem I'm having is even when I place all the tiles in the perfect positions, they're not quite lining up correctly. The easiest way to explain is with this video I made of the simulator running my level editor: http://www.insurgentgames.com/files/map_editor.mov (also I'm proud of it, so here's a good place to show it off :))

As you can see, there's spaces between the tiles, mostly in the top left areas, but not in the bottom left areas. I'm pretty sure my math of where to place the centers of each tile is perfect. Just looking at it I have the feeling that it has something to do with OpenGL and the camera position, but I don't actually have any evidence to support that.

I'm using version 0.0.9alpha and all of the sprites are stored in the same file, TilesetForest.png. And loading sprites looks something like this:

sprite = [CCSprite spriteWithFile:@"TilesetForest.png" rect:CGRectMake(4*30, 0, 30, 32)];

So if I'm placing lots of equally sized sprites right next to each other, how come there are gaps between them? Has anyone else had this problem before?

Thanks so much!

Posted 2 years ago #
max9xs
Member

I havent use this editor..... but i show your video carefully and your problem can be easily solve by increasing the size of the first image....i think so but not sure this may help you......

Posted 2 years ago #
gaminghorror
Member

Cocos2d does sub-pixel placement by default. There's a documented #define in config.h that you should turn off. I had the same problem - a layout guide from my artist but no matter how i moved my sprite i could not align it perfectly with the underlying example artwork, it always seemed to be half a pixel off. Turning off subpixel positioning fixed that.

Posted 2 years ago #
micah
Member

Thanks gaminghorror, that definitely seems like it should fix it. But I just tried, and it didn't change how it was rendering at all.

In ccConfig.h I changed 1's to 0's on these lines:
#define CC_COCOSNODE_RENDER_SUBPIXEL 0
#define CC_SPRITESHEET_RENDER_SUBPIXEL 0

I also cleaned my target and re-built it, but it still displays the same as it did before.

Posted 2 years ago #
patrickC
Member
Could be a few reasons, you can try enabling 2d projection
```
[[Director sharedDirector] setProjection:CCDirectorProjection2D];
```
or also enabling/disabling antialiasing.
also, if you're zooming out with the camera it can cause problems.
if you search the forums this problem has been discussed many times, in one form or another,
cheers!
Posted 2 years ago #
micah
Member

Hmm ok thanks. setProjection:CCDirectorProjection2D doesn't fix it, and neither does disabling anti-aliasing by calling setAliasTexParameters on my textures. I'll keep searching around...

Posted 2 years ago #
Steve Oldmeadow
Administrator

As patrickC said, this has been discussed many, many times both on the old Google forums and here. This thread is very similar to your problem:

http://www.cocos2d-iphone.org/forum/topic/2615

You have to remember OpenGL is not a pixel oriented API. For example if you have a 3x3 sprite the centre in a pixel based API is the pixel at 1,1 (assuming 0 based indexing). However, in OpenGL the centre is the point at 1.5,1.5.

Posted 2 years ago #
micah
Member

Thanks! I got it working! For whatever reason none of the other solutions here or the solution in that other thread worked for me. What did work was padding each of my sprites on my texture image with an extra pixel of bleed space. So each sprite is 30x32, but it takes up 32x34 in the image, with a pixel of padding.

It's not a perfect fix because I can tell there are still gaps. But I can now control what gets displayed in those gaps. So instead of blackness, it can just be more of the tile texture. It looks much better now. Thanks!

Posted 2 years ago #
gaminghorror
Member

Note that unless you place the tile sprites in a TextureAtlas, you're wasting memory with 32x34 sprites. They will be created in memory as 32x64 sprites, consuming more memory. If you haven't already you should put them in a TextureAtlas for more effective use of texture memory.

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.