December
04
2014

Learn how to use the new Unity® UI with ORK Framework.

You can find more information on the new UI here.

Some basic UI prefabs can be downloaded here.

Basic Settings

Open the ORK Framework editor and navigate to Menus > Menu Settings and change the following settings.

  • GUI System Type
    Select New GUI.
  • Default Font
    Select a font you want to use as the default font.
    This setting is crucial, because if there is no default font to fall back to, the GUI will have problems displaying texts.
    The font can be overridden in each Text Format setting individually.

ORK Framework will now use the new GUI system. There are additional settings (e.g. for using a camera to render the UI instead of the default overlay), you can find more information about them directly in the ORK Framework editor.

GUI Prefabs

The legacy GUI system used GUISkins to create the GUI – in ORK Framework they’ve been defined in the Default GUI Skins in the Menu Settings and the individual GUI Boxes could override those settings. You’ll notice that the GUISkin fields are no longer available when using the New GUI – instead of using GUISkins, the new GUI will use prefabs to create the GUI. If you don’t select prefabs, ORK will create empty (undecorated) game objects to keep the GUI working.

The created game objects will be updated according to the GUI box they’re used for, i.e. their position and size will be set to the values defined by the GUI box (e.g. content box, name box, choices, ok/cancel buttons). If you want to use input fields, you must define prefabs for them, they wont work otherwise.

Let’s take a look at the individual settings. The Content Box Settings are used for the prefab to create the content box of the GUI box.

  • Content Box Prefab
    This prefab is used to create the content box of the GUI box.
    You can add an image to the prefab to display a background box.
  • Content Box Child
    You can use this setting if you want the content (i.e. text, choices, etc.) to be placed on a child object of your prefab.
  • Content Mask
    The content will be displayed within a Mask using the padding to the border of the content box.
    You can select an image to be used as mask, otherwise the content bounds will define the mask.

The Name Box Settings define the prefab for the name box of the GUI box.

  • Name Box Prefab
    This prefab is used to create the name box of the GUI box.
    You can add an image to the prefab to display a background box.
  • Name Box Child
    You can use this setting if you want the name content to be placed on a child object of your prefab.

The Button Settings define the prefabs for choices and ok/cancel buttons of the GUI box.

  • Choice Prefab
    This prefab is used to create the choices of the GUI box.
    If no ok/cancel button prefabs are defined, this prefab will also be used for them.
    If you define a prefab, make sure to add a Button component to it.
  • OK Button Prefab
    This prefab is used to create the ok button.
  • Cancel Button Prefab
    This prefab is used to create the cancel button.

The Tab Settings define the prefab used for tabs of the GUI box.

  • Tab Prefab
    This prefab is used to create the tabs of the GUI box.
    If no prefab is selected, the choice prefab is used instead.
  • Tab Mask
    Like the content mask, you can define a mask image for the tab button area.

The Scrollbar Settings define the prefab used for scrollbars when the GUI box is scrollable.

  • Scrollbar Prefab
    This prefab is used to create the scrollbar of the GUI box.
    Don’t select a prefab if you don’t want to use a scrollbar.

The Value Input Settings define the prefabs used for value input fields of the GUI box. ORK Framework will create the field names automatically, you don’t have to add them to the prefabs. Make sure the prefabs have the matching components (e.g. toggle requires a Toggle component).

  • Text Input Prefab
    This prefab is used to create text input fields.
    If the text input isn’t displayed correctly, try setting Horizontal Overflow and Vertical Overflow to Overflow in the Text component used to display the input of the input field.
  • Toggle Input Prefab
    This prefab is used to create bool input fields.
  • Slider Input Prefab
    This prefab is used to create int/float input fields.