Hello Guest

Author Topic: Extra transparent border in atlas?  (Read 14108 times)

habitoti

  • 2D Toolkit
  • Jr. Member
  • *
  • Posts: 82
    • View Profile
    • Rombos Homepage
Extra transparent border in atlas?
« on: December 08, 2013, 03:03:29 pm »
Hi,

one great feature I used to use with TexturePacker on iOS in the past was the ability to configure an additional transparent border (2-3px) around sprites of the atlas w/o having to explicitly add it to the artwork itself. This was completely transparent to the usage of sprites otherwise, but it allowed for perfect antialiasing of sprite borders on rotation.
With tk2d now, the sprite borders can get very ugly when rotating sprites. Wouldn't that be a great feature for tk2d as well to introduce such a feature for the atlas?

Best, habitoti
Checkout our homepage or visit the Rombos blog.

unikronsoftware

  • Administrator
  • Hero Member
  • *****
  • Posts: 9709
    • View Profile
Re: Extra transparent border in atlas?
« Reply #1 on: December 08, 2013, 11:09:59 pm »
assuming I understand this correctly, wouldn't adding padding on the sprite in the sprite collection editor fix this?

habitoti

  • 2D Toolkit
  • Jr. Member
  • *
  • Posts: 82
    • View Profile
    • Rombos Homepage
Re: Extra transparent border in atlas?
« Reply #2 on: December 09, 2013, 07:52:37 am »
No, the atlas padding is just to avoid artifacts from color bleeding. You need additional space around the sprite to allow for placing of antialiasing pixels. See the following sample: both sprites are slightly rotated by the same amount. The left has no transparent border, while the right is the exact same sprite, but has an additional transparent border of 2 px on each side. The right border appears very jagged, since no antialiasing can be produced oustide of the sprite area, while the right is extremely smooth…the additional empty space can be used by the GPU to produce the necessary antialiasing pixels:



In TexturePacker, this option is called "Inner Padding", since it produces an additional padding to the inner portion of the sprite (and thus effectively also extends its net size). This basically leaves a corresponding space around the sprite within the atlas and fixes the metadata accordingly, so the sprite will be used including the additional transparent border. That way, you don't need to fix the artwork itself (which can be extremely tedious otherwise).



This would be an extremely valuable option for the tk2d sprite collections!

Regards, habitoti
Checkout our homepage or visit the Rombos blog.

unikronsoftware

  • Administrator
  • Hero Member
  • *****
  • Posts: 9709
    • View Profile
Re: Extra transparent border in atlas?
« Reply #3 on: December 09, 2013, 10:28:14 am »
I'll have to look at what that texture packer thing does, but that sounds like edge dilation? Unity should do that when the texture type is set to "Alpha is transparency". Try setting that on the atlas and see if that helps?

habitoti

  • 2D Toolkit
  • Jr. Member
  • *
  • Posts: 82
    • View Profile
    • Rombos Homepage
Re: Extra transparent border in atlas?
« Reply #4 on: December 09, 2013, 02:21:37 pm »
No, color dilation artifacts is what you actually also solve with the atlas padding that exists already today. The "inner padding" is no real magic, it just provides the missing space around the sprite to do proper antialiasing by adding an explicit 2px transparent border.
This is actually very easy to achieve -- it is basically an additional padding that also goes into the sprite metadata. So assume you have a 50x50 px sprite, anchor at (25,25). In the atlas, it would be placed now at e.g. a rect (2,2,52,52), but the metadata would denote it as a rect (0,0,54,54) and anchor now at (27,27). So the finally used sprite would effectively be 4px larger in width and height, now having a 2px wide transparent border all around.
All you would need to do is add the inner padding to the existing padding parameter on atlas creation, and then consider it for the sprite metadata accordingly. Implementation-wise, this should be a no-brainer, since you have already padding implemented.
« Last Edit: December 10, 2013, 06:42:48 am by habitoti »
Checkout our homepage or visit the Rombos blog.

unikronsoftware

  • Administrator
  • Hero Member
  • *****
  • Posts: 9709
    • View Profile
Re: Extra transparent border in atlas?
« Reply #5 on: December 10, 2013, 05:04:30 pm »
If I read this correctly, it does exactly what the padding does, but increases the size of the polygon to include the padding to avoid geometric aliasing?

habitoti

  • 2D Toolkit
  • Jr. Member
  • *
  • Posts: 82
    • View Profile
    • Rombos Homepage
Re: Extra transparent border in atlas?
« Reply #6 on: December 10, 2013, 05:56:43 pm »
Exactly
Checkout our homepage or visit the Rombos blog.

unikronsoftware

  • Administrator
  • Hero Member
  • *****
  • Posts: 9709
    • View Profile
