Sometimes textures are too close in the png...

[Fredman]

Hello and thanks for this useful library, it makes my day !

I've a little issue, sometimes if i use some textures like square or rounded square, it may have one pixel of the upper texture that come in the texture of the rounded square.

I'm not sure to be clear, but if you can give a clue on how adding some gap between textures, it could be very cool !

thanks

[richardlord]

Hi. I've not seen this before, are you able to provide an example? The textures are made by first creating a bitmap (in the BitmapCreator class) and then combining them into the texture atlases (in the TextureNode class, see line 59).

[Fredman]

hi, i can't reproduce it each time. It's depending on how the textures are combining in the final png. It's about one pixel and it's often the case when i put in a texture some textfields. I find a hacky workaround by adding a transparent rectangle in FlashDisplayObject Class

            public function FlashDisplayObject( object : DisplayObject, scale : Number )
    {
        // add a transparent background to all objects
        var bounds:Rectangle = object.getBounds( object );

        var container:Sprite = new Sprite();
        container.graphics.beginFill(0xFF0042, 0);
        container.graphics.drawRect( bounds.x - 1, bounds.y -1, bounds.width + 2, bounds.height + 2);
        container.addChild(object);

        this.object = container;
        this.scale = scale;
    } 

But i don't understand why these textures are not well divided.

[jonnysparkplugs]

I can recreate this, the weird thing is however the texture file appears to be correct. See attached screen shot

weirdly when opening the assets_0.png it appears to be correct. there is zero pixes gap in-between some of the shapes but when its loaded on screen it has the issue.

https://dl.dropbox.com/u/9000077/fruitfly/assets.fla https://dl.dropbox.com/u/9000077/fruitfly/assets.swc https://dl.dropbox.com/u/9000077/fruitfly/assets.xml https://dl.dropbox.com/u/9000077/fruitfly/assets_0.png https://dl.dropbox.com/u/9000077/fruitfly/assets_0.xml

[SudoPlz]

I've been bumping my head on the screen for hours trying to figure what caused my textures to have a vertical 1 px width line... I'm glad at least now I know what it is.... The thing is I do not want to add a 1 pixel transparent border arround my img. Is there any way I could add some gap between the objects inside the spritesheeet? If this bugs root cause does not get fixed , the only viable solution I see is to change the xml programmatically AFTER it has been created by fruitfly? (That assumes we have spotted the problem in the xml first).

Also many thanks for the library.. its golden..

[matt4530]

Any solution to this yet? I'm facing the same problem and just padding out sprites might not be the solution I want.

[SudoPlz]

No solutions yet. I just used it in my project with padding. RichardLord never replied to any emails or questions I asked and I could not really pinpoint the problem in the code.

[matt4530]

Alright. :/ Did you pad out the bitmaps or the regions? Bitmaps being, when the assets are rendered to bitmap form, you make the bounds larger, and regions meaning just where you fit rectangle regions [insert() function] together.

[SudoPlz]

I just programmatically added an 1 pixel transparent frame arround each image BEFORE inserting them into Fruitfly. Does this help you?

[matt4530]

Well, I've sort of got several other issues (specifically dimension problems with strokes and filters) that I've got to sort out as well, so I'm not sure if I'm able to do that reliably at the moment.

Thanks, however, for the advice.

[SudoPlz]

Would you like me to try to find and give you the code I used to add the transparent border arround each image?

[richardlord]

Sorry I didn't reply. I don't use fruitfly anymore and haven't had time to look at the issue. If you find a solution I would be happy to add it to the repository. I will also endeavour to answer any questions you have about the code.

[matt4530]

Sure, I'll take any code I get.

[SudoPlz]

Ok, I'll find it, make a quick git project and post back. Check again in an hour.

[richardlord]

SubTextureNode handles the placement of items in the atlas. If you add one to each use of item.bitmap.width and item.bitmap.height in this class that should add a one pixel space between the images. (I think - it's a while since I wrote the code).

[SudoPlz]

Richard when you get some free time it would be very nice if you just added that. It would solve lots of problems ..! You got a great piece of code here..

[richardlord]

It seems the problem may relate to the anti-aliasing in Starling. Anyway, try the code in this branch - https://github.com/richardlord/Fruitfly/tree/padding. I've added a bitmapPadding property in the Fruitfly instance, which defaults to one pixel. None of my examples will launch, possibly due to changes in Starling since I last worked on this (no time to investigate now). So would you test it out for me, thanks. I'll pull it into master if it works.

[SudoPlz]

Thank you RicharLord for your time. I will test it later. Till then I've made a quick github for adding a little frame on an image. Its the file TileFrame.as found here https://github.com/SudoPlz/Tileframe . For example you could do. frame.drawFrameOnTopOfImg( image, image.width, image.height,1,0 ) to add an 1 pixel transparent border on your img. I hope this helps someone.

[matt4530]

@richardlord Your fix did not appear to solve ALL instances. It did solve a great deal of them though. Note, that even with a padding of like 10 or something, it still showed textures. It appears, however, that the overlay might be from a nearby asset with something bleeding over (like a stroke or filter). I'll be doing some more testing and what not over the next few days.

[matt4530]

Alright, so solve issues with strokes and filters, you can just do some minor edits to convertDisplayObjectToBitmap() in BitmapCreator. A solution might look something like:

public function convertDisplayObjectToBitmap(name:String, displayObject:DisplayObject, scale:Number = 1, quality:String = StageQuality.BEST):TextureAtlasItem
{
    //whatever your padding value is:
    var padding:int = 2;


    var bounds:Rectangle = displayObject.getRect(displayObject);


    var w:int = Math.abs(Math.ceil(bounds.width * scale));
    var h:int = Math.abs(Math.ceil(bounds.height * scale));

    //  blank symbols had height and width of 0
    // which messed up the BitmapData constructor
    w = Math.max(1, w); h = Math.max(1, h);

    var bitmapData:BitmapData = new BitmapData(w + padding * 2, h + padding * 2, true, 0);
    var absScale:Number = scale < 0 ? -scale : scale;
    var x:Number = -bounds.left * absScale;
    var y:Number = -bounds.top * absScale;

    transform.a = scale;
    transform.d = scale;
    transform.tx = x + padding;
    transform.ty = y + padding;
    bitmapData.drawWithQuality(displayObject, transform, null, null, null, true, quality);

    var item:TextureAtlasItem = new TextureAtlasItem(name, bitmapData);
    item.origin = new Point(x + padding, y + padding);
    return item;
}