Space between CCSprites RRS feed

  • Question

  • User139094 posted

    I'm busting my head over this one; My iOS app runs at a design resolution of 640x960 pixels and I have some 64x64 sprites. When I position these sprites exactly next to each other, there is still spacing in between them when I run it on the device (iPhone4) In the simulator it looks okay although there is a line visible on the point where the sprites touch.

    All types of scaling are set to 1.0 I have no clue what I'm missing here so hope someone can help me out here.


    Thursday, August 6, 2015 9:50 AM

All replies

  • User139094 posted

    Figured out that it's an issue with the sprite frames generated by TexturePacker. Just tried it with a CCSprite that I initialize using a texture and that works fine.

    Thursday, August 6, 2015 10:47 AM
  • User139094 posted

    Ok, can't seem to solve it. I'm using TexturePacker to create spritesheets and I configured it so it doesn't have any spacing between the frames. Each frame is exactly 64x64 pixels and when I check the spritesheet it looks perfectly fine. However, when I try to display CCSprites based on the frames (SpriteFrame) it keeps looking messed up.

    Here is an example:

    If I save each frame as a separate sprite and display them, it works fine, but not when I display them using a SpriteFrame and the spritesheet.

    And again, in the simulator it works just fine:

    Anyone else experienced this? All help is much appreciated, I've been stuck with this for a day now!

    Thursday, August 6, 2015 12:37 PM
  • User139094 posted

    Here is a reproduction of the issue (using BouncingGame example as boilerplate): blog.rumargaming.com/demo/SpriteFrame_Issue.zip

    This shows the issue on both the simulator and real device (it happens in the simulator now too..) Tested with iPhone 4, 5 and 6

    Thursday, August 6, 2015 6:44 PM
  • User139094 posted

    I think I figured it out now.

    These two links pointed me in the right direction: https://github.com/cocos2d/cocos2d-x/issues/12847 stackoverflow.com/questions/31856388/ccsprite-not-displayed-correctly-when-using-spriteframe/31864892

    It seems the issue is in the cropping (or frame grabbing) and caused by a rounding problem. This does not occur in the simulator as it's 64 bit, but the device is 32 bit.

    The first link describes a workaround that I'm using now: In TexturePacker I set "extrude=1, border=2, padding=2". Extrude will add a few extra pixels outside of the frame so that they are grabbed when the rounding issue causes to go one pixel outside of the frame. It doesn't yet look 100% perfect, but it's close enough for now.

    This is what it looks like on the device now:

    Can this be considered a bug in CocosSharp or maybe it's already a known issue and there is a proper workaround for it? I can live with this extrude workaround for now, but still feels a little dirty to me.


    Thursday, August 6, 2015 8:42 PM
  • User68494 posted

    Hey Ruud

    Let me read through this with your links. At the beginning I thought it was an blending problem and could be the difference of using native format graphic files. This has caused some problems in the past when iOS auto converts the images to pre-multiplied alpha and other platforms do not. Have seen the differences on different levels of hardware as well especially on older ones.

    In your example above do you have all the assets as well as the TexturePacker project as well? If not could you also send me that as well. You can PM me those if you do not want them out in the wild ;-)

    Friday, August 7, 2015 3:38 AM
  • User139094 posted

    Hi Kenneth,

    I have PM'ed you with the requested files. In my actual solution (not the BouncingGame demo) I don't have the assets bundled with the project, but they are extracted from a configuration file and then loaded as textures by their stream. That means they are not optimized by iOS and I can see a slight difference because of that, but that does not seem to be the issue here as the problem also occurs with the BouncingGame demo I made which has the assets bundled.

    I've also set this now before loading any textures:

    CCTexture2D.DefaultIsAntialiased = false;
    CCTexture2D.OptimizeForPremultipliedAlpha = false;

    Which seems to make a difference on the simulator especially (it made the bouncing demo look alright on the simulator, but still didn't fix it on the device).

    Friday, August 7, 2015 4:27 AM
  • User68494 posted

    Thanks for the project files.

    Monday, August 10, 2015 9:15 AM
  • User144851 posted

    Have you tried changing your camera to use a 2D projection?

    Thursday, August 13, 2015 7:18 PM
  • User139094 posted

    Tried that Randy, with the same result.

    Friday, August 14, 2015 6:03 PM
  • User139094 posted

    Hi Kenneth,

    Did you have a chance to look into this issue a little further? The extrude setting has made it acceptable, but I'd like to strive for perfection ;-)

    Friday, August 21, 2015 4:57 AM
  • User47368 posted

    Hi Ruud,

    I have taken a look at the Bouncing Game sample you've provided and have noticed that the sprite sheet is 832 X 192. Given that the sprites you're after are 64x64, you're definitely going to observe rounding errors when the corresponding texture UV coordinates (that are normalised to be between 0 and 1) are calculated because your coordinates won't be rational numbers. e.g.

    64 / 832 = 0.0769...

    My suggestion would be to relayout your sprite sheet to ensure you're going to end up with nicer texture coordinates. For example, I think a 640 x 320 sheet would work well.

    Saturday, August 22, 2015 4:12 AM
  • User139094 posted

    Hi Rami,

    I never realized it worked that way. My actual spritesheet contains 257 sprites of 64x64 in size, so how would I set that up properly? I tried setting the spritesheet size to 1280x1280 (which still leaves a lot of white space) but that didn't help.

    Sunday, August 23, 2015 9:41 AM
  • User47368 posted

    Hi Ruud,

    The final piece of the puzzle is to make sure the static property CCTexture2D.DefaultIsAntialiased = false is set before creating any sprites. And for further robustness I would recommend also setting CCLayer.DefaultCameraProjection = CCCameraProjection.Projection2D.

    Doing this, I was able to enlarge the texture in your BouncingGame sample to 1280 x 320 pixels to remove any texture bleeding artifacts.

    In general, if both 64 / textureWidth and 64 / textureHeight are both rational numbers you should be ok. Also, just be careful that the texture packer isn't adding any additional margin/padding between each rectangle that defines a sprite frame.

    Sunday, August 23, 2015 11:28 AM
  • User139094 posted

    Hi Rami,

    When I set the antialias to false and projection to 2D with the initial bouncinggame demo I sent, it does work on the simulator but still gives the issue on a real device. I also tried to update the spritesheet to 1280x320px but that didn't change anything. Maybe I'm doing the spritesheet resizing wrong, so I repackaged the example and sent you the link in a PM to check.

    So that example works on the simulator, but not when I run it on a device (tested with iPhone 4, 5 and 6)

    Sunday, August 23, 2015 4:00 PM