Re: Extra transparent border in atlas?
« Reply #7 on: December 11, 2013, 10:51:20 pm »
I'll see if I can fit something in to the next version. Not sure though - it depends on a few different things. If you wanna hack it in its pretty straightforward.

snlehton

  • Newbie
  • *
  • Posts: 1
    • View Profile
Re: Extra transparent border in atlas?
« Reply #8 on: November 29, 2014, 11:16:04 pm »
Hi,

I was having issue with the same lack of filtering at the edges of sprites, and I was wondering if this has been already fixed/improved. Simply adding one pixel worth of extension to the polygon (and the UV's of course) should to the trick - assuming there's enough padding in the texture.

The amount of padding needs to be at least 2 (pixels of different sprites need to have at least 2 empty pixels between them), otherwise you might get small glitches when the sprites are being rotated as fragments of neighbor sprites might be sampled by the bilinear filtering...

If nothing was done to this yet, what is the hack to implement it?

Cheers,
Sampsa

unikronsoftware

  • Administrator
  • Hero Member
  • *****
  • Posts: 9709
    • View Profile
Re: Extra transparent border in atlas?
« Reply #9 on: November 30, 2014, 01:07:00 pm »
No, not got around to that yet...
Regarding the hack -
tk2dSpriteCollectionBuilder.ProcessTexture, add something to fake the bounds.
and line 1832 or so -
               Vector3 dpos0 = new Vector3(Mathf.Lerp(pos0.x, pos1.x, x0), 0.0f, Mathf.Lerp(pos0.z, pos1.z, y0));
               Vector3 dpos1 = new Vector3(Mathf.Lerp(pos0.x, pos1.x, x1), 0.0f, Mathf.Lerp(pos0.z, pos1.z, y1));

This is how it generates the positions followed by UVs. You'll need to add an additional pixels worth of extension there and the uvs that follow immediately after.

I wouldn't bother trying to make this work for all the rest of the scenarios (its the same reason I haven't got around to doing that, there are a lot of other cases that will need to be handled in an official solution), but it should be straightforward enough for this one case.


Or, I suppose if your source image had the extra padding you can just use custom render geometry and be done with it...

drkucho

  • 2D Toolkit
  • Jr. Member
  • *
  • Posts: 72
  • Retro Arcade Freak
    • View Profile
    • Dr. Kucho!
Re: Extra transparent border in atlas?
« Reply #10 on: December 09, 2014, 03:36:57 pm »
missing this feature as well here, it would be great if tk2d next version have this in mind

i finally made my own hack, but i still have to create the image with extra pixels, what my hack does is to trim each sprite leaving 1 extra pixel on each border, not sure if that is what unicorn proposed to do for hacking it.

wagenheimer

  • 2D Toolkit
  • Jr. Member
  • *
  • Posts: 50
    • View Profile
Re: Extra transparent border in atlas?
« Reply #11 on: December 09, 2014, 06:35:49 pm »
+1 vote for this!

oug

  • 2D Toolkit
  • Newbie
  • *
  • Posts: 32
    • View Profile
Re: Extra transparent border in atlas?
« Reply #12 on: November 19, 2015, 05:14:44 pm »
Sorry for kicking this old topic, but is there a solution within the tk2d anno 2015 for this? I've tried adding alphaspace in my PNG, but I still get jagged edges unfortunately.

I'm using a simple white square of 128x128 with 64px of padding on all sides (so the PNG is now 256x256), but it's still as jagged as the original 128x128 when rotating.

drkucho

  • 2D Toolkit
  • Jr. Member
  • *
  • Posts: 72
  • Retro Arcade Freak
    • View Profile
    • Dr. Kucho!
Re: Extra transparent border in atlas?
« Reply #13 on: November 20, 2015, 12:10:19 am »
i ended up modified tk2d code , the part where it trims the sprite sheets to add a transparent pixel (or did i add 2? i can't remember), i can't even find where i did the hack now.

i still have to add extra transparent pixels for each cell in the sprite sheet so the hack works properly but at least it works, it can trim the collection now the same as before but with an extra transparent border of 1 pixel

oug

  • 2D Toolkit
  • Newbie
  • *
  • Posts: 32
    • View Profile
Re: Extra transparent border in atlas?
« Reply #14 on: November 20, 2015, 08:59:06 am »
Thank you for your response. I've decided to use a more pragmatic solution by editing my sprite.

As tk2d crops the added alphaspace from the PNG for the spritesheet (so a 128x128 square with a 64 padding on all sides (PNG is 256x256) still remains 128x128 in tk2d), I've added a small border of 1 px on the edge of the 256x256. This border has a opacity of 1% (so it's not visible in game, but there is still data so tk2d won't crop it off). This makes sure that the PNG stays 256x256 within the tk2d environment.

The aliasing on the original 128x128 square (within the 256x256) is now gone. I can rotate it as i please.

It's still a hack, but a more clean one I guess. I don't have to edit any code :)