Author Topic: UIProgressBar mip-map problem  (Read 4131 times)

Biggix

  • Newbie
  • *
  • Thank You
  • -Given: 2
  • -Receive: 0
  • Posts: 33
    • View Profile
UIProgressBar mip-map problem
« on: April 19, 2016, 12:12:32 PM »
Hi all,

I'm using a Sliced sprite with UIProgressBar. Everything is pretty obvious but I see a major detail decrease (stepping) upon decreasing the values of the slider. I think it's corellated with mip levels but I'm not sure where and how to adjust them. I tried adjusting the atlas texture the progressbar sprite comes from, but nothing changes. It seems that it creates a new (?) texture for the sliced sprite and I need to adjust the mip/aniso (?) parameters of that new texture.

Thanks!

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UIProgressBar mip-map problem
« Reply #1 on: April 19, 2016, 12:58:28 PM »
You need to actually define a border on your sliced sprite, or it acts like a regular sprite. Find it in your UIAtlas and give it a border.

Biggix

  • Newbie
  • *
  • Thank You
  • -Given: 2
  • -Receive: 0
  • Posts: 33
    • View Profile
Re: UIProgressBar mip-map problem
« Reply #2 on: April 19, 2016, 04:26:18 PM »
I did define a border in the UIAtlas. The part between the "caps" gradually becomes blurred (with several iterations) as the slider value gets closer to zero.

Check out this GIF:
« Last Edit: April 20, 2016, 03:28:59 AM by Biggix »

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UIProgressBar mip-map problem
« Reply #3 on: April 20, 2016, 04:54:03 PM »
Check the filtering method on your atlas' texture. Also looking at that image, you can re-create it with just a spherical sprite, sliced down the middle. You definitely won't get artifacts if doing it that way, and will save a lot of texture space too.

Biggix

  • Newbie
  • *
  • Thank You
  • -Given: 2
  • -Receive: 0
  • Posts: 33
    • View Profile
Re: UIProgressBar mip-map problem
« Reply #4 on: April 22, 2016, 06:25:38 AM »
I don't see a solution. What should I do to get rid of this obvious problem if I don't want to make a circular sprite? I followed your UIProgress tutorial precisely and this happens. I've checked the filtering, the problem happens both on Bilinear and Trilinear, any Aniso level, with no changes. I've seen the same bug more than a year ago on previous versions of NGUI and it is still here.
« Last Edit: April 22, 2016, 06:57:40 AM by Biggix »

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UIProgressBar mip-map problem
« Reply #5 on: April 25, 2016, 12:23:11 PM »
The only way to do this without creating a circular sprite is to use point filtering.

The problem occurs precisely because of how texture bilinear/trilinear mip-map filtering works when the texture becomes downsampled.

This has nothing to do with NGUI. It's just how filtering in graphics work.

Biggix

  • Newbie
  • *
  • Thank You
  • -Given: 2
  • -Receive: 0
  • Posts: 33
    • View Profile
Re: UIProgressBar mip-map problem
« Reply #6 on: April 27, 2016, 08:59:36 AM »
No ArenMook, you're wrong. Your current implementation of UIProgressBar is conceptually incorrect, and useless in case of non-circular sprites.

When I use a "fill sprite" with fill direction=horizontal, it cuts off the unnecessary pixels without any artifacts you're referring to.

This is the method which should be used for a progress bar. You only need to add the end cap (specified as an extra sprite) to the inner part of the sprite that was cut. The end cap could be resized on really small slider values.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UIProgressBar mip-map problem
« Reply #7 on: April 28, 2016, 02:27:22 AM »
The progress bar will use whatever sprite you target. If you target a sliced sprite, as you've done in your screenshots, then everything I said is correct. If you target a filled type sprite, then you will get it nicely cut instead. It's up to you to choose what you need.

What I still don't understand is why you are so reluctant to make a circle out of that long sprite. You'll get what you wanted and you will save texture memory. Win-win. Why the reluctance?

Lastly, if you are really so adamant about creating a custom sliced type sprite that keeps the end caps intact and cuts the center instead of shrinking it, you can always just create a custom sprite renderer. Create a custom class, inherit from UISprite and overwrite the OnFill function, filling the graphics arrays as you see fit.

Biggix

  • Newbie
  • *
  • Thank You
  • -Given: 2
  • -Receive: 0
  • Posts: 33
    • View Profile
Re: UIProgressBar mip-map problem
« Reply #8 on: April 29, 2016, 01:55:39 AM »
I could make a circle in this specific case but I need to use long and beautiful progress bars in other cases, and I hate software limitations.

Finally you gave a good idea about that custom sprite renderer. However my qualification is far from being able to create such a class. Do you know where I can find a working example of a similar activity?

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UIProgressBar mip-map problem
« Reply #9 on: April 29, 2016, 12:42:05 PM »
Just have a look at UITexture.OnFill, which ultimately calls UIBasicSprite.SimpleFill / UIBasicSprite.SlicedFill / UIBasicSprite.TiledFill etc. You get 3 arrays -- vertices, UVs, colors -- and it's up to you to fill them in groups of 3 (3 vertices = 1 triangle). So for a quad sprite that would be 2*3=6 vertices total. For a 9-sliced sprite it would be 9*2*3=54 vertices.