Author Topic: Borders on sprite  (Read 13781 times)

Rastaf

  • Guest
Borders on sprite
« on: April 24, 2012, 04:02:33 PM »
Hi

When creating a sprite, it often (but not always) has some borders. The borders are not present in the original image nor in the Atlas texture. How can I get rid of them? Am I missing somtething?

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Borders on sprite
« Reply #1 on: April 24, 2012, 11:36:00 PM »
Borders? Do you mean things on the edge of the sprite that you only see when you zoom it up way past its pixel-perfect coordinates? If so, that's just how bilinear / trilinear filtering works. Either use point filtering by selecting it on your atlas texture, or increase the padding amount on the atlas maker.

Rastaf

  • Guest
Re: Borders on sprite
« Reply #2 on: April 26, 2012, 04:04:56 AM »
Hi ArenMook

Thanks for the quick answer.
In the meantime, I tried both: setting the atlas texture to use point filtering and updating using a higher value for padding.
Unfortunately it didn't help.

Here is a screenshot, the "border" is the vertical line on the right side. But with other sprites the "border" appears on other sides, sometimes on more than one side.
« Last Edit: April 26, 2012, 04:07:35 AM by Rastaf »

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Borders on sprite
« Reply #3 on: April 26, 2012, 02:44:07 PM »
Just to clarify... adjusting the "border" on the Atlas Maker will only work if you add/update something afterwards.

vellocet

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 6
    • View Profile
Re: Borders on sprite
« Reply #4 on: May 04, 2012, 02:56:21 AM »
I used to have that problem all the time and it took me ages to figure out what was going on.  This happens in all 2D engines and especially if you're using photoshop.

This will fix it.  http://answers.unity3d.com/questions/10302/messy-alpha-problem-white-around-edges.html

I suggest that you "solidify" your atlases after you've finalized them and then the border will go away.

Rastaf

  • Guest
Re: Borders on sprite
« Reply #5 on: May 04, 2012, 05:43:57 AM »
Thanx, vellocet, that did it!!!  ;D

In my case, all the elements in the atlas have the same background, so the Photoshop fill-tool did the job.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Borders on sprite
« Reply #6 on: May 04, 2012, 08:24:31 AM »
And the same effect for those without Photoshop: http://www.gimpchat.com/viewtopic.php?f=9&t=3153

morgue

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 23
    • View Profile
Re: Borders on sprite
« Reply #7 on: July 25, 2013, 01:20:09 PM »
Hey, I don't know if this is exactly the issue you were having, but for me, activating "Alpha Is Transparency" on the Atlas Texture Settings on the Inspector, fixed the border issue.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Borders on sprite
« Reply #8 on: July 26, 2013, 04:04:32 AM »
it's a unity 4.2 feature

Evil-Dog

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 22
    • View Profile
Re: Borders on sprite
« Reply #9 on: June 23, 2014, 01:08:24 AM »
Is that handled correctly in recent versions of NGUI? For exemple, 2d toolkit handles transparency correctly and you don't need to care about that stuff, everything looks perfect. I think it's called "precomputed alpha" or something? I can't seem to find the parameters to get rid of all the white/black edges on my sprites and would hate to have to process my atlases every time I generate them or to process all the images my artist sends me.
Any hint?
Thanks
« Last Edit: June 23, 2014, 09:18:46 AM by Evil-Dog »

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Borders on sprite
« Reply #10 on: June 24, 2014, 02:21:44 AM »
I think you mean pre-multiplied alpha (PMA). PMA requires a different set of shaders (which NGUI provides). You need to choose to use PMA when initially creating your atlas. Once you create your atlas, it will be "stuck" in PMA or non-PMA mode. You can switch the shader manually (to Unlit Premultiplied Colored), but you will need to re-import all your sprites.

Evil-Dog

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 22
    • View Profile
Re: Borders on sprite
« Reply #11 on: June 24, 2014, 09:57:20 AM »
I did before but that's the kind of results I got

Evil-Dog

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 22
    • View Profile
Re: Borders on sprite
« Reply #12 on: June 24, 2014, 01:28:30 PM »
Ok so I got some something but same problem. The atlas's shader is set to Unit Premultiplied Colored and I had to remove all the images from the atlas and re-add them to get the proper transparency, but the same white edges are still there. And I confirmed that they're not in the source images.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Borders on sprite
« Reply #13 on: June 25, 2014, 06:07:58 AM »
Are you using PNGs for source images? PNG's transparent areas = pure white.

You need to use alpha, not transparency. There is a world of difference between the two in Photoshop. Use PSD file format, get rid of the transparency, and replace it with the alpha channel.

P.S. I wrote a file format conversion tool that can convert PNGs into TGAs a while back. TGAs use alpha. http://www.tasharen.com/temp/formatconverter.zip -- just drag the source PNG onto this executable and it will spit out an R5T file (custom image format I wrote a long time ago). Drag the R5T onto the executable, and it will spit out a TGA for you. You will then see exactly what was hidden by the transparency.

Evil-Dog

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 22
    • View Profile
Re: Borders on sprite
« Reply #14 on: June 25, 2014, 10:38:30 AM »
Yes PNGs and I know they're different and PNG doesn't have an alpha channel but that's what I'm saying, 2D Toolkit handles this just fine with PNGs, don't need to bother with any of this. NGUI would gain a lot from doing it too, however they do it.  Do you think they process the PNGs during the atlas creation to create the alpha channel and "solidify" the color channel?

I already had tools to convert my PNGs to PSDs from when I was using SpriteManager2 which had the same problem. I'll give em a go and use yours if it doesn't work. Thanks for the help, much appreciated.

Here's a comparison between NGUI and 2D Toolkit (out of the box results, no need to change shaders or process images or anything) using PNGs