Better UI

[Hosnkobf]

What is Better UI?
Better UI extends the Unity UI system (uGUI) to make it better. It solves common problems with uGUI like fixed sizes instead of relative sizes (e.g. font size) or allowing to have more than one transition (with additional transition types).

It also comes with two editor windows making it much easier to design your UI for different resolutions. The first editor window allows it to switch the game view resolution with a list of buttons (much faster workflow than with the built in dropdown); the other editor window can snap the anchors of the selected object(s) to its borders or a certain point to convert the positioning from pixel sized to relative sizes on the screen.

Can I use Better UI in my existing uGUI project?
Yes! Better UI has all the Controls of uGUI (Button, Text, Toggle, …). But they are not completely new controls. Instead they extend the uGUI Controls by further functionality.

So if you need a Better UI feature on one of your controls, just right-click on that controls component and select “Make it Better”. This will exchange the Control with its “Better” pendant. All the variables will stay and also all references to that object are kept.

This allows a very comfortable workflow: Build everything with uGUI as usual and make just those controls “Better” where you need the extra functionality.

What are the most exciting Features?

• Resolution Dependent Sizing

Layout Groups (Horizontal / Vertical / Grid) and some other components with size-related variables are using Sizer objects to define the size-scaling on different resolutions. You need an optimized resolution to work with as a reference. Then you can decide for each sizer value if it should scale relative to the change of the screen width, height, aspect ratio, DPI or a mixture of them and how much impact they have. This allows to have a similar visual appearance on any resolution.

The Resolution Monitor keeps track of resolution changes and informs all resolution-dependent objects in case of a change (to recalculate the sizes).

This feature can also be activated during runtime with one line of code: IngameResolutionMonitor.Create();

• Responsive Design

You can define which kinds of screens you would like to have differences in the UI for. For example, you can have differences for Landscape and Portrait mode, for different Screen Sizes or aspect ratios or special features (like touch screen) or a combination of these.

For each of them you can have different positions / anchors / pivots of your UI elements. But also many settings can be set differently, like the orientation of a layout group (switch between horizontal and vertical). Additionally you can show or hide elements for certain configurations.

Don’t worry: You will not need to specify everything for every screen configuration. A smart fallback logic will use the right configuration if the current screen was not specified for an element.

• Transitions

Selectables and all derivations of it (like Buttons) can have one Transition by default (Normal, Hover, Pressed and Disabled states). With Better UI you can add any number of additional transition to one selectable (e.g. The background Image as well as the Text color should change? Not possible without scripting in uGUI – no problem with Better UI).

Better UI provides the same Transition types as uGUI:

• Color Tint / Color32 Tint: Changes the color of the target graphic
• Sprite Swap: Exchanges the sprite of the target image
• Animation: Triggers animations on itself (in Better UI you have to specify a target animator)

Better UI also allows additional transition types:

• Object Activeness: Setting target Game Object active or inactive
• Alpha: Changes the transparency of target graphic (very much like Color Tint but keeps the current color)
• Material Property: Changes a property of a material which comes with Better UI or which uses the same approach and has an entry in the Material Scriptable Object. (The approach is to store the variables inside the vertex information for ease of use and better performance)

Toggles also have additional transitions for the toggle states (on / off). It uses the same system as “normal” transitions so all the transition types are also available for toggle transitions.

Do you need tabs? No problem: Just create some Toggles, make them Better and assign them to a Toggle group. Add a Toggle Transition to each of them with “Object Activeness” as Transition Type and assign the contents of the tab-pages. Done.

• Better Image

Slicing
There are additional options for sliced and tiled images.

A sliced image have the option “Keep Border Aspect”. This will scale the borders when uGUI would normally shrink or stretch them if it doesn’t fit inside its bounds properly anymore (which can easily happen with different resolutions).

It is also possible to scale the border making it smaller or bigger than in the source image. The scaling can be connected to the resolution (as explained above).

