Better UI contains a lot of functionality. Probably you have it because of one or two features. So, follow these Questions to find the documentation relevant for you.


Installation



After installation, follow the steps of the Setup Wizard to configure Better UI correctly for your project.


Smart Resizing

  • Do you want to make your UI adaptive for any resolution?
    If your answer is "yes":
    • You need to set the anchors of your UI Elements. Use the Snap Anchors tool for that.
    • You probably want to change several variables from pixel sizes to relative sizes... To do that:
      • Decide for a Optimized Reslolution (also talk about that with your artist) and enter that value to the Fallback of the Resolution Monitor (should be done via the Setup Wizard)
      • Convert the UI Elements where you want the smart resizing to the Better pendant (See "Make Better" Workflow)
      • Probably that is already enough! But if it doesn't resize as expected, change the settings in the Size Modifiers of the better element (maybe the Max Size hinders your element to become big enough).
    • To check your scene with different resolutions quickly, you may want to use the Pick Resolutions tool.



  • Do you want "Responsive Design" (so that your UI changes according to certain screen properties, like orientation or size)?
    If your answer is "yes":
    • You need to define which screen configurations you want to support. If you need more than what you can define with the Setup Wizard, read about the Resolution Monitor and its screen configurations carefully and configure it for your project.
    • You might want to do the Tutorial "How to create Responsive UI"
    • In several Better Elements you can have different settings for each screen configuration. These settings are called Size Config Collections.
    • You probably want to have certain elements at different locations for your screen configurations. Use the Better Locator to achieve this.
    • Sometimes you want to show or hide certain objects for certain screen configurations. Use the Game Object Activator to do that.
    • Note that Better Layout Elements usually have size config collections for their settings. You can change the direction of a Better Axis Aligned Layout Group per screen configuration for example. 



  • Can the Resolution and / or Orientation of your app change during runtime?
    If your answer is "yes":


Better Visualization


  • Do you want to Change the appearance of an Better Image or Better Raw Image?
    If your answer is "yes":
    • You can make horizontal or vertical Gradients by chaning the Color Mode.
    • You can select a Pre-Defined Material from the drop down or select "Custom" to assign your own material.
      • You can also change the blend mode (Material Effect) of the Pre-Defined Materials. 
        Note: this is currently not supported for all versions of Unity.


Navigation

  • Do you want to get rid of the "Selected" state when navigating with mouse or touch (but still keep it when navigating with game pad)?
    If your answer is "yes":
    • Add a Better Navigation to your Event System and check "Omit Selection State for Pointer Input"
  • Do you have a complex UI and want to implement proper gamepad navigation support?
    If your answer is "yes":