CSS Flex layouts in Unity3D

Author adam

UIToolkit: pixel-perfect borders for adjacent DIVs/boxes

If you’re using Unity’s UIToolkit you’ll sooner-or-later run into this nasty bug: two boxes side-by-side but the border in-between is twice as thick as it should be. In the image below we wanted the boxes on the right (‘a-aaa’ and … continue reading

Guide: Upgrading from an old version

Difficulty: Beginner

New versions of Flexbox4Unity often require making some changes to your existing project. Usually these are done automatically for you, but some users want more control over the process, so I’ve now created a GUI for the upgrades … continue reading

Guide: Choosing your Flexbox LayoutAlgorithm

Difficulty: Standard

The layout algorithm controls all of the core CSS Flex behaviour.

In Flexbox4Unity you have to choose which layout-algorithm you want to use. By default, new installs use the newest, most-recent algorithm – but there are times when … continue reading

2021 UIToolkit – all Tutorials

For making in-game UI your best option is Unity’s own UnityUI paired with Flexbox4Unity, allowing you to use modern CSS3/Flexbox layouts within Unity’s UI system, with RectTransforms etc working seamlessly together (but without all the problems of ContentSizeFitter not … continue reading

2021 UIToolkit Tutorial – Buttons

This tutorial is for anyone writing editor UI’s – e.g. Custom Inspectors, EditorWindows, etc – using Unity’s new UIElements/UIToolkit. Make sure you’ve read the previous articles on core concepts and how to access the root container/VisualElement.

(NB: UIToolkit doesn’t … continue reading

2021 UIToolkit Tutorial – Clickable Labels

This tutorial is for anyone writing editor UI’s – e.g. Custom Inspectors, EditorWindows, etc – using Unity’s new UIElements/UIToolkit. Make sure you’ve read the previous articles on core concepts and how to access the root container/VisualElement.

(NB: UIToolkit doesn’t … continue reading

2021 UIToolkit Tutorial – Labels and Basic Styling

This tutorial is for anyone writing editor UI’s – e.g. Custom Inspectors, EditorWindows, etc – using Unity’s new UIElements/UIToolkit. Make sure you’ve read the previous articles on core concepts and how to access the root container/VisualElement.

(NB: UIToolkit doesn’t … continue reading

Docs: How does Flexbox autosize your UnityUI GUI components?

Documentation: customizing autosizing, understanding autosizing

Do you hate using Unity’s ContentSizeFitter component, that thing that so often fails to do the one task it was created for, and is incompatible with so many other parts of Unity’s Layout system? One … continue reading

2020 – UIToolkit for EditorWindows, Custom Inspectors, and Raw IMGUI

To recap … in Part 1, we learned:

  • You can create UIToolkit UI’s entirely in code, with no CSS files, no extra documents, everything in one place: easy to write, easy to maintain, simple and efficient
  • Everything in UIToolkit
continue reading

2020 – UIToolkit/UIElements Quickstart guide for Unity Editor scripting

Unity has three different UI frameworks that run in parallel (IMGUI, UnityUI, and UIElements/UIToolkit). The latest of these is UIToolkit (identical to UIElements, but the marketing team renamed it), and it’s really very good – but most of the docs … continue reading

« Older posts

© 2021 Flexbox 4 Unity — Powered by WordPress

Theme by Anders NorenUp ↑