The scale can also be used in tiled mode. Because of the connection to the resolution you can define the number of tiles by scaling (e.g. to have a background with 10 Stripes) and on other resolutions the tiling will be the same (so that there are always 10 Stripes on any resolution).

Colors and Materials

An Image can have a color but also can have a horizontal or vertical gradient for no extra performance cost.

Images also have predefined Materials (Standard, Grayscale, Hue-Saturation-Brightness, Color Overlay). The Material properties can changed inside the image inspector to e.g. shift the colors. All images can share the same material while having different property values, which is good for performance if you use it on multiple images.
All predefined Materials come with several blending effects (Normal, Additive, Color Dodge, Multiply) which allows to mix the colors of the image with the background.

Own materials still can be assigned. There is also an option to clone the assigned material for the selected image to change some properties only for that image.

• Better Text

The Font Size is scaled with a sizer as described above.

But there are also three available Fitting Modes:

• Sizer Only: Just uses the sizer to affect the font size. Doesn’t care about text overflow.
• Stay In Bounds: Uses the sizer as long as the text fits inside the bounds. Shrinks the font size if it doesn’t fit anymore.
• Best Fit: Like in uGUI – adjusts the font size to fill up as much as possible of the bounds.

The Stay In Bounds option will be chosen as default when making a text better.
This makes sense: normally designers want to have the same size on all Buttons. But if the Text is too large it is okay to shrink it. Designers normally don’t like best fit option because the font size would be different on almost every button.

These options also work with Better TextMeshPro UI! (Note: “Better TextMesh Pro” is not included, but can be downloaded for free here)

• Helpful Tools

There are three tools coming with Better UI:

• Snap Anchors: Can set the anchors of one or more UI elements to their borders or to a certain point with just a click. This converts the positions to relative coordinates, so that they are at the same relative location when changing resolution
• Align / Distribute: Allows you to easily position a list of elements nicely. You can align them, so that they touch to the same horizontal or vertical line. You also can distribute them so that the distance between them is the same.
• Pick Resolution: Instead of using the resolution drop down of the game view this tool can show you all resolutions on small buttons. That gives a better overview and makes it faster to switch between resolutions. You also can apply filters for resolutions and change the layout of the window and its content.
  Additionally, you can simulate your specified screen configurations with it to easily test your responsive designs.

Does it work properly?
We (Thera Bytes GmbH) use it in our projects and it is a great time saver. We are not aware of any major issues, so I guess it is (almost?) bug-free. However, if you find a bug, please report it in this thread. Full source code is provided, so, any fixes posted here can be easily applied by yourself if you don’t want to wait for the next version.

If you want to know more about how to work with better UI you may watch my explanation videos:

Better UI - resolution overview

Better UI - visuals overview

Better UI - Example Scene

Better UI - Snap Anchors

Better UI - Better Text

Links
Better UI @ Asset Store: Better UI | GUI Tools | Unity Asset Store

Online Documentation: General

Thera Bytes Website (German): http://therabytes.de/

[Hosnkobf]

I am proud to announce that Better UI has been approved today.
Feedback about the asset and the presentation of it is appreciated

[drewdough]

thanks @Hosnkobf ! I just downloaded your tool. I’m wondering if you have any videos on how to use the Better Layout group to make resolution independent GUI which scales and such with res changes?

[drewdough]

@Hosnkobf , another issue I’m running into is the following warning message when trying to ‘Make Better’ a text element:

I have read your PDF documentation and watched you videos but don’t see this in either one. Your video when you ‘Make Better’ a text, it just works. Why am I getting this warning? Why does the Game window size matter when converting a text to Better Text? Thank you for any help!

[Hosnkobf]

Hi @drewdough ,
Thank you for using Better UI and for your questions. They help me improving the documentation

I would like to answer the question about the resolution first, because then it is easier to understand how the Better Layout Groups work.

