Templates

CSS/Flexbox is powerful and quick to use - but when you're building a really big/complex UI it helps to have 1-click buttons that will do common tasks for you. e.g. "Create a horizontal area and pre-fill it with Buttons", or e.g. "Add a Header, a Footer, and a sidebar". FlexbuilderTemplates provide this.

Installing/enabling - 2023

Note

💡 If you are running FlexBuilder-Pro and still have the beta-edition of Templates, please contact Support for info on how to upgrade to the latest production version

No installation necessary - Templates are now provided free as part of Flexbuilder-Standard edition.

Quick start

See: Quickstart Templates to get started.

Core Templates

There are a few templates that are frequently used:

Icon Name Description
Header + Body Classic layout: a header which automatically sizes to the height of the Text inside it, and a Body which you add all your other UI to
Sidebar (left) Classic layout: a sidebar on the left, set to a percentage of screen width or fixed number of pixels
Image A UnityUI Sprite/Image added as a child, can be centered, stretched, etc

Using Layout templates

You can (and indeed: you should!) nest layouts inside each other. After a layout is created it is nothing special - it's just an ordinary set of FlexContainers and FlexItems.

Note

💡 In FlexBuilder-Pro the 'layout templates' are a bit smarter, and can be used to 'change' an existing layout; docs on this coming soon, or check with Support on how to use/enable this.

TextMeshPro and text templates

Most templates that add Text, or text-based UI (e.g. Buttons) have two versions:

  1. A standard version using UnityUI.Text
  2. An extra version using TextMeshPro

As of 2022, Unity has been secretly removing UnityUI.Text from the UnityEngine -- although TextMeshPro isn't fully supported, and is still under development they have stopped fixing bugs in UnityUI.Text, so it's recommended you switch over if you are one of the few developers who didn't already. However, FlexBuilder supports both.

The versions that use TMP have a yellow label in the top right of the logo to make them easy to spot.

Using Images

Note

💡 The "Image" template will intelligently try to modify the parent FlexContainer if it's the only child within the container. It will override Flexbox's default ("stretch to fill") and replace it with "center" so that the image retains its default size + aspect ratio.

If you use the Image template on a container that already has children, FlexBuilder will NOT try to change your existing settings - so if you haven't changed them, the Image will get stretched (Flexbox's default)

Advanced Features

Configuring and/or hiding individual templates

Templates are configured in the "NinjaTools.Templates for FlexBuilder" package. Within that package are a set of Unity Assets (ScriptableObjects), one for each Template:

If you edit these directly you can:

  • Disable a template (so it doesn't appear in the FlexContainer)
  • Change the display-order (so it appears near the top or bottom)
  • Change the icon (if you really want?)

Changes are picked up immediately and automatically in-Editor. However your changes will be lost when you upgrade. If you need to customize them and have the changes survive across upgrades, look at the section on "Creating Custom Templates"

Note

💡 A future update for FlexBuilder-Pro will enable you to persist these changes across upgrades automatically

Creating Custom Templates

You can also create your own templates. Each template needs an Asset (ScriptableObject) instance of one of the Template classes, currently:

  • Class: IAddFlexItemTemplate
  • Class: IChangeFlexContainerTemplate

FlexBuilder will discover these wherever they're located in your projct (you can put them in Assets).