Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Better UI

Discussion in 'Assets and Asset Store' started by Hosnkobf, Jan 30, 2017.

  1. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094


    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:











    Links
    Better UI @ Asset Store: http://u3d.as/G0E

    Online Documentation: http://documentation.therabytes.de/better-ui/

    Thera Bytes Website (German): http://therabytes.de/
     
    Last edited: Sep 5, 2019
  2. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    I am proud to announce that Better UI has been approved today.
    Feedback about the asset and the presentation of it is appreciated :)
     
  3. drewdough

    drewdough

    Joined:
    Oct 5, 2016
    Posts:
    48
    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?
     
    Last edited: Feb 20, 2017
  4. drewdough

    drewdough

    Joined:
    Oct 5, 2016
    Posts:
    48
    @Hosnkobf , another issue I'm running into is the following warning message when trying to 'Make Better' a text element:

    upload_2017-2-19_19-55-25.png

    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!
     
  5. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    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 :)
     
    Last edited: Feb 20, 2017
  6. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    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: https://www.assetstore.unity3d.com/en/#!/content/79031
    Or read the documentation first: http://therabytes.de/tools/ (scroll down)

    Hope you like the new features :)

    I really like the materials:
     
  7. steven_wong

    steven_wong

    Joined:
    Oct 19, 2016
    Posts:
    5
    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
     
  8. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    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.
     
    Last edited: Apr 18, 2017
  9. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
  10. steven_wong

    steven_wong

    Joined:
    Oct 19, 2016
    Posts:
    5
    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

     
  11. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    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 ;)
     
  12. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    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.
     
    Last edited: Jun 7, 2017
  13. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    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.

    • 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)
     
    Victor_Kallai likes this.
  14. ChezDoodles

    ChezDoodles

    Joined:
    Sep 13, 2007
    Posts:
    107
    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.
     
  15. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    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).

    Code (CSharp):
    1. using UnityEngine;
    2. using TheraBytes.BetterUi;
    3.  
    4. public class ScreenScaler : ResolutionSizer<Vector3>
    5. {
    6.     const float MEDIUM_SCREEN_HEIGHT_THRESHOLD = 4.7f; // inch -- = ipad mini (landscape)
    7.     const float LARGE_SCREEN_HEIGHT_THRESHOLD = 7.6f;   // inch -- = average laptop screen
    8.  
    9.     [SerializeField]
    10.     Vector3SizeModifier scaleSizerSmall = new Vector3SizeModifier(Vector3.one, Vector3.zero, 4 * Vector3.one);
    11.  
    12.     [SerializeField]
    13.     Vector3SizeModifier scaleSizerMedium = new Vector3SizeModifier(Vector3.one, Vector3.zero, 4 * Vector3.one);
    14.  
    15.     [SerializeField]
    16.     Vector3SizeModifier scaleSizerLarge = new Vector3SizeModifier(Vector3.one, Vector3.zero, 4 * Vector3.one);
    17.  
    18.     protected override ScreenDependentSize<Vector3> sizer
    19.     {
    20.         get
    21.         {
    22.             // choose the correct scaler depending on the current screen size
    23.  
    24.             float screenHeight = ResolutionMonitor.CurrentResolution.y / ResolutionMonitor.CurrentDpi;
    25.  
    26.             if(screenHeight >= LARGE_SCREEN_HEIGHT_THRESHOLD)
    27.             {
    28.                 return scaleSizerLarge;
    29.             }
    30.             else if(screenHeight >= MEDIUM_SCREEN_HEIGHT_THRESHOLD)
    31.             {
    32.                 return scaleSizerMedium;
    33.             }
    34.             else
    35.             {
    36.                 return scaleSizerSmall;
    37.             }
    38.         }
    39.     }
    40.  
    41.     protected override void ApplySize(Vector3 newSize)
    42.     {
    43.         this.transform.localScale = newSize;
    44.     }
    45. }
    46.  
     
  16. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    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.
     
  17. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    Better UI just updated to version 1.2!
    • 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! AlignWindow.png DistributeWindow.png

    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!
     
    zyzyx likes this.
  18. Teila

    Teila

    Joined:
    Jan 13, 2013
    Posts:
    6,929
    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
     
  19. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    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.
     
    Victor_Kallai and Teila like this.
  20. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    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:
    1. Navigate to "Assets\TheraBytes\BetterUI\Scripts\BetterUiElements\TextMeshPro" in your project folder.
    2. Open one of the cs files.
    3. Remove the first and the last line in that file (which is "#if TMP_PRESENT" and "#endif").
    4. Save the file and close it.
    5. 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.
     
  21. Obsurveyor

    Obsurveyor

    Joined:
    Nov 22, 2012
    Posts:
    277
    Link to the documentation on your website is broken.
     
  22. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    Last edited: Jan 22, 2018
  23. alloplastic

    alloplastic

    Joined:
    Jun 30, 2015
    Posts:
    18
    Hello. I am having a problem where the Better UI scripts don't seem to be getting compiled.

    I have successfully created a simple UI, based on TextMeshPro and BetterTextMeshProUGUI, and run it in the editor, as well as in an executable. However, after closing and reloading the project, several of the Better UI scripts no longer seem to get compiled, leaving me with this error on each script, plus bad script references on the game objects.

    "No Behavior scripts in the file, or their names do not match the file name."

    The scripts that don't compile are the ones in the Transitions and TextMeshPro folders. The rest of the scripts build normally.

    I see some warnings in the console, but nothing fatal.

    If I build an executable of the game, everything compiles correctly, I can see the UI in the compiled game, and when I return to the Editor the scripts once again appear as Components attached to the UI elements.

    If I then press Play, the UI disappears and I'm back in the same error state described above.

    I have already set TMP_PRESENT for all platforms.

    If I do a Clean in Visual Studio or switch to and from a different scene, the problem persists.

    I am using the free version of TextMeshPro, on Windows, which relies on DLLs. The DLLs do seem to be getting loaded, though.

    I hope that is enough info to go on. :) I'd be grateful for any theories you may have about this problem.

    Thanks,
    Sheldon
     
  24. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    Hi @alloplastic,

    my apologies for the broken TextMesh Pro components. Thank you for the detailed description.
    I already discovered this bug and wrote how to fix it:
    Although you entered "TMP_PRESENT" as compile time constant Unity sometimes doesn't care about that and compiles as if it wouldn't be there.
    When you performed the steps above you can (if you want) remove "TMP_PRESENT" from all platforms.

    Please let me know if that also fixes the problem you have with transitions.
     
  25. alloplastic

    alloplastic

    Joined:
    Jun 30, 2015
    Posts:
    18
    Thank you for the quick reply... The above fix did solve my problem. The scripts now compile, and I can set all of the properties for Better TextMeshPro game objects,

    Unfortunately, the transition scripts still show the "No Behavior scripts in the file..." message, so I can't add transitions in the editor. I won't need transitions right away, so this is less of an issue at the moment.

    I didn't see an obvious reason why the transition scripts wouldn't compile. No compile errors during a build, no #ifdef, names are correct; etc. The error message is misleading.

    Thanks again for the help.
     
  26. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    Hmmm... It is the first time I have heard of this problem.
    Could you paste the complete error message here and tell me which version of Unity you use?
    Thanks for reporting :)
     
  27. alloplastic

    alloplastic

    Joined:
    Jun 30, 2015
    Posts:
    18

    Attached Files:

  28. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    I am not sure if this is really a bug. The transitions are no MonoBehaviours, so the script just informs about that. Transitions are used in selectable objects like a BetterButton. Can you check if you have "Better Transitions" at the Bottom of a Better Button and if you can add transitions there (increase the count, then you can specify the transitions).
    If this works, there is most probably no bug.
     
  29. alloplastic

    alloplastic

    Joined:
    Jun 30, 2015
    Posts:
    18
    I think you are right. I am able to add Transition items to a game object and assign scripts in those slots. I haven't experimented with the transitions yet, but I'm guessing that everything is fine.

    Thanks again for the help!
     
    Hosnkobf likes this.
  30. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    I realized that there is a bug in unity 2017+. That bug causes creation of new game view windows every time you hit "Play".
    If you run into this bug you can do a quickfix yourself:

    1. open ResolutionMonitor at Assets\TheraBytes\BetterUI\Scripts\Utils
    2. find the method "EnsureGameViewReference()"
    3. replace the whole method with this one:
    Code (CSharp):
    1.         static void EnsureGameViewReference()
    2.         {
    3.             if(gameViewType == null)
    4.             {
    5.                 gameViewType = Type.GetType("UnityEditor.GameView,UnityEditor");
    6.             }
    7.  
    8.             if(gameViewWindow == null)
    9.             {              
    10.                 gameViewWindow = UnityEditor.EditorWindow.GetWindowWithRect(gameViewType, new Rect(0,0, 500, 500));
    11.             }
    12.         }
    EditorWindow.GetWindow() creates a new Window even if there already is one. EditorWindow.GetWindowWithRect() works as it supposed to work and only creates a new window if there is no window open of the specified type.

    The next version of Better UI will delay some time. It actually is pretty far, but I have to do some tests and update the documentation. Unfortunately I don't have time for it right now because a short deadline of another project I am working on right now. The good thing: In that other project I of course also use Better UI and already did some improvements alongside.
    I hope that I can provide a beta before summer starts.
     
  31. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
  32. AlanMattano

    AlanMattano

    Joined:
    Aug 22, 2013
    Posts:
    1,500
    I was not able to use this asset in my project. There is a bug
    I isolate the bug for you as much as possible.
    Enclose you will find the prefab or LINK
    • Make a new empty scene
    • Delete the camera and the light.
    • Import this prefab
    • Import your Better UI "total c..." ;) I'm joking
    • Select "SNAP ANCHOR TO ALL BORDERS (1)" or (2)
    • Open "Snap Anchor" window
    • Press "Snap to all borders" button
    • The transfer goes to infinity?
    The fact that my camera is rotated and also the canvas is 90° triggers the bug.
    Hope it helps you to debug and resolve the error.
     
    Last edited: May 5, 2018
  33. AlanMattano

    AlanMattano

    Joined:
    Aug 22, 2013
    Posts:
    1,500
    upload_2018-5-4_22-45-31.png
    @Hosnkobf Including this new button can improve workflow
     
    Last edited: May 7, 2018
  34. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    Hi @AlanMattano,
    Thank you for the bug report and the detailed description.
    I'm really sorry that you have problems with Better UI.

    I checked out your prefab and found the problem: Your canvas is rotated by 90° around the y-axis (because your camera is also rotated around this axis). The snap anchors window converts the coordinates of the RectTransform into ui-screen-coordinates. Since your canvas is bound to a camera, this conversion will return unexpected coordinates with a width of 0 between them.

    It is not so easy to change my code to allow rotated canvases. I would have to search upwards to find the topmost canvas in the hierarchy and check the rotation. Then I would need to transform my coordinates by this rotation. Not sure if and when I will be able to implement this.
    So, for now I would recommend you to set the rotation of your camera to 0 rotation on all axis'.

    Sorry for the inconvenience.
     
    AlanMattano likes this.
  35. recon0303

    recon0303

    Joined:
    Apr 20, 2014
    Posts:
    1,634
    This tool looks interesting, but my concern is , no updates in awhile. Is this still being worked on? Thanks If so what are the future plans. Thanks.
     
  36. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    Hi @recon0303,
    thanks for your interest. There are indeed future plans and the next version is already pretty far. Mainly, I have to do testing and documentation. Because it will be a very big update, I would do a beta phase for interested owners of Better UI before release.

    The main feature of the next release will be "Responsive Design". This means you will be able to change positions and sizes (and some additional stuff) of your ui elements depending on the screen and orientation of the user's device (e.g. portrait or landscape, big screen or small screen, touch screen, ...).

    I originally planned to release the beta in Q1 2018. (Un)fortunately I am involved in a project for a client with a very strict schedule, so I had not enough time lastly to push Better UI forward (however: since I use Better UI in that project as well I found and fixed some Issues and added some advanced features I needed).

    So, right now it looks like that the workload for that project will reduce at end of June. I don't want to promise anything but I think I will manage to release the next version in July (at least the beta).
     
    Lars-Steenhoff likes this.
  37. AlanMattano

    AlanMattano

    Joined:
    Aug 22, 2013
    Posts:
    1,500
    Can you just make a smaller asset?
    Just take out everything except the "SNAP ANCHOR TO ALL BORDERS " just one button. I think that asset is super useful, is simple for you to do (in few hr), will be a good introduction to your asset, it is compact so I can include it into all my project as default because it does not take time compiling and you will make more sales!

    SNAP ANCHOR TO ALL BORDERS tool

    HOW TO DO IT?
     
  38. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    Thank you for your idea. I will think about it.
    But it is still not that fast to do because all the asset store meta data and images have to be created and I have to check how upgrades are working.
    Also I have to discuss this with the other people in the company which sells this asset. So, I cannot guarantee that we will do that.
     
  39. recon0303

    recon0303

    Joined:
    Apr 20, 2014
    Posts:
    1,634

    i didn't ask that.
     
    Hosnkobf likes this.
  40. recon0303

    recon0303

    Joined:
    Apr 20, 2014
    Posts:
    1,634

    Thanks for the information I was looking for.
     
    Hosnkobf likes this.
  41. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    I just discovered a problem with Unity 2017.3 or higher and a third party script I am using inside Better UI. Maybe you already experienced some weird error outputs when the project rebuilds.

    For now you can fix it yourself if you run into the problem:
    1. Find and open the file TheraBytes/BetterUI/Scripts/Utils/SingletonScriptableObject.cs
    2. Find the class
      ScriptableObjectSingletonInitializer
      inside that file (scroll to the bottom)
    3. In the
      Initialize()
      method replace the following line:
      Code (CSharp):
      1. var assemblies = AppDomain.CurrentDomain.GetAssemblies().Where(a => !a.Location.Contains("Plugins")).ToList();
      with
      Code (CSharp):
      1.             System.Collections.Generic.List<Assembly> assemblies;
      2. #if UNITY_2017_3_OR_NEWER
      3. #if NET_3_5
      4.             throw new NotSupportedException("Please set the Scripting Runtime Version in the player settings to higher than 3.5");
      5. #else
      6.             assemblies = AppDomain.CurrentDomain.GetAssemblies().Where(a => !a.IsDynamic && !a.Location.Contains("Plugins")).ToList();
      7. #endif
      8. #else
      9.             assemblies = AppDomain.CurrentDomain.GetAssemblies().Where(a => !a.Location.Contains("Plugins")).ToList();
      10. #endif
      11.  
    Please note that it doesn't seem to be possible to fix this issue with .Net 3.5 Equivalent. So you need to change the Scripting Runtime Version in the Player Settings to .Net 4.x Equivalent.
     
  42. ChezDoodles

    ChezDoodles

    Joined:
    Sep 13, 2007
    Posts:
    107
    Mid july .... waiting :)
     
  43. Rich0

    Rich0

    Joined:
    Aug 9, 2013
    Posts:
    50
    Hi, I've just purchased Better UI. Thanks for creating this - it's great.

    I'm having a small issue - in the demo - the DPI scaling "1 Inch" square works perfectly for every iOS device I've tested (from 6S to 12" iPad) except the iPhone X. On the iPhone X the square is slightly smaller.

    Any ideas how I can fix this? This is important to my application.
     
  44. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    I should never tell a date anymore :D
    As usual deadlines move and stuff, so also the timelines for Better UI moved... I will do my best to make the beta version as soon as I can... I try to do this still in july (but I do not name any date) ;)

    Hi @Rich0,
    I'm sorry to hear that iPhone X has this dpi problem. I am using
    Screen.dpi
    for calculation here. And
    Screen.dpi
    is using the dpi value which was entered by the manufacturer in the system information of the device. Obviously Apple entered a wrong value here (or it is some issue of unity with retina displays).
    So, there is not really a way to fix this easily. I will think about it... maybe I will find a good solution where you can overwrite the dpi values for certain devices.
     
  45. Rich0

    Rich0

    Joined:
    Aug 9, 2013
    Posts:
    50
    Hi,

    Thanks for the reply! Yes, it appears you are correct.

    I took DPI vales from http://dpi.lv for three iPhone models and tested.

    You're right - screen.dpi is not reporting the correct value for the iPhone X. It would be great if you could make a workaround... Perhaps you could suggest a quick modification to expose the DPI value from ResolutionMonitor.CS as a public variable - we could then use this code (https://answers.unity.com/questions/1432…) to detect iPhone X and substitute DPI value until you've got something more elegant in place. What do you think?

    Here are the test detail for the small sample I tried:

    iPhone X : 458 Dpi (Should be 463)

    These DPI values appear to be correct (from http://dpi.lv)

    iPhone 7 Plus : 401 Dpi
    iPhone 6s : 326 Dpi
     
  46. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    The specs I found claim that iPhone X indeed has a PPI of 458. Maybe they are wrong...
    Anyways, I quickly coded something for you, which hopefully works for you.
    Put this class somewhere in the project (e.g.
    Assets/TheraBytes/BetterUI/Scripts/Utils
    ):
    Code (CSharp):
    1. using System;
    2. using System.Collections.Generic;
    3. using System.Linq;
    4. using UnityEngine;
    5.  
    6. namespace TheraBytes.BetterUi
    7. {
    8.     [Serializable]
    9.     public class DpiManager
    10.     {
    11.         [Serializable]
    12.         public class DpiOverride
    13.         {
    14.             [SerializeField] float dpi = 96;
    15.             [SerializeField] string deviceModel;
    16.  
    17.             public float Dpi { get { return dpi; } }
    18.             public string DeviceModel { get { return deviceModel; } }
    19.  
    20.             public DpiOverride(string deviceModel, float dpi)
    21.             {
    22.                 this.deviceModel = deviceModel;
    23.                 this.dpi = dpi;
    24.             }
    25.         }
    26.  
    27.         [SerializeField]
    28.         List<DpiOverride> overrides = new List<DpiOverride>()
    29.         {
    30.             new DpiOverride("iPhone10,3", 463),
    31.             new DpiOverride("iPhone10,6", 463),
    32.         };
    33.  
    34.         public float GetDpi()
    35.         {
    36.             DpiOverride ov = overrides.FirstOrDefault(o => o.DeviceModel == SystemInfo.deviceModel);
    37.  
    38.             if (ov != null)
    39.                 return ov.Dpi;
    40.  
    41.             return Screen.dpi;  
    42.         }
    43.     }
    44. }
    45.  
    inside
    ResolutionManager.cs
    add a member variable:
    [SerializeField] DpiManager dpiManager = new DpiManager();


    then in the getter of
    CurrentDpi
    replace
    lastDpi = Screen.dpi;
    with
    lastDpi = Instance.dpiManager.GetDpi();
    .

    Also replace the last line of
    GetCurrentDpi()
    with
    return Instance.dpiManager.GetDpi();
    .

    This should work, but I didn't test it ;)
     
  47. Rich0

    Rich0

    Joined:
    Aug 9, 2013
    Posts:
    50
    Hey - thanks very m
    Hey - thanks very much for this! I will test it today!
     
  48. Rich0

    Rich0

    Joined:
    Aug 9, 2013
    Posts:
    50
    I love Better Transitions!

    However I found that they didn't work well with TextMeshPro, because it requires a Color32 value to set color. I made a quick modification to add a new Tint transition (Color Tint 32). There are some caveats. You need to set the face color of TM Pro to white, and if you've made the instance of TM Pro "better" - sometimes there is some weirdness in the editor where it reports that the "TM Pro" script is missing at runtime (if it does this simply delete TM Pro, re-add and try again).

    As some lazy coder said - "It works on my machine" - so no guarantees it will work for you.

    Here's what I did. Hopefully I've recorded it accurately :)

    1) Created a copy of ColorTransitions.cs -> Renamed to Color32Transitions.cs

    2) In Color32Transitions.cs
    2.1) Line 11: Changed to
    public class Color32Transitions : TransitionStateCollection<Color32>

    2.2 Line 16: Changed to
    public ColorTransitionState(string name, Color32 stateObject)

    2.2) Line 32: Changed to
    public Color32Transitions(params string[] stateNames)

    2.3) Line 57 : Changed to
    var obj = new ColorTransitionState(stateName, new Color32(255,255,255,255));

    3) In Transitions.cs

    3.1) Added line after 20
    ColorTint32,

    3.2) Added 2 lines after Line 40:
    [SerializeField]
    Color32Transitions color32Transitions;

    3.3) Added line after line 60:
    case TransitionMode.ColorTint32: return color32Transitions;

    3.4) Added line after line 93:
    this.color32Transitions = null;

    3.5) Added 3 lines after line 106:
    case TransitionMode.ColorTint32:
    this.color32Transitions = new Color32Transitions(stateNames);
    break;

    4) In TransitionsDrawer.cs

    Added 3 lines after line 51:
    case Transitions.TransitionMode.ColorTint32:

    transitionProp = property.FindPropertyRelative("color32Transitions");
    postProps.Add("fadeDuration");
    break;

    I hope this is useful to someone!

    -R
     
    Last edited: Jul 23, 2018
  49. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,094
    wow, I am happy that you dig so much into Better UI :)
    Thanks for pointing out the missing Color32 transition. I wished unity had a better serialization system included. Then it would have been much easier to add your own kinds of transitions.
    I will add the Color32 transition to a future version :)

    Edit: regarding missing TMP scripts: It is because of the scripting define symbols which include the Better-TMP-stuff. Unity sometimes thinks the symbol is not defined although it is. Solution for now: If you use Text Mesh Pro, find the Better classes of them and remove the #if-#endif statements (see post above).
     
  50. Rich0

    Rich0

    Joined:
    Aug 9, 2013
    Posts:
    50

    Not problem! I tested your DPI workaround script - it works fine thank you.

    The issue is with the DPI of the iPhone X. It looks like it's lower than the expected value. I will have time tomorrow to test this further, it looks like I'll need to create a manual adjustment on the phone so I can increase and decrease the DPI and compare it to a known good screen / or inch measurement. It's strange to be sure. I wonder if it has something to do with the safe area on the iPhone X? Anyhow, I'll keep you posted on what the DPI value is that represents 1 inch on the screen. Thanks again!
     
    Hosnkobf likes this.