UIRoot FixedSize alternative : FlexibleSize (Feature proposal)

[Decco]

When I use FixedSize on UIRoot, I often face the same problem : I can not set the width ...
So I have add a new Scaling Style with more options : FlexibleSize

How it works :
 - You set the height AND width of the UI you are working on.
 - You set the scaling mode : FitHeight, FitWidth, Fit or Fill

Here the result when you are working on a 16/10 UI (or images) with differents aspect ratio screens



There is just some lines to add :

In UIRoot.cs
Replace (line 24) :

1.         public enum Scaling
2.         {
3.                 PixelPerfect,
4.                 FixedSize,
5.                 FixedSizeOnMobiles,
6.         }
7.  

with

1.         public enum Scaling
2.         {
3.                 PixelPerfect,
4.                 FixedSize,
5.                 FixedSizeOnMobiles,
6.                 FlexibleSize,
7.         }
8.  
9.     public enum ScalingMode
10.     {
11.         FitHeight,
12.         FitWidth,
13.         Fit,
14.         Fill,
15.     }
16.  

Add (line 78) :

1.     public ScalingMode scalingMode = ScalingMode.Fit;
2.     public Vector2 initialSize = new Vector2(1920f, 1080.0f);
3.  

Add after (line 98) :

1. float aspect = screen.x / screen.y;

1.             if (scalingStyle == Scaling.FlexibleSize)
2.             {
3.                 float initialAspect = initialSize.x / initialSize.y;
4.  
5.                 switch (scalingMode)
6.                 {
7.                     case ScalingMode.FitHeight:
8.                         return Mathf.RoundToInt(initialSize.y);
9.                     case ScalingMode.FitWidth:
10.                         return Mathf.RoundToInt(initialSize.x / aspect);
11.                     case ScalingMode.Fit:
12.                         if (initialAspect > aspect)
13.                             return Mathf.RoundToInt(initialSize.x / aspect);
14.                         else
15.                             return Mathf.RoundToInt(initialSize.y);
16.                     case ScalingMode.Fill:
17.                         if (initialAspect < aspect)
18.                             return Mathf.RoundToInt(initialSize.x / aspect);
19.                         else
20.                             return Mathf.RoundToInt(initialSize.y);
21.                 }
22.             }
23.  

Add before (line 172) :

1. if (height < minimumHeight) return (float)minimumHeight / height;

1.         if (scalingStyle == Scaling.FlexibleSize)
2.             return (float)activeHeight / height;
3.  

In UIRootEditor.cs
Replace (line 21):

1.         if (scaling != UIRoot.Scaling.PixelPerfect)
2.                 {
3.                         NGUIEditorTools.DrawProperty("Manual Height", serializedObject, "manualHeight");
4.                 }
5.  
6.         if (scaling != UIRoot.Scaling.FixedSize)
7.                 {
8.                         NGUIEditorTools.DrawProperty("Minimum Height", serializedObject, "minimumHeight");
9.                         NGUIEditorTools.DrawProperty("Maximum Height", serializedObject, "maximumHeight");
10.                 }
11.  

with

1.         if (scaling != UIRoot.Scaling.PixelPerfect && scaling != UIRoot.Scaling.FlexibleSize)
2.                 {
3.                         NGUIEditorTools.DrawProperty("Manual Height", serializedObject, "manualHeight");
4.                 }
5.  
6.         if (scaling != UIRoot.Scaling.FixedSize && scaling != UIRoot.Scaling.FlexibleSize)
7.                 {
8.                         NGUIEditorTools.DrawProperty("Minimum Height", serializedObject, "minimumHeight");
9.                         NGUIEditorTools.DrawProperty("Maximum Height", serializedObject, "maximumHeight");
10.                 }
11.  
12.         if (scaling == UIRoot.Scaling.FlexibleSize)
13.         {
14.             NGUIEditorTools.DrawProperty("Initial Size", serializedObject, "initialSize");
15.             NGUIEditorTools.DrawProperty("Scale Mode", serializedObject, "scalingMode");
16.         }
17.  

That's all.
It's not a big change, but I think it can help a lot of people that have the same pb. It would be nice if something like that, is added to NGUI, so feel free to use this code ;-)

BTW you will notice that FitHeight as the same effect as FixedSize. It's possible to merge them, but I don't know if it's a breaking change, so I did not.

Enjoy ^^
Decco

[ArenMook]

Thanks! Does it play well with the "Shrink Portrait UI" option?

[Decco]

Hello,

It does not use the "shrink portrait UI" option, because it works as well in landscape and in portrait.

[ArenMook]

Shrink Portrait UI option does something your UI changes don't though -- it will shrink the UI if the height becomes larger than width. So basically instead of being based on height, the UI will become based on width in terms of size determination.

[Decco]

But "Shrink Portrait UI" option (and also "Adjust by DPI" option) are only used in PixelPerfect mode.
Here, it's more like FixedSize mode, which does not use those options either.

The Fit and Fill options also check the aspect, so if the height becomes larger than width, it will shrink in the same way.

[ArenMook]

Good point. Thanks! I'll integrate your changes into the next version, and a big thank you for the detailed image explanation too.

[Decco]

That's cool ! Thank you ^^