What is the optimized resolution for?
The idea behind the resolution independent system of Better UI is to have a reference resolution. This reference resolution is used to calculate the difference to the actual resolution.
At the beginning of a project you always should decide which resolution you optimize your game / UI for. Not only for Better UI but also for the UI Artist (he needs to know which size the assets he makes should have). In most cases the optimized resolution is either Full HD or 4k.
To configure the optimized resolution go to TheraBytes/Resources/ResolutionMonitor and set it in the inspector.
You should make sure to have an entry in the resolution list of your game view with your optimized resolution.

But why is it important to work at your optimized resolution when making something better?
Because it can happen that the default configuration for the resolution dependent sizing is not what you need. This would lead to unexpected sizes in the optimized- and other resolutions. However, if the default configuration is okay you can make it better. The optimized size will be transposed to the optimized resolution automatically.

So what is the default configuration for sizers?
Well, for the font size of a text it is “Pixel Height”. This means the percentage of the current resolution’s height compared to the optimized resolution’s height is used to calculate the new font size.
For other Resolution Sizers it might be “Pixel Width” (e.g. a Vector2 Resolution Sizer uses “Pixel Width” for the X-Axis by default).
The other options (Aspect ratio / Inverse Aspect Ratio / DPI) are never the default because you need them extremely rarely.

How to use the Better Layout group?
The Better Horizontal-, Vertical- and Grid Layout Groups can be Used the exactly same way as their uGUI pendants.
However, the padding, spacing and size is no pixel size anymore but will be calculated from the current resolution. You can foldout the “Size Modifiers” sections to see how they are calculated. If you need constant pixel size anywhere you can just remove the size modifiers. Then you have a behavior like in uGUI again.

Common Problems
If you want to have something resized uniformly but the width or height sometimes become too large or too small you probably have a Vector2, Vector3 or Margin (Padding) Size modifier which scales for the vertical axis with “Pixel Width” and the horizontal axis with “Pixel Height”. Solution: change both to the same sizing method.

I hope this answers your questions.
If you have any further questions don’t hesitate to ask

[Hosnkobf]

I am proud to announce Better UI version 1.1.
It has been released today.

Changelog:

• Text Mesh Pro support! (Text, InputField and Dropdown)

• Gradients for Images (Horizonal and vertical. interpolates between 2 colors)

• Material System for Images with two performance optimized Materials:

• Grayscale

• Hue Saturation Brightness (Shared Material between all images but values can be set individually)

• Custom Materials for Images can be cloned inside the inspector (no need to make a copy in the project window)

• Minimum Unity version is 5.4 now (it was Unity 5.5 before). However, it compiles also for Unity 5.3 and probably most features also work there.

• Default Scaler Size modifiers changed to scale uniform

• Toggle Transition logic improved to work better with normal transitions on the same object

• Fixes in anchor positioning logic of Snap Anchors window

• Snap Anchors window has buttons with pictures now

• Warnings eliminated

• General refactoring of the code base

Get it now: Unity Asset Store - The Best Assets for Game Making
Or read the documentation first: http://therabytes.de/tools/ (scroll down)

Hope you like the new features

I really like the materials:

[steven_wong]

How can I get the Text Mesh Pro work with Better UI ? There don’t have make better option when I selected a Text Mesh Pro Text component. Thanks

[Hosnkobf]

Hi steven_wong, I’m glad that you asked this question. I forgot to include it in the documentation (I will update it today).

Better TextMeshPro components are not compiling by default to avoid compile errors for people who do not use TextMeshPro.
To make it compile you have to add a scripting define symbol.

1. Navigate to [Edit → Project Settings → Player]
2. Unfold the “Other Settings” section
3. Insert “TMP_PRESENT” (without quotes) in the field with the title “Scripting Define Symbols”
   
4. Repeat 2. and 3. for each Platform you want to deploy for.
   Then you can convert the TextMeshPro components to its “better” pendant.

