Search Unity

  1. How can our website serve you better? Give us your feedback. Take our survey and let us know.
    Dismiss Notice

[RELEASED] Flexbox (fast, easy layout, from HTML/CSS) in Unity 2017, 2018, 2019

Discussion in 'Assets and Asset Store' started by a436t4ataf, Jun 23, 2019.

  1. plcuist

    plcuist

    Joined:
    Aug 29, 2013
    Posts:
    15
    When the canvas is set to "World Space" the UI is not rescaled when we change the size of the window. Is there a way to force a refresh ?
     
  2. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    In the editor:
    • Easiest way to force refresh is to switch to Unity's "ui editing" mode (click in Scene view and press letter 't') and then click/drag any FlexContainer or FlexItem in the Scene view (with UnityUI this will attempt to resize it - but Flexbox4Unity will detect that, prevent you resizing, and instead force refresh the layout)
    At runtime:
    • On FlexContainer there are several methods to give you fine-grained control of forced refreshes, each one has "Refresh" in the name. The simplest one will refresh everything, the variations let you deliberately only refresh children, or self and children, or parents and self.
     
  3. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    FlexContainer also has an Advanced option (click on the Advanced tab at top) that makes it auto-refresh layout EVERY TIME you select it in the Editor. This is mostly used when debugging new features or adding your own custom extensions to Flexbox4Unity - but if you have a container you're having to refresh often it can be a good feture to turn on temporarily.
     
  4. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    Finally ... I haven't seen this happen in the main Unity versions (2019/2018). It might be a bug in 2020 only - I'll add it to the list of possible bugs to investigate. (I use WorldSpace UI a lot and it always refreshes for me)

     
  5. plcuist

    plcuist

    Joined:
    Aug 29, 2013
    Posts:
    15
    Thanks. I will try our different suggestions.
     
  6. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    Preview of the new margins/padding editing widget (for version 4 - possibly not ready until early 2021):


    Notes:
    • The preview is auto-sized to show the relative/actual pixel sizes of the padding, margin, etc
    • Each measurement is shown both as what you typed (e.g. "12 %" for the padding-bottom), and as the actual pixel size that resolves to (e.g. "50.5248" for the 12% example)
    I think this is a LOT more useful than Unity's UIToolkit/UIElements version :) which doesn't give you any useful info and fails when you start using percentages / ems / etc.
     
    midnightcigarettes likes this.
  7. Trisibo

    Trisibo

    Joined:
    Nov 1, 2010
    Posts:
    189
    @a436t4ataf Hi, I'm not sure if this is the most adecuate place for this or if you prefer email or other channel. I was getting a NullReferenceException when trying to open the PDF guide (on a component: "Help" tab -> "Full PDF UserGuide (v3.3)" button). It's just that in FlexboxSettingsLoader._PathToAssetForClass, matched.GetClass() is returning null for some MonoScript, just taking care of null values does the trick.
     
  8. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    Thanks - that should only happen if you moved (or deleted) the PDF file from the sub folder it lives in (there is no way in Unity (*) for me to auto open a specific file if you move it) ... OR: if I accidentally failed to re-build the PDF before incrementing the version number when submitting to AssetStore (which would be an embarassing mistake on my part!).

    It's probably the latter :). I'll check this on next update and make sure the link is correct.

    (*) technically there are some tricks with hard-coding GUIDs, but it's a very obscure branch of editor coding, and for the sake of one file - that you can access directly just by double-clicking it in the Project view :) - it seems like overkill.
     
  9. Trisibo

    Trisibo

    Joined:
    Nov 1, 2010
    Posts:
    189
    It's a fresh install of the plugin, so the PDF wasn't moved. I don't think it's actually related to the PDF, unless I'm misunderstanding what you mean; it's just that, in the method that fails, AssetDatabase is finding files like "EditorForFlexContainer.cs", for which GetClass just returns null (I guess it only works for MonoBehaviour and ScriptableObject? I have never used that method), but after adding a null check the PDF is found and opens without issue.
     
  10. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    Yeah, you're right that the GetClass==null is something I should have handled in the first place. Fixed now for next version.

    (although interestingly the unpatched version is working fine for me on a new 2019 project. Maybe a 2020-specific problem - but worth fixing anyway)
     
    Trisibo likes this.
  11. DennisWardAltair

    DennisWardAltair

    Joined:
    Apr 4, 2019
    Posts:
    27
    Just purchased Flexbox4Unity and have a simple layout I'm trying to implement: a sidebar similar to Microsoft Teams where there are buttons stacked on the left, aligned with the top, above another group of buttons stacked below the first and aligned with the bottom. I'm having trouble removing the spacing regardless of how I set the "Align Items". I want each button to be 90x90 pixels.

    teams.png


    Here's what I'm getting:

    flexbox.png

    Any help is appreciated.
     
    Last edited: Feb 1, 2021
  12. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    There's a couple of ways that are all equally good.

    I'd probably do:

    *[] is a flexcontainer

    [sidebar: direction=col
    [main-items: flex-grow = 1, align = start, direction = col]
    [end-items: flex-grow = 0, align = end, direction = col] (or could be: direction = col-reverse to make them flow bottom to top)
    ]

    *{} is a flexitem
    [main-items:
    {item1: width=height=90px, grow=0, shrink=0}
    {item2: width=height=90px, grow=0, shrink=0}
    ... etc
    ]
     
  13. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    NB: wheneer you embed a FlexContainer inside another FlexContainer, you want it to ALSO have a FlexItem (that makes it be laid-out inside its parent). That's where you get to set the flex-grow/shrink etc.
     
  14. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    (if you use the shortcuts on the Create menu - e.g. right-click in Project view and select Create - then most them will automatically add a FlexItem whenever they add a FlexContainer, but if you're doing the AddComponent by hand, then you usually need to add both)
     
  15. DennisWardAltair

    DennisWardAltair

    Joined:
    Apr 4, 2019
    Posts:
    27
    I've had better luck when I set the size constraints on the FlexItems to size the content. When I made other changes, it didn't seem to refresh until I left then returned to the scene I was editing... I was able to get the results I was looking for when I set the justify and align to "start" on the top container and "end on the bottom one. Looking better now!
     
  16. Trisibo

    Trisibo

    Joined:
    Nov 1, 2010
    Posts:
    189
    Try disabling and enabling one of the objects to force Unity to trigger a layout event, this also happens quite a bit with Unity's built-in components.
     
    a436t4ataf likes this.
  17. DennisWardAltair

    DennisWardAltair

    Joined:
    Apr 4, 2019
    Posts:
    27
    Thank you very much for the response! Great support! I'll give your suggestion a try...

    One question: You specify width and height here, These are set under "Overrides:" for "Default Width" and "Default Height"? I changed these and it worked well, I just wanted to confirm that's what you're suggesting.
     
    Last edited: Feb 1, 2021
  18. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    Yes, that's correct. The equivalents in CSS are simply called "width:" and "height:", but I tried to give them a clearer description in Unity (in the Flexbox algorithm they are used more as an override than a default).

    In some cases you might need to resort to setting "min-width" = "max width" which will really FORCE flexbox to make something a specific size :). Those cases are rare.

    There are also a few edge-cases where the "width" isn't used correctly by my code - those are bugs I'm currently working on. In particular I've noticed some places where "width" doesn't take account of "margins/padding" correctly. If you hit one of those cases (currently I have zero user reports of this - I've only seen it on my test projects) you'll have to wait until I can figure out a fix, or try a different combination of widths/heights to get it right.
     
  19. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    This is also something I'm trying to find a way to workaround - but as you pointed out: it's actually a problem in Unity itself, and so far every fix I've found causes something to break somewhere else :(.

    (which probably explains partly why it's broken in core Unity too!)
     
  20. DennisWardAltair

    DennisWardAltair

    Joined:
    Apr 4, 2019
    Posts:
    27
    I've logged about 3 hours on this and I've found it to be a really nice layout system! Great job and excellent support! Thank you very much for responding so quickly!
     
    a436t4ataf likes this.
  21. Arlorean

    Arlorean

    Joined:
    Sep 7, 2014
    Posts:
    14
    I'm having trouble getting simple buttons to align inside the FlexContainer, they always overflow. They don't seem to be centered on each FlexItem box vertically and they're not shrinking to fit the FlexItem space. I've got FlexItem Grow and Shrink set to 1 for all three FlexItems:
    upload_2021-2-16_15-10-6.png
    I was trying to follow the tutorial here but align the buttons to the top, to fill the available space.

    Here are my FlexContainer settings:
    upload_2021-2-16_15-13-38.png

    It's probably obvious but I've looked at this for about an hour and I can't work it out. I thought I'd test out the free version before buying the full version. I've tried using UIToolkit and it's great for some things but it lacks features that the old Unity UI had.

    Thanks in advance.
     
  22. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    I only update the free version once a year. Free version is approximately 6 releases behind the paid version right now.

    Most people try the free version briefly then immediately move to paid (or ... for very simple cases, I know some people are happy with the free one).

    If you find a bug like this in paid (it looks to me like a bug - alignment and sizing of buttons is something that is very heavily tested and robust in the current version) I would happily fix it ASAP (or, if I cannot, process a refund for you). I can't promise to fix everything, but over the past 18 months I've typically issued emergency patches to users with specific problems within 1-2 days of them reporting them.
     
  23. Arlorean

    Arlorean

    Joined:
    Sep 7, 2014
    Posts:
    14
    Thanks. I'll buy the full version and try that.
    UPDATE: The full version presented me with a button "Resize children to fit self" which wasn't there in the free version. That seemed to fix it:
    upload_2021-2-16_16-11-5.png
     
    Last edited: Feb 16, 2021
    a436t4ataf likes this.
  24. LadyIsak

    LadyIsak

    Joined:
    Sep 29, 2016
    Posts:
    6
    So for whatever reason, the latest version of F4U is not working with the latest version of TextMeshPro:

    Code (csharp):
    1. Assets/Flexbox4Unity/Local SOURCE/ContentSizeCalculators.cs(48,27): error CS1061: 'TMP_Text' does not contain a definition for 'fontScale' and no accessible extension method 'fontScale' accepting a first argument of type 'TMP_Text' could be found (are you missing a using directive or an assembly reference?)
    I have no idea what's going on, and googling turns up nothing of use.
     
    a436t4ataf likes this.
  25. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    That message would mean that they've made a breaking change :(. I will have to rewrite that class to work with whatever changes they've made to TMP, and until then TMP won't be supported.

    Which exact version of TMP is this?
     
  26. LadyIsak

    LadyIsak

    Joined:
    Sep 29, 2016
    Posts:
    6
    So, at 3.0.1, it still works; broken at 3.0.4, but I'm unsure when exactly the breaking change was introduced.
     
  27. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    OK, great, thanks - I'll add that to my list of things to work on this weekend, and try to include in the next update (ETA: early next week).
     
    Arlorean likes this.
  28. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    New version: v3.4 is now submitted to Unity, waiting for their approval.

    Main changes:
    • Fixes to Scrollviews, especially when adding GUI elements at runtime
    • Embedded tutorial viewer
    • Embedded version-update checker (can be disabled with one-click whenver it pops up)
    If this goes through OK, I'll begin work on adding the other recent small fixes and tweaks discussed in the Discord channel.
     
    PutridEx likes this.
  29. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    EDIT: this workaround is not needed any more, a better fix is now included in v3.5.0 and above.

    Thanks to Rocky on the Discord server (I recommend joining!), the TMP integration may work fine if you comment out all the lines using fontScale (I'm still investigating this, don't know what/why they deleted it yet).

    i.e. ContentSizeCalculator.cs lines:
    35
    48
    67

    ... but this may cause other problems (don't know yet)
     
    Last edited: Mar 4, 2021
  30. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    New version: v3.5.0

    • Updated with better workarounds for the bug in latest TextMeshPro (bug reported to Unity - hopefully they won't do this again!)
    • Fixed: using "padding" with a container that was sized using "min width" or "min height" constraints was correct for the main-axis, but was incorrect for the cross-axis, causing it to overflow on the cross-axis
    • Fixed: several edge-cases where "grow" was failing to fill the available space if one or more items in the row had "max size" constraints (most space was used, but not all)
     
    PutridEx and Arlorean like this.
  31. dbirchinall_disced

    dbirchinall_disced

    Joined:
    Oct 13, 2015
    Posts:
    2
    Hi, we're using Flexbox in a large project, but we've currently hit a roadblock after updating to 3.5.0 (we're using 2019.4).

    We get an error like this for nearly all Flexbox containers/items we have in the scene:
    Code (CSharp):
    1. Exception: (in-Editor): Please run the “Tools > Flexbox > Auto-discover all RuntimeSettings” tool! Flexbox settings missing at runtime, should have been pre-configured before entering playmode, for object = Flex Container (Flexbox4Unity.FlexContainer)
    2. Flexbox4Unity.FlexContainer.get_settings () (at Assets/Flexbox4Unity/Local SOURCE/FlexContainer.cs:147)
    3. Flexbox4Unity.FlexContainer.RelayoutBecauseRectTransformChanged () (at Assets/Flexbox4Unity/Local SOURCE/FlexContainer.cs:568)
    4. Flexbox4Unity.FlexContainer.OnRectTransformDimensionsChange () (at Assets/Flexbox4Unity/Local SOURCE/FlexContainer.cs:558)
    We've tried doing the Auto-discover all RuntimeSettings but we still get the error each time.
     
  32. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    Hi, @dbirchinall_disced - can you contact me on the discord channel? https://discord.gg/4AkrDgu - and I'll try diagnosing this with you right now. There's one thing I'm aware of that can cause this (although it seems to come and go randomly - if you have something that is recurring, this might be a chance for me to track it down and fix it once and for all).
     
  33. Tindu

    Tindu

    Joined:
    May 12, 2021
    Posts:
    1
    When I use RootFlexContainer, then it will spam my logs with


    Debug.Log( "ROOT: setting size and suppressing callbacks ... old was: "+rectTransform.rect.size+", new will be: "+newSize );

    I can of course comment it out, but is it indicating that this should not be called that many times to warrant logging?

    Thanks!
     
  34. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    Sorry! Because that was a last-minute addition, I was worried that it would introduce new bugs, and I had that aggressive log-line in there - you can safely remove it (in next release it will be automatically suppressed except in debugging mode).
     
  35. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    v3.6 now in beta testing (it works perfectly for me, but I want a few people to check it works in their projects too before I push this to the Asset Store!).

    Main feature:
    * Early version of new layout algorithm (v4 alpha) which I've hacked / backported into v3.6 so everyone can access it.
    * This new algorithm currently runs slower than the existing ones, but is many times more accurate (it should correctly layout almost every situation)
    * If you have any problems with the existing algorithms, you should try the new v4-alpha one, and see if the problems vanish
     
  36. GarbageCat

    GarbageCat

    Joined:
    Jul 31, 2012
    Posts:
    255
    can work on webgl ?
    also do I have access to the final html code that it uses to mimic the unity ui? (If I understood correctly)
     
  37. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    Yep, I use it on WebGL a lot.

    There is no HTML code. That would be slow :). This is all done natively inside C#.

    There *is* an HTML-export -- which is basic! -- I use it for debugging complex cases where I want to see "what does Chrome do in this (complex situation)?". For some situations it could be useful, but it doesn't try to export images, buttons/form-elements etc, so for anything other than simple layout-checking it won't do much.
     
  38. GarbageCat

    GarbageCat

    Joined:
    Jul 31, 2012
    Posts:
    255
    so was wondering how does it uses the same gui from UnityUI and run "up to 10x faster for the same content" ?
    the canvas still builds the elements? or is it something custom to your solution..
     
  39. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    Unity runs a poorly designed layout algorithm internally within the UnityUI codebase. It's (in my opinion)... really dumb. (there are plenty of well-known layout algorithms they could have used instead, it seems they invented one of their own, starting with a very simple case and then patching stuff on the sides until it sort-of worked).

    First few versions of Flexbox4Unity patched into the Unity layout algorithm, skipped some of the unecessary steps, and so immediately got a speed up.

    Current version does a lot of things to intelligently sidestep the UnityUI algorithm where possible, and run both faster AND more accurately.

    The next version (in development) completely disables the Unity algorithm (it took me 3 years of testing and development to be confident enough to do this, but it seems I really don't need to let Unity's algorithm run at all any more). This is currently being beta-tested -- if it doesn't work, I have a fallback plan where I've also delved into Unity's algorithm and figured out how they insert things in it, and I'll insert my things in it (that are way better + faster).

    NB: none of this has any effect on non-Flexbox elements - they all still use UnityUI layout, unchanged. However, until/unless I implement that last part (inserting things into the UnityUI layout algorithm - which is entirely undocumented! ) I will never be able to get e.g. changes to a Unity textfield in the Editor to automatically and immediately relayout Flexbox (right now you have to select a Flexbox item, or touch the RectTransform inspector, so that Unity sends me an update that 'this Textfield might have changed').

    So, eventually, I want to implement that fallback anyway, to give the tightest possible integration experience in the Editor
     
    SugoiDev likes this.
  40. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,275
    FYI there's two halves to this:

    1. the bit no-one knows about, where Unity has loads of private classes, and undocumented method calls
    2. the bit Unity documented (badly) where step 1 calls-in to any UIBehaviour subclass / any UILayoutElement instance

    The first part is all about building an in-memory structure for iterating over, and then items in that structure are queried using the second (public) bit. Both bits are not great.
     
unityunity