Confusing clippping, doesn't match the size specified

[renderhjs]

As can be seen in this GIF the size of the clipping is not I expect it to be (full screen width equals to Size.x = 0).



The same happens if i use a alpha or soft clipping, there seems to be some magic margin that always gets added. Obviously if I remove the clipping the whole scrolling within a frame is broken. Just to be clear: What I want is that the clipping rectangle works with a width of the full screen width, right now I am not able to do that.

• So my question is how to I fix this, is there some obvious setting I haven't found yet that lets me remove that padding in the rectangular mask area?
• Also upon testing on some of the Android devices (Samsung Galaxy S3) the shader renders black wheras on a Nexus 7 tablet it does fine.

[renderhjs]

Upon further investigation it turns out that the mask appears fine on a Android Nexus 7, not on a Galaxy S3 and not like seen the animated GIF on my desktop. Any insight what could cause this or why it is the way it is would be helpful.

[redhawk]

I thought I recall another post response about not setting your Size to 0.  I.e maybe stop at Size 0.01.  Otherwise, I'm sure someone with more knowledge will answer.

[renderhjs]

@Redhawk: Thanks for responding but the docs say that if you set it to 0 it auto scales it to the width or height. And you can tell by the magenta wireframe outline, that it detects the correct width.

So even when I manually set a width in NGUI pixel units, I still get this odd masked almost fixed with left and right



I marked in red the area I am talking about. Again maybe I am missing something obvious but it almost feels like there is some hard coded margin within that masking shader or so.

[dlewis]

One of the later versions of NGUI (not the latest) had an issue where it would draw the clipping rect incorrectly. Try updating if you're not on the latest version?

[renderhjs]

We purchased it a few weeks ago, I am sure that it is fairly up to date. But I can try updating it later to see if it does anything.

[renderhjs]

Bump, I still haven't resolved this, any insights would be nice.

[ArenMook]

Select the UIRoot and hit Alt+Shift+P to make it pixel-perfect. I am guessing one of your game objects is scaled weirdly.

[renderhjs]

That fixed it 90%, still I see some black or opaque borders, I guess it will do for now 

Also related:
I can't seem to fix the scroll behavior. I replicated pretty much what the example scene had but the bounds go around the center of the screen instead of the left and right clipping edges, see gif



As you can see the clipping gizmo display is correct (Magenta), and Orange I presume is the content bounds, yet it does not behave correctly. And yes I already made everything pixel perfect, all other transform nodes have a scale of 1,1,1. Also the scrollbar's size (horizontalScrollBar.barSize) gets set to 0 or it's tiniest size every time. Looking at the Ngui code I assume it is related to mPanel.clipRange; but I can't figure out what or why.

The settings of that panel scroll panel

[ArenMook]

Why do Start and Back buttons have an orange outline?

[renderhjs]

That's my own Gizmo code, additional UI transition stuff. Same with the Green and red outline those are custom Gizmo scripts.

[ArenMook]

Well, no idea then. Check your setup and compare it to the clipped panel example that comes with NGUI as I know it works correctly.

[renderhjs]

so here is what I did, I went to the example scenes and changed the size of the clipping mask to 0 (as per doc which makes it 100% the width of the screen) and I get the same bugs (just removed some sprites and labels)



Notice that just like my scene it also shrinks the scroll bar at the bottom likewise. The only thing that I haven't figured out yet that this scene seems to have no issues with is the masking.

So it looks like it is broken :*(

[renderhjs]

Actually that's what was wrong the whole time, NGui's UiDraggablePanel is not written with the UIPanel's clipping size of size.x = 0f in mind. So what I ended up doing now is calculating the target unit screen width and apply it via code to the UIpanel instead of relying on the 0f auto width feature.
This also fixes the scrollbar resizing to it's tiniest size.