Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.

Better UI

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

  1. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    467
    @Hosnkobf Hi, I have a question about your asset. I don't understand about the responsive design part. In Unity, you can anchor your UI elements to any part of the screen, like top and bottom. So Unity already offers responsive design with anchors + the canvas scaler. What does your asset do that Unity does not when talking about responsive design? I don't mean to bash, it's a serious question. I saw the reviews and many people praising this particular feature, but I'm like "but...we already have this".

    Also, will your asset go on sale?
     
  2. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    @Marks4 Thank you for your question.
    Responsive design is usually more than just resizing elements with the screen size. On modern websites you can often see that the content of the page is changing a lot when you resize the window. This way the same website can work in a desktop browser as well as on mobile while it feels natural on both platforms. Also stuff may be placed at different positions or is hidden depending on the browser window size.

    This is what Better UI also can do. You can define which "screen types" you want to support (Landscape/Portrait; different Screen Sizes; different aspect ratios; Touchscreen and other special devices; your custom definitions [e.g. Android vs. iOS], ...).
    When designing your UI you can define different positions / sizes and certain other variables of Better-UI-Components for any of your supported screen types.
    A classical example: on Landscape orientation your Menu UI is attached to the left side while it is attached to the top in Portrait mode.
    Another example: On a big screen you display images with some padding to the left and right while the images touch the sides of a small screen.
    This image from the store page is supposed to give you an idea about this feature.


    Better UI also allows to resize different variables (like Font Size) based on parameters you can define yourself. So you don't have one Canvas Scaler which affects everything the same way. (Note: Better UI's resizing only works correctly if you are using a Canvas Scaler with "Constant Pixel Size")

    Additionally, Better UI comes with tools which makes it easier for you to position your UI correctly for any resolution. Especially the "Snap Anchors" tool is super helpful: It snaps the anchors of an object to its borders (or a certain position). This way you can get rid of any pixel-based-position / -sizing and instead use relative positions / sizes (this works with any Canvas Scaler Mode).

    There are also some other features which are not related to Responsive Design in Better UI.

    Very likely. Whenever Unity offers us to take part in a sale, we are in.
    Don't know when this will happen the next time, though.
     
    Last edited: Apr 14, 2021
  3. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    467
  4. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    467
    @Hosnkobf How can I make a side menu with your asset in portrait mode? I am trying to use the snap anchors to do this. I just want a menu background in portrait mode to work on any screen resolution.
    upload_2021-4-14_12-56-43.png
    I am reading the documentation, it says "Move and resize the object as you want (but avoid it to scale or rotate it)". I find it confusing, it says that I can resize but avoid it to scale? But resizing is scaling right?

    Should I have the menu background as a small square and then BetterUI stretches it to fit the screen?
     
  5. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    467
    @Hosnkobf Using just Unity I got the side menu to work, but they look different on different screen sizes. This is where I need to use BetterUI to make it look the same? Can't figure out how. Sorry I'm a bit lost even though I am reading the doc ;_;
    upload_2021-4-14_13-6-24.png
     

    Attached Files:

  6. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    resizing is not scaling in UI. when you grab a handle at the corner of a control and drag it, you change the size delta of it, not the scale. The advise is a general UGUI advise since it will be hard to anchor things correctly if the parent is scaled or rotated. So, as a rule of thumb: You should only change the rotation or scale values of a UI element if it doesn't have any children (or if you can live with the consequences).

    About your problem with the side menu:
    • the parent of the side menu should have the same size as the side menu or should be bigger and the side menu should be inside the bounds of the parent (same for parent of parent and so on until you reach the main canvas) - this may not be necessary but makes it much easier to setup your UI in general.
    • Adjust the size of your side menu without using the scale values (they should al bel 1) of the rect transform. Instead just resize the ui element by dragging the handles in the scene view.
    • When it has the correct size at the current resolution open the Snap Anchors tool, make sure the "Border" tab is selected and click the big button. Repeat this for all parents (you may multi-select the objects and set the anchors all together with one click).
    • Test in different resolutions.
     
  7. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    Better UI is on Sale!
    50% off!


    I wanted to release a new version for this sale but didn't manage to finish it in time. A new version will come soon.
    Until then, please apply the Better Locator fix yourself, if you want to use it.
     
  8. Travis-Bulford

    Travis-Bulford

    Joined:
    Feb 14, 2013
    Posts:
    264
    Hello,

    Just got this asset and am really keen to get it into my project. I am having compiler errors.

    I have tried with unity versions 2020.3.16f1 and with 2019.3.0f6.

    The errors are

    Assets\TheraBytes\BetterUI\Runtime\Scripts\Utils\ResolutionMonitor.cs(237,28): error CS0029: Cannot implicitly convert type 'System.Version' to 'Version'

    Assets\TheraBytes\BetterUI\Runtime\Scripts\Utils\ResolutionMonitor.cs(564,33): error CS1061: 'Version' does not contain a definition for 'Major' and no accessible extension method 'Major' accepting a first argument of type 'Version' could be found (are you missing a using directive or an assembly reference?)

    Assets\TheraBytes\BetterUI\Runtime\Scripts\Utils\ResolutionMonitor.cs(565,34): error CS1061: 'Version' does not contain a definition for 'Major' and no accessible extension method 'Major' accepting a first argument of type 'Version' could be found (are you missing a using directive or an assembly reference?)

    Assets\TheraBytes\BetterUI\Runtime\Scripts\Utils\ResolutionMonitor.cs(565,61): error CS1061: 'Version' does not contain a definition for 'Minor' and no accessible extension method 'Minor' accepting a first argument of type 'Version' could be found (are you missing a using directive or an assembly reference?)


    What is the correct way to resolve this? I don't want to meddle in the code.

    Thanks
    Travis
     
  9. Travis-Bulford

    Travis-Bulford

    Joined:
    Feb 14, 2013
    Posts:
    264
    I managed to solve this was nothing to do with your Plugin was another Plugin had a Version class and that was conflicting with the Version class from UnityEditorInternal.InternalEditorUtility or System.Version basically.
     
    Hosnkobf likes this.
  10. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    I'm glad you found the cause yourself.
    For anybody who runs into the same problem:

    open ResolutionMonitor.cs, find the line
    static Version unityVersion;
    and change it to
    static System.Version unityVersion;
    .
     
  11. OmranRA

    OmranRA

    Joined:
    Aug 10, 2021
    Posts:
    1
    can we know when exactly this new version will come out? thanks a lot
     
  12. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    Hi @OmranRA
    Sorry for the delayed release. I was in parental leave and now I have a lot to do for our games project and I am not sure when I will find the time to do the last changes for the next version of Better UI. It is almost done. All I need to do is changing some example scenes, write a small piece of code for the new setup wizard (spoiler!), write documentation and prepare the store page for the new release.
    I made a mistake to promise a release date in the past which I couldn't match because of other urgent projects. So, I will not name a date.

    But I will make you and every owner of Better UI an offer:
    Send me a PM with your Invoice Number and I will send you a preview package of the next version of Better UI.
     
  13. Chunikus

    Chunikus

    Joined:
    Sep 5, 2020
    Posts:
    12
    Bought asset yesterday. I don't think TMP integration works as intended.
     
  14. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    Hi @Chunikus
    Thanks for buying Better UI.
    Regarding your problem: You need to install only one of the packages depending on the TextMesh Pro version you have installed. For a brand new project you most likely need the package
    BetterUI_TextMeshPro_v3.0.1+
    . Please delete the Folder
    Assets/TheraBytes/BetterUI_TextMeshPro
    and install only the package you need.
    If you still see errors, we might have a new incompatible TextMesh Pro version. In this case, please tell me, which TextMesh Pro version you have installed (go to Window -> Package Manager and search for TextMesh Pro).
     
  15. Chunikus

    Chunikus

    Joined:
    Sep 5, 2020
    Posts:
    12
    Deleted the folder. Restarted unity.. just to be sure. Installed only 301+ one. It didn't help.
    TMP is 3.0.6.
     
  16. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    ok, sorry for the inconvenience. I will investigate this soon and let you know when I found a fix.
     
  17. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    I found it. Similar as discovered in This Post, TextMesh Pro changed the class for the editor panel again. It is now
    TMP_EditorPanelUI
    .

    To fix it, open
    Assets/TheraBytes/BetterUI_TextMeshPro/Editor/Scripts/BetterTextMeshProUGUIEditor.cs


    and change line 12 to:

    public class BetterTextMeshProUGUIEditor : TMPro.EditorUtilities.TMP_EditorPanelUI


    Thanks for pointing this out.
     
    Last edited: Sep 2, 2021
  18. Chunikus

    Chunikus

    Joined:
    Sep 5, 2020
    Posts:
    12
    Seems to work now.:)
     
    Hosnkobf likes this.
  19. theforgot3n1

    theforgot3n1

    Joined:
    Sep 26, 2018
    Posts:
    167
    Just bought the BetterUI asset. So many of these things should absolutely be standard in Unity, especially the anchor snapping.

    I did find a "bug" nonetheless. Anchoring does not work with rect transforms that have been rotated. I have a world canvas which I tilt by about -45 degrees and using Snap Anchors did snap accordingly but only after displacing the rect transform borders. If I clicked the button multiple times it would displace it over and over. If I tilted it to -90 degrees it would instead cause all of the child objects to become NaN and I could not undo, forcing me to redo the entire object. It wasn't that big of a deal, but snapping to rotated rect transforms would be a neat feature, and if not possible, then a warning or error when attempting to snap to a rotated rect transform should be in place.

    It is easy to reproduce this error, simply start a new project 2020 or 2019 and rotate a world canvas, then snap anchors.

    Great work in any case. Lovely plugin. The mask fix with anchor override is what drew me in initially actually.

    EDIT: Just read in the documentation that this is a known issue. In my opinion it would really be helpful if the snap anchor functionality could detect rotation and show an error.
     
    Last edited: Oct 5, 2021
  20. theforgot3n1

    theforgot3n1

    Joined:
    Sep 26, 2018
    Posts:
    167
    Feature request:

    Add the option (for example in the Align/Distribute) to move corners to parent's corners/anchors. Basically, I find it very tedious to copy component of the parent and paste it to the child. A quick few options for snapping the child to its parent would be cool. Especially useful in world canvases.

    EDIT: Perhaps also add the option to move the parent to the child's corners/anchors (only other method I know is unparenting the children, moving them, then re-attaching). Would be awesome.
     
    Last edited: Oct 5, 2021
  21. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    Yes, it is a known issue that I wanted to investigate further in the future (after my first attempts to fix this, I realized that it would be very complex to fix). But a warning for the user is a good idea which should be pretty easy to integrate. I added it to the backlog. Expect it to be implemented in version 2.5.

    I think what you are asking for is already implemented in Unity. When you open the Anchor Presets at the top left corner of a Rect Transform component, you can hold Alt and select the lower right preset. This will stretch and anchor your RectTransform to its parent.
    upload_2021-10-5_15-39-34.png
    If this is not what you want to achieve, please try to explain it with an example / screenshots.

    Edit: I see that it would accelerate speed if it were just a button in a tool. So, I added it to my backlog. Will probably be a little button in the Border-Section of Snap Anchors.

    I also needed this in the past. This is why I already implemented a tool called "Smart Parent". With it, you can snap the parent to its childs and even move / resize the parent without changing the visual position / size of its children. This will be part of version 2.4 which is already submitted (will be released after Unity reviewed it).
    Here is a preview picture for the tool:
    Screenshot_SmartParent.png
     
    Last edited: Oct 5, 2021
  22. theforgot3n1

    theforgot3n1

    Joined:
    Sep 26, 2018
    Posts:
    167
    Thanks for the quick reply! You are right on the anchor preset, I was not aware of that setting with ALT and stretch.

    Bruh this is exactly what is needed. Can't wait to get my hands on that.
     
    Hosnkobf likes this.
  23. theforgot3n1

    theforgot3n1

    Joined:
    Sep 26, 2018
    Posts:
    167
    A workaround for the simple case of a rotated canvas is removing the rotation, applying the snapping, then reapplying the rotation. I bet for nested rotations it becomes hell. I am curious if that's an approach you considered though.
     
  24. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    OMG! Sometimes you don't see the simple solutions. I just tested it and it works like a charm! Nested rotations are no problem because if accessing
    rotation
    rather than
    localRotation
    Unity will do all the hierarchical transformations for you.

    Here is how you can fix it in your project:
    Open
    SnapAnchorsWindow.cs
    and find the method
    SnapBorder()
    and
    SnapPoint()
    (the overloads with RectTransform as first parameter).
    Add code to it:
    Code (CSharp):
    1.         internal static void SnapBorder(RectTransform obj, bool left, bool right, bool top, bool bottom)
    2.         {
    3.             Undo.RecordObject(obj.transform, "Snap Anchors Border");
    4.  
    5.             // add the following 6 lines
    6.             Quaternion parentRotation = obj.parent.rotation;
    7.             Quaternion objLocalRotation = obj.localRotation;
    8.             Vector3 objLocalScale = obj.localScale;
    9.             obj.parent.rotation = Quaternion.identity;
    10.             obj.localRotation = Quaternion.identity;
    11.             obj.localScale = Vector3.one;
    12.  
    13.             RectTransform parentTransform = obj.parent as RectTransform;
    14.             // ... leave the code as before instead of this comment
    15.  
    16.             // add the following 3 lines
    17.             obj.parent.rotation = parentRotation;
    18.             obj.localRotation = objLocalRotation;
    19.             obj.localScale = objLocalScale;
    20.         }
    Code (CSharp):
    1.         void SnapPoint(RectTransform obj, Vector2 pivotOffset, bool horizontal, bool vertical)
    2.         {
    3.             Undo.RecordObject(obj.transform, "Snap Anchors Point");
    4.  
    5.             Vector2 pivot = obj.pivot + pivotOffset;
    6.  
    7.             // add the following 6 lines
    8.             Quaternion parentRotation = obj.parent.rotation;
    9.             Quaternion objLocalRotation = obj.localRotation;
    10.             Vector3 objLocalScale = obj.localScale;
    11.             obj.parent.rotation = Quaternion.identity;
    12.             obj.localRotation = Quaternion.identity;
    13.             obj.localScale = Vector3.one;
    14.  
    15.             RectTransform parentTransform = obj.parent as RectTransform;
    16.             // ... leave the code as before instead of this comment
    17.  
    18.             // add the following 3 lines
    19.             obj.parent.rotation = parentRotation;
    20.             obj.localRotation = objLocalRotation;
    21.             obj.localScale = objLocalScale;
    22.         }
    23.  
     
  25. theforgot3n1

    theforgot3n1

    Joined:
    Sep 26, 2018
    Posts:
    167
    Glad I could help. I added the code now. It works for the rotation stuff I tested so far.

    Would it be possible to also make the snapping work for scaled UI? I avoid scaled UI as much as I can, but I have an issue where I am trying to use TextMeshPros in a World canvas where the scales are so much smaller, resulting in the auto-size of the font size using too large steps when updating. So my solution atm is to scale down the gameobject, so the auto-sizing has more leeway. It works. But unfortunately the snapping doesn't work for scaled gameobjects. :(
     
  26. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    It actually works for scaled objects. But it looks strange because the scale is applied after calculating anchor-positions / sizes. So, the anchors appear to be far away from the borders, but this is only because the scaling is not part of the anchoring.

    These are unity internal calculations. I don't have any influence on that.
    But instead of scaling, you could try to change the
    Dynamic Pixels Per Unit
    or
    ReferencePixels Per Unit
    in the Canvas Scaler of your Woldspace Canvas.
     
  27. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    I am proud to announce that
    Better UI 2.4
    has been released!

    Features:
    • A setup wizard helps configuring Better UI correctly. It automatically opens after importing the package.
    • Smart Parent Tool: Allows to move a UI element without moving its childs along with it. Also option to fit the parent to the bounds of its childs.
    • AnchorOverride Component has options for animations (move to override-settings over time)
    • Plugin for WebGL to be able to retrieve the correct DPI in the browser (workaround for a bug in unity)

    Example Scenes:
    • AnchorOverride Animation Example scene
      animated_ordering.gif

    • Resolution Tracking Example scene (to prove WebGL DPI fix)
      > Check it out online here <

    • Custom Screen Tag Example

    Small Changes:
    • Improved Snap Anchors tool UI and added option to set the pivot point
    • AnchorOverride: some public variable / method for code access provided
    • Option to install assembly definition files for Better UI
    • IngameResolutionMonitor can be added safely into a scene without the need to call Create() now.
    • LocationAnimations: OnUpdating event is added to the animations to allow custom animations along with the location animation
    • Help Links in all Better UI MonoBehaviors and Scriptable Objects added
    • Exposed options of some UGUI controls from newer versions of unity in better versions of the controls

    Fixes:
    • Location Animations: "Use Relative Locations" didn't work with [ Any Location ]
    • NullReferenceException when adding a Better Locator fixed
    • Making a LayoutElement better remembers the previously made settings now
    • Prevention of warnings in the console
    • fixes in some pre-defined materials
    • fixed compile error which appeared in newer versions of unity in ResolutionMonitor

    PS: The Documentation will be updated soon.
    Edit: The documentation is up to date now.
     
    Last edited: Oct 6, 2021
    theforgot3n1 likes this.
  28. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    theforgot3n1 likes this.
  29. EpicMcDude

    EpicMcDude

    Joined:
    Apr 15, 2013
    Posts:
    81
    Actually I have an excuse was just going to ask you about it ahaha. I work 99% with Playmaker, and was wondering if you have any plans on adding Playmaker actions for this asset?
     
  30. DanielDx

    DanielDx

    Joined:
    Apr 14, 2020
    Posts:
    3
    Hello, Just got the bundle and I think your asset is awesome, I'm curious if your asset can work with DoozyUI mainly with canvas resolution and buttons

    Unity UI it's a nightmare
     
  31. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    Hi @EpicMcDude, Better UI is 99% for setting up your UI. There are very rare cases where you would interact from code with it. Therefore, there is not much I can think of that would be useful for visual scripting actions... Do you have anything specific in mind?

    Hi @DanielDx, I don't have DoozyUI myself (yet) but I tried figuring out by checking their documentation: It seems like they have their very own components for certain UI controls. e.g. the Doozy UI Button is a replacement for the UGUI Button. Better UI on the other hand extends the UGUI Button to add further functionality (and does so for all the other UI elements). The benefit is, that it is compatible with code and components which use the UGUI controls. The downside is, that it cannot be merged with other extensions of the same ui element (except if doing it by hand).
    However, this doesn't yet answer your question. But the answer is simple: You have to decide: either you use the doozey UI element or the (BetterUI-) UGUI element. I would suspect that you can have a UGUI Button / Better UI Button and a Doozey UI Button in the same canvas (but I actually don't know).
    Regarding Buttons: Better UI is just adding more transitions to the UGUI button (so that you can colorize multiple images on hover for example). Not sure if Doozey UI also supports this, but if so, you wouldn't need a Better UI Button in that case.

    Regarding "Canvas Resolution": I couldn't find anything about this topic in their documentation. Maybe you can explain me what this is in context of Doozey UI and what you would like to achieve..?
     
  32. peonix

    peonix

    Joined:
    Oct 6, 2016
    Posts:
    3
    I have the asset, but can't seem to use it together with Unity's Unit Tests system. Is there a assembly reference available?
     
  33. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    Could you please give me some more insight? What is hindering you from using it together with the Unit Test system? Are there errors in the console?

    Regarding assembly reference: If you installed the assmbly definition files you may need to reference them (
    TheraBytes.BetterUi
    )
     
  34. thrif_ash

    thrif_ash

    Joined:
    Apr 19, 2013
    Posts:
    10
    Hi @Hosnkobf

    I'm new to your asset so apologies for the newb question. Do you have setting recommendation for the canvas when using Better UI? For example I usually set Canvas Scaler to "Scale With Screen Size" with Reference Resolution of 1920x1080 but I think your asset deals with some of this?
     
  35. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    Hi @thrif_ash
    If you want to use the "Better" components which do sizing (like changing font size of (Better)Text(MeshPro)), you need to set the Canvas Scaler to "Constant Pixel Size". Otherwise the canvas scaler will fight the better-ui scaling approach and will lead to unexpected sizes. (see known issues and "Restriction Note" in Installation Guide)

    But it is possible, to not use the sizing features of Better UI and use the canvas scaler of your choice (you may need to remove Size Modification Settings here and there)
     
    thrif_ash likes this.
  36. thrif_ash

    thrif_ash

    Joined:
    Apr 19, 2013
    Posts:
    10
    OH wow, how did I miss that section: "Restriction Note: Canvas Scaler" hahaha was looking at the documentation for my answer too! Thanks for the quick response.
     
  37. Slashbot64

    Slashbot64

    Joined:
    Jun 15, 2020
    Posts:
    184
    is there an example of what you should do for a setup to support mobile landscape/portrait and desktop landscape 1080p+ resolutions? in a single project?
     
  38. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    Hi @Slashbot64,
    There is no example project but maybe this tutorial will help you: https://documentation.therabytes.de/better-ui/HowtocreateResponsiveUI.html

    If you still have questions, let me know.

    Edit: Sorry, I didn't read your question carefully enough. You want three different UI layouts: mobile portrait / landscape and desktop landscape, right?
    To achieve this there are several possible setups. I would go for the following: your fallback is desktop landscape. Then there is mobile portrait and mobile landscape. Mobile portrait should fallback first to mobile landscape. To detect mobiles you have several options: check for a certain screen size (this may trigger the desktop resolution on big tablets or the mobile version on small pc screens), check for device "touch screen" (this may trigger on a few laptops which support touch screen) or check for a custom tag which you set in code depending on the platform (however, Android can theoretically also run on desktops). As you can see: it is not that easy to find out if you are on mobile... You have to decide which potential false positive detection you are okay with.

    Read more about setting it all up here: https://documentation.therabytes.de/better-ui/ScreenConfigurations.html
     
    Last edited: Oct 22, 2021
  39. navids

    navids

    Joined:
    May 10, 2017
    Posts:
    2
    Hello, thank you very much for making a great asset.
    I
    have one question.

    I want to grayscale a BetterImage component from source code during Unity runtime. Any example code?
     
  40. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    Hi @navids,
    Here is the documentation page regarding this.
    The code goes like this:
    Code (CSharp):
    1. // Set the material to the pre-defined "Grayscale" material
    2. // This is only required if the image has a different material assigned.
    3. myImage.MaterialType = "Grayscale";
    4.  
    5. // The parameters are mapped to indices which map to vertex-data
    6. // to make it more readable, we make a constant
    7. const int AMOUNT_PARAM_INDEX = 0;
    8.  
    9. // apply the value (full grayscale is a value of 1)
    10. myImage.SetMaterialProperty(AMOUNT_PARAM_INDEX, 1.0f);
    Here is also an overview about the pre-defined materials and their parameters / indices.
     
  41. devpsst

    devpsst

    Joined:
    Feb 10, 2021
    Posts:
    10
    Can anyone provide any screen configurations they are using for Tablet vs Phone (fallback)? We had something setup but realised it did not trigger on certain iPad's correctly. Also would love to see this as a built in option to get going quickly.

    Also, are there any plans to support the device simulator? This works great for providing all the correct values in the editor, but I can see that you rely on the GameView instead.
     
  42. Slashbot64

    Slashbot64

    Joined:
    Jun 15, 2020
    Posts:
    184
    yeah that would be good... I'd just like an example scene that has the right setup for supporting the giant mess that is mobile devices.

    I suppose mainly just want to support landscape but at desktop (1080p+) and landscape at all the various mobile resolutions for modern devices... an example scene for that would be good, think trying to support portrait aswel is probably just to much additional work
     
  43. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    Hi @devpsst & @Slashbot64,

    as mentioned earlier there is not a straight forward solution to check if you are on a mobile or desktop device.
    Modern websites usually just check the screen size to apply responsive designs.
    If you instead want to check the operating system (assumning that iOS and Android are always mobile) you can check for a Screen Tag (with the string
    Mobile
    ) instead and trigger the following code when the game starts:
    Code (CSharp):
    1. #if UNITY_IOS || UNITY_ANDROID
    2. TheraBytes.BetterUi.ResolutionMonitor.AddScreenTag("Mobile");
    3. #endif
    Please note that this code would trigger the Mobile Screen Configuration also on desktops which have Android as operating system. To prevent this, you could check for the screen size and touch screen feature in addition (all have to be true to trigger).

    upload_2021-11-2_9-55-57.png
    The example configuration above would only trigger if the screen diagonal is less than 13 inches (this should include all big tablets, but also triggers for some small laptops), if the device supports touch (it actually checks if it has a touch screen keyboard which is only supported on iOS, Android and Windows Store Apps) and checks for our custom tag (see above). This should detect mobiles correctly in 99.9% of the cases (But I didn't test this configuration myself).

    EDIT: replaced picture to include orientation check.
     
    Last edited: Nov 2, 2021
  44. devpsst

    devpsst

    Joined:
    Feb 10, 2021
    Posts:
    10
    Thanks for the info. We are targeting mobile only (iOS and Android) so our question was very targeted at that space only. Just wondered really if there was any plans to have a few example scenes, of which you had a better understanding of targeting a phone vs tablet for mobile only for example, plus other scenes which target different scenarios. It's no issues, we will need to test more to check out configurations are working as expected, was hoping someone would send their configurations on here if they had something working for our current problem :)
     
  45. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    @devpsst,
    Ah, sorry. I mixed up your and @Slashbot64's request. You want to distinguish between Phone and Tablet? This is difficult and can only be done via screen size. I would go for the diagonal screen size: all below 7 inch is a phone and all from 7 inch and above is a tables (only exceptions: tablets from 2011 are smaller and the Samsung Galaxy Z Fold 3 phone is bigger from my research).
    I will do some research if I can detect device types differently for future Better UI versions but I think it is not possible except for checking all the device ids (which is obviously too much work and would need too many updates).

    Example Scenes are not really possible here because these settings are project wide. I could add more examples which modify the Screen Configurations but at a certain point it probably would become more confusing than helpful...
     
    devpsst likes this.
  46. devpsst

    devpsst

    Joined:
    Feb 10, 2021
    Posts:
    10
    No problem. We are using aspect ration right now and its working ok, but screen size could be a good option to add in as well. Thanks for the info!
     
  47. mikeyng

    mikeyng

    Joined:
    Sep 20, 2019
    Posts:
    4
    @Hosnkobf

    I'm encountering a weird bug with Better Images

    I'm using a script to set the image (sprite) on the button in Start. However, it's not doing that. It works fine if I downgrade to a regular Unity Image, though.

    I am additively loading the UI in my scene.

    This bug appears to be happening only when I'm loading the scene straight from the editor. If it's loading the scene from within the game (from one scene to another) then it works fine.

    For now, I've reverted back to a regular Unity image to get it going, as I don't really need the upgraded stuff from Better Images.

    Let me know if you have any questions or if there's any way I can help. Thanks!!
     
  48. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    Hi @mikeyng,

    Thanks for the report.

    What you have discovered is actually a tradeoff for the responsive feature of better UI (which allows setting different sprites per screen configuration, like Portrait / Landscape).
    When a scene is loaded or the resolution changed, the inner sprite-property is overwritten by whatever has been set for the current screen configuration.

    I checked my code and realized that it is not easy to do it right. You have to set the sprite for the current screen configuration setting (in case a scene is loaded or resolution changes) as well as setting the sprite property directly (in case nothing triggers to override the sprite):

    Code (CSharp):
    1. myBetterImage.CurrentSpriteSettings.Sprite = mySprite;
    2. myBetterImage.sprite = mySprite;
    I will see if I can provide some helper functions to do this kind of things in one line in the future.
     
    Timmy-Hsu, SRx734 and mikeyng like this.
  49. AlienFreak

    AlienFreak

    Joined:
    Jul 2, 2012
    Posts:
    39
    Better UI Wizard breaks when trying to install the TextMesh Pro option (using TMP 3.0.6 on Unity 2021.1.27 on macOS Big Sur latest).

    [Error] Failed to import package with error: Couldn't decompress package
    UnityEditor.AssetDatabase:ImportPackage (string,bool)
    ThirdPartySupportPage/<>c__DisplayClass6_3.<OnInitialize>b__3() at /Plugins/3rdPartyTools/UI/TheraBytes/BetterUI/Editor/Scripts/Wizard/Pages/ThirdPartySupportPage.cs:113

    SetupWizard.DoReloadOperation() at /Plugins/3rdPartyTools/UI/TheraBytes/BetterUI/Editor/Scripts/Wizard/SetupWizard.cs:137

    ThirdPartySupportPage/<>c__DisplayClass6_2.<OnInitialize>b__2() at /Plugins/3rdPartyTools/UI/TheraBytes/BetterUI/Editor/Scripts/Wizard/Pages/ThirdPartySupportPage.cs:111

    TheraBytes.BetterUi.Editor.ValueWizardPageElement`1<string>.DrawGui() at /Plugins/3rdPartyTools/UI/TheraBytes/BetterUI/Editor/Scripts/Wizard/WizardFramework/PageElements/ValueWizardPageElement.cs:36

    WizardPage.DrawGui() at /Plugins/3rdPartyTools/UI/TheraBytes/BetterUI/Editor/Scripts/Wizard/WizardFramework/WizardPage.cs:55

    SetupWizard.OnGUI() at /Plugins/3rdPartyTools/UI/TheraBytes/BetterUI/Editor/Scripts/Wizard/SetupWizard.cs:98

    GUIUtility.ProcessEvent()​
     
  50. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    1,050
    Hi @AlienFreak,

    Thanks for the report.

    It looks like this is a bug in Unity. Can you try importing it with Unity 2021.1?
    If that works, you can copy over the folder
    Assets/TheraBytes/BetterUI_TextMeshPro
    to your project.
    If you still have trouble, I could also send you the folder as zip file.


    Edit: Just have seen that you wrote that you already use Unity 2021.1... So, maybe this bug still exists... I attached a zip file with the content of the package. Please extract it in your project to
    Assets/TheraBytes
    .
    Does import also fail for the example projects?
     

    Attached Files:

    Last edited: Nov 4, 2021