Edit: I just updated the documentation.

[Hosnkobf]

Better UI is on Sale (30% Off) until end of the week!

[steven_wong]

Not working with the version 1.1 download for the asset store. Seem no script in 1.1 are released to Text Mesh Pro. Please Help. Thanks

@Hosnkobf

Hi steven_wong, I’m glad that you asked this question. I forgot to include it in the documentation (I will update it today).

Better TextMeshPro components are not compiling by default to avoid compile errors for people who do not use TextMeshPro.
To make it compile you have to add a scripting define symbol.

1. Navigate to [Edit → Project Settings → Player]
2. Unfold the “Other Settings” section
3. Insert “TMP_PRESENT” (without quotes) in the field with the title “Scripting Define Symbols”
   
4. Repeat 2. and 3. for each Platform you want to deploy for.
   Then you can convert the TextMeshPro components to its “better” pendant.

Edit: I just updated the documentation.

[Hosnkobf]

Hi steven_wong,

thank you for telling me that there is something wrong with the Better UI package. I checked it and realized that the version 1.1 in fact still contains the package of version 1.0. For some reason there where two packages connected to version 1.1 but the old package was always provided for the download.
I apologize for not realizing this earlier. I submitted a new version with only the latest package attached. I hope this will work…
It has to be reviewed by the unity team first which can take a while.

So, I send you the latest package as PM. Check your mailbox

[Hosnkobf]

I created a new draft of Better UI in the Asset Store and double checked everything. It has been approved and I tested an import. It is still version 1.0 although I uploaded the latest version.
I send Unity a bug report. I believe they have a bug where they sort packages by unity versions instead of asset versions or something like that…

If you need the new version right now, please send me a PM with a screenshot or invoice number indicating that you bought it.

Thanks for your patience.

[Hosnkobf]

There is a new Version (1.1.2) of Better UI in the Asset Store now.
It should be possible to retrieve the correct version for each Unity version now (5.4+). You can check it by updating and importing it, see if there is a Readme file and check if there is the correct version noted in that Readme file.

Changelog

• Animation of shader properties stored in vertex information more intuitive (Hue, Saturation, Brightness – compatible with animations of version 1.1)
• Added some predefined Blending Effects to all Better UI shaders: Normal, Additive, Color Dodge, Multiply
• Added a “Standard” Material which is like the Default material but can have assigned an Effect (see above)
• Added a Transition for shader properties stored in vertex information (Hue, Saturation, Brightness)

[ChezDoodles]

@Hosnkobf

Real Responsive Design
Changing positions, sizes and layout groups depending if the user is in portrait or landscape mode. Maybe even distinguish between mobile and tablet size and allowing to show / hide certain elements depending on the current screen.

Love your product - it is a great timesaver!

Would also love to see the above “Real Responsive Design” come along!

However - one immediate quick fix for me would be to change the current dpi scaler, I would like to set different scaling for mobile (small screen), tablet (medium screen) and pc (large screen). I would often like my UI to be somewhat larger (actual physical size) on a tablet compared to a mobile screen. This could be some kind of a global value that scale the physical size of objects up and down - just like I can do system-wide scaling of OS UI on my mobile phone and on my pc and macs.

[Hosnkobf]

Hi ChezDoodles,
I am glad that you like Better UI
I am working on the Real Responsive Design Feature. But I don’t think this will be completed soon… There are many things which must be taken into account and I try not to break any running projects with the changes I do…

However, there will be a good way to achieve what you want to do with Better UI 2.0. But for now I can only give you a not tested component, which adjusts the scale differently depending on the physical screen size.
Please keep in mind that scaling of UI elements may lead to unexpected behaviour. Do not scale UI elements with a complex child structure (and if you do: test it well on many screen sizes).

using UnityEngine;
using TheraBytes.BetterUi;

