UIPanel Clipping Texture Mask size ratio and scaling constraint problems

[diederik]

Hi all,

First of all, I really like that we can now have a Texture Mask for clipping a panel!
I have a problem using it on a game that can support multiple resolutions.

I use UIRoot Scaling Style Constrained with 1280 x 720(fit) to ensure my UI is scaled properly on higher resolutions.
This works fine, and the anchoring and scaling looks pretty good on all resolutions, also with other ratios.

I've added a UIPanel Clipping Texture Mask to one of my panels (through code dynamically actually).
Here, I suddenly need to enter a size for my panel (otherwise it is 0 by default and won't render anything).
It works okay when I enter the screen size here, but only for the 16:9 aspect ratio resolutions.
On other resolutions it seems to render the panel a bit too wide and/or high.
I'm suspecting it has something to do with the UIRoot Scaling Constraint, because when I disable that it seems to work on all resolutions.

I've tried compensating the value I enter into the UIPanel Clipping Texture Mask Size property but I'm no good at math.
Can you help me find a good formula to compensate the UIRoot scaling ratio I have?

Pretty complicated question it seems but maybe there's a quick hack possible to make it work.
Or otherwise you might want to check if this is something worth looking into for a new NGUI version?

Thanks for your reply!

Diederik / Xform

[ArenMook]

Make sure the scale of all game objects leading up to (and including) your panel is (1, 1, 1). Non-uniform scaling will break clipping.

[diederik]

Hi Arenmook,

Thanks for your reply.
My UIRoot object is not scaled (1,1,1), but a very small number. But I think that's normal, right?
Camera and all panels under it are all (1,1,1).

As I mentioned, the UIRoot has a Scaling style applied. This seems to work 'behind the scenes' since you don't actually see any scales on any objects changing.
So my guess is that the Scaling style causes non-uniform scaling (?) which causes the clipping of the panel to be out of ratio?
I'm not familiar with the inner workings of the UIPanel Clipping funtionality, but maybe it needs to take this 'behind the scene non-unform scaling' into account before applying the panels size that is defined?

It may be a little too complex to explain (or fix), but at this point the UIPanel clipping is useless when you're supporting multiple aspect ratios (and using the UIRoot Scaling contraint, which is great).

Thanks in advance for your thoughts on this.

Diederik

[ArenMook]

Aspect ratio doesn't have much an effect on the UIRoot, certainly won't cause non-uniform scaling of any kind.

I tried this:

1. New scene.
2. Made a scroll view and a sprite inside it so that I can see it getting clipped.
3. Changed scroll view's panel to clip using a texture mask.
4. Changed UIRoot to be Fixed size. Everything looks the same, proper.
5. Changed aspect ratio to 4:3 then 16:9 and 16:10, all looks the same.

What are you doing differently?

[diederik]

Hi ArenMook,

Thanks for taking the time. I think you're missing an essential step. I did this.

1. New scene, new NGUI > Create > 2D UI. Set the game scene view to 1280x720px for easy development.
2. Add a Panel under the Camera. Add a Sprite under the camera that is pretty big.
(In reality I have lots of sprites, buttons and some anchoring here and there)
3. Set the UI Root Scaling Style to Constrained 1280 x 720(fit).
(UIRoot does not have a Fixed size? So I guess you meant Constrained).
4. On the UI Panel, set Clipping to Texture Mask. Extra parameters appear.
5. Specify the mask texture (I have a cool one of 240x160px)
6. Set the Size parameter to 1280 x 720 (I want the mask to be stretched over the whole panel or screen)
7. Changed the game view resolution and ratios. Everything appears fine. As long as you stick to 16:9 ratios.
> On 4:3, the mask is not stretched fullscreen (but in fact wider than that).

Again, my guess is that the UI Panel Size parameter needs to be adjusted on the fly to compensate for the resolution (and ratio I want).
I can't explain it better than that. I can send over a zipped example if you want.

Thanks again for your time.

Diederik / Xform

[ArenMook]

You need to anchor the panel if you want its dimensions to stick to the screen.

[diederik]

Hi Arenmook!

Thanks a lot! That seems to fix it for me!
I did not know or notice that the anchoring is available for panels when you enable clipping!
To be honest, I never had any problems with the scaling so I had not been searching for it either.
I enable the clipping through script:
panel.clipping = UIDrawCall.Clipping.TextureMask;
panel.SetAnchor(UIRootGameObject);
panel.clipTexture = textureMask;
And this works fine now.
I now have a great (animated) mask that looks pretty cool

Cheers,

Diederik

[vivalavida]

Hi Aren,
My scene has multiple Panels that get swapped in as and when required,
Widgets are anchored within these panels by making them a child of an anchored UIWidget(container).
I am trying to get all my panels re-size as per the screen size but am not able to do so.
If I set an anchor on the panels to UIRoot then I cannot move them around.

Should I write a script to take the height and width of UIRoot and apply it to each panel, or is there a better solution?

Thanks.

[diederik]

Hi vivalavida,

I'm not sure if it would work in your specific case, but for the effect you want I use...
UI Root Scaling Style Constrained
on the parent UI object.
For the Content Width and Height I usually enter the reference resolution I use for the creation of my interface.
So for my current project that is 1280x720(fit).

Before I used that (or before I found out there was such a thing as a UI Root Scaling Style!)
is used to scale all transforms of the panels to achieve some resizing.
So for example if the resolution was 1920x1080 I would scale all panels at 1.5, 1.5, 1.5 to keep stuff readable.

But the UI Root Scaling Style works a lot better

[ArenMook]

Hi Aren,
My scene has multiple Panels that get swapped in as and when required,
Widgets are anchored within these panels by making them a child of an anchored UIWidget(container).
I am trying to get all my panels re-size as per the screen size but am not able to do so.
If I set an anchor on the panels to UIRoot then I cannot move them around.

Should I write a script to take the height and width of UIRoot and apply it to each panel, or is there a better solution?

Thanks.

You can move anchored panels if you check the "offset" flag on the panel.