UISprite issue

[xclouder]

NGUI is a cool UI solution for Unity3D, but sometimes it looks strange.
For example, the UISprite.

I needed a solid underline for my UI, and I used UISprite with a 1x1 px white dot image, then stretched it to 320x2 (320 just fit my UI element)

To make it work, I had to change the type to “Sliced” and add a 1px border at the left,top,right,bottom of the Sprite in Atlas.

Then, another issue appeared. My underline was in a ScrollView, it shook all the time (keep switching between a thinner one and a thicker one) when I dragged the ScrollView around.

I haven't found any solutions for this yet, and it makes my game look inferior.

1.Could you please tell me why the 1x1 px sprite doesn’t look solid?  (see the attachment)
2.Why did another 1px border need to be added when I used a UISprite in Tiled mode?
3.Why did the sliced sprite keep shaking in a scrollview when I dragged it?

I think many people have the same confusion. Thanks so much for your answers!

[ArenMook]

1. The answer to this lies in how graphics and texture filtering works. You aren't drawing pixels. You're drawing a quad with a texture on top. Stretch a texture that's 1x1 and you get color bleeding from other nearby pixels. That's texture filtering for you -- it's always going to happen when an atlas is used. If you use a UITexture instead, this won't happen.

2. 1x1 is never a good idea for anything. 2x2 is the minimum recommended size for graphics. Certain image formats will even flat out fail to open when the dimension is 1. The answer to your question also lies in #1: texture filtering, and how it works in computer graphics.

3. It doesn't. However as you scroll content, it may fall in between of pixels, thus causing it to get blurred. This is most noticeable when the sprites within are stretched, have a thin or no border, or the game window's size is not pixel-perfect to begin with (constrained UIRoot etc).

[xclouder]

1. The answer to this lies in how graphics and texture filtering works. You aren't drawing pixels. You're drawing a quad with a texture on top. Stretch a texture that's 1x1 and you get color bleeding from other nearby pixels. That's texture filtering for you -- it's always going to happen when an atlas is used. If you use a UITexture instead, this won't happen.

2. 1x1 is never a good idea for anything. 2x2 is the minimum recommended size for graphics. Certain image formats will even flat out fail to open when the dimension is 1. The answer to your question also lies in #1: texture filtering, and how it works in computer graphics.

3. It doesn't. However as you scroll content, it may fall in between of pixels, thus causing it to get blurred. This is most noticeable when the sprites within are stretched, have a thin or no border, or the game window's size is not pixel-perfect to begin with (constrained UIRoot etc).

Thank you for your answer!

I set the atlas's Filter Mode to Point, and it becomes solid now!
However, atlas set to Point may be not a perfect solution, as it will make sprites in it looks bad while scaling.
Then, I also tried Unity native 2d sprite, and used its sprite pack feature, the sprite I get seems do not have the "solid problem".I wonder how unity sprite implement this?

For my question #3, is there any good suggestion if I do need to put some underlines into a scrollview using NGUI?

[ArenMook]

NGUI automatically rounds the scroll operation down to whole pixels, but this will only be so if your UIRoot is set to Flexible mode and your game window's width and height are even numbers (dividable by two). Otherwise the pixels don't map 1:1 to screen.

[xclouder]

NGUI automatically rounds the scroll operation down to whole pixels, but this will only be so if your UIRoot is set to Flexible mode and your game window's width and height are even numbers (dividable by two). Otherwise the pixels don't map 1:1 to screen.

Thanks for ArenMook's reply, your words helped me a lot, I will have a try.

[xclouder]

NGUI automatically rounds the scroll operation down to whole pixels, but this will only be so if your UIRoot is set to Flexible mode and your game window's width and height are even numbers (dividable by two). Otherwise the pixels don't map 1:1 to screen.

I created a demo Scene with object hierarchy like this:
UIRoot
  Camera
  ScrollView
    Wrapper
       Sprite-Line
       Sprite-Line
       Sprite-Line
       Sprite-Line
       Sprite-Line


Then, I tried to make it pixel-perfect as below:
Set Scaling Style to "Constrained On Mobiles" with ContentWidth=750,ContentHeight=1334(Fit) in the UIRoot Inspector.This is the iPhone6's resolution.

Then, build the project for my iPhone6.

the Sprite-Line is 750x2 px size, using a dot2x2 streched sprite with slice type(1px border).
When I drag the scrollView, the Sprite-Line still shaking.

I compare it to an native iOS app built with UIKit, its 1 point height line does not shake(@2x in iPhone6, 1 point = 2px)

Is there something wrong with the UIRoot setting making my scene not pix-perfect?

[ArenMook]

Setting it to the target's dimensions in constrained mode seems rather counter-intuitive. Why not just leave it as Flexible? It would be the same thing, except it would guarantee that the pixels are going to get mapped 1:1.

What version of NGUI are you using?

[xclouder]

I changed Scaling Style to Flexible, but get the same shaking lines.

I upload the project in attachment, as the NGUI lib is so large, it is not in the compressed project files, you should import one so that you can build successfully. My NGUI version is 3.7.8

[ArenMook]

Everything works as expected on my end. Please update to the latest version of NGUI.