public class ScreenScaler : ResolutionSizer<Vector3>
{
    const float MEDIUM_SCREEN_HEIGHT_THRESHOLD = 4.7f; // inch -- = ipad mini (landscape)
    const float LARGE_SCREEN_HEIGHT_THRESHOLD = 7.6f;   // inch -- = average laptop screen

    [SerializeField]
    Vector3SizeModifier scaleSizerSmall = new Vector3SizeModifier(Vector3.one, Vector3.zero, 4 * Vector3.one);

    [SerializeField]
    Vector3SizeModifier scaleSizerMedium = new Vector3SizeModifier(Vector3.one, Vector3.zero, 4 * Vector3.one);

    [SerializeField]
    Vector3SizeModifier scaleSizerLarge = new Vector3SizeModifier(Vector3.one, Vector3.zero, 4 * Vector3.one);

    protected override ScreenDependentSize<Vector3> sizer
    {
        get
        {
            // choose the correct scaler depending on the current screen size

            float screenHeight = ResolutionMonitor.CurrentResolution.y / ResolutionMonitor.CurrentDpi;

            if(screenHeight >= LARGE_SCREEN_HEIGHT_THRESHOLD)
            {
                return scaleSizerLarge;
            }
            else if(screenHeight >= MEDIUM_SCREEN_HEIGHT_THRESHOLD)
            {
                return scaleSizerMedium;
            }
            else
            {
                return scaleSizerSmall;
            }
        }
    }

    protected override void ApplySize(Vector3 newSize)
    {
        this.transform.localScale = newSize;
    }
}

[Hosnkobf]

Better UI is on Sale for 7 days now. 25% off!

Stay tuned:
Within the next few days version 1.2 will be released introducing an align & distribute window.

[Hosnkobf]

Better UI just updated to version 1.2!
Changelog

• Better Raw Image added with Gradient and Material options like in Better Image
• Align and Distribute Window added
• Snap Anchors Window: Bugfix regarding point and pivot mode with parent checkbox enabled
• minor refactoring

The most interesting new feature is probably the Align & Distribute window.
With it you are able to layout your UI controls in a more efficient way. No need for layout groups or locating by hand anymore! Just select your controls, apply the settings you want to have and click a button!

This is probably the last version of the 1.x cycle of Better UI.
The version 2.0 is already in progress. It will allow you to have different layouts on certain device sizes, orientations and other differences a device can have.

PS: It is still on sale!

[Teila]

I see mostly screenshots of this on a mobile game. I assume it works well with any resolution, including Desktop or Web. Am I correct? The annoyance of moving those anchors is making this look fabulous. lol

[Hosnkobf]

Hi Teila,
Yes, it works with any resolution. However, if you plan to make a Landscape application you should open TheraBytes → Resources → Resolution Monitor and change the “Optimized Resolution” to a Landscape resolution (e.g. 1920 x 1080). The default is Portrait here. (If you cannot find it, select “Windows → Thera Bytes → Force ScriptableSingleton Initialization” in the menu).
This makes it more predictable how sizes will be adjusted by Better UI (however, if you only want to adjust anchors you don’t need that at all).

By the way: Better UI 2.0 will allow you to support Landscape and Portrait Layouts in the same scene.

[Hosnkobf]

Better UI is 30% off until December 8th!

An information for all TextMeshPro users:
The BetterUI-versions of the TextMeshPro components get sometimes corrupted inside unity (cannot be loaded) because of a bug inside Unity.
If you use TextMeshPro and BetterUI you can fix it yourself:

• Navigate to “Assets\TheraBytes\BetterUI\Scripts\BetterUiElements\TextMeshPro” in your project folder.
• Open one of the cs files.
• Remove the first and the last line in that file (which is “#if TMP_PRESENT” and “#endif”).
• Save the file and close it.
• Repeat 3 and 4 for the other files in the folder

In the next version of Better UI I will find another solution for TextMeshPro support.