Tutorial – Getting Started

This basic tutorial will walk you through the steps needed to get started using the Daikon Forge user interface toolkit.

In this tutorial, we’ll be covering how to use the UI Wizard to create a new GUI in your scene. The following steps assume that you are starting from scratch with a new empty scene.

The first thing that needs to be done is to set up a layer just for your user interface.  Open up the TagManager panel (Edit → Project Settings → Tags) and add a new “GUI” layer. All of your UI elements will reside on this layer.

Next, go to Assets → Daikon Forge → UI Wizard.

This will cause the following wizard to pop up:

Let’s go through what each option does.

  • UI Layer is the layer your UI will reside on. Pick the GUI layer you just created.
  • Orthographic, if checked, means your UI will be displayed in 2D. Uncheck this if you need your UI to display in 3D.
  • Pixel Perfect, if checked, means your UI will perfectly map to screen pixels (for instance, text usually requires pixel perfect rendering, otherwise it will appear blurry or fuzzy). So a 100 pixel wide sprite will always be exactly 100 pixels wide on any screen (on larger resolutions it will appear smaller)

Additionally there are a number of options concerning input:

  • Use Joystick determines whether the UI will process joystick or gamepad input.
  • Joystick Click Button is used to generate click events. While a GUI element has focus, pressing this button will have the same effect as using the left mouse button.
  • Horizontal Axis and Vertical Axis are used to generate arrow key events. This way, your UI controls can listen for arrow key events to navigate the current selection, and joystick input will automatically work.  If a custom axis is specified, the names must match an axis defined in the Edit -> Project Settings -> Input settings.

After configuring these, simply press the Create button to create your starting user interface hierarchy.

You will now have a new UI Root game object in your scene, with a UI Camera child object.

 Note that the UI Root object has two custom components assigned to it, an Input Manager  and a GUI Manager. We will look at the Input Manager first:

The Input Manager specifies how DF-GUI will process user input. You’ll see some familiar settings here that you specified in the GUI Wizard, namely the Use Joystick, Joystick Click Button, Horizontal Axis, and Vertical Axis options.

In addition, we have:

  • Use Touch – This will enable touch support on mobile devices, including multi-touch support.
  • Axis Polling Interval – This controls the interval at which it polls the Horizontal and Vertical axes to generate arrow key events.
  • Retain Focus – This determines what happens when you click on nothing. If Retain Focus is enabled, the last focused control will continue to retain focus. Otherwise, the control will lose focus.

Below that is the GUI Manager component, which is responsible for rendering your user interface. It contains settings that determine how your controls are rendered, default options, and design-time options.

Let’s take a look at these settings:

  • Render Mode is whether the UI is rendered in Orthographic or Perspective. This is the same as the Orthographic checkbox in the UI Wizard.
  • Pixel Perfect determines whether controls map perfectly to screen pixels. This is the same as the Pixel Perfect checkbox in the UI Wizard.
  • Default Atlas is the texture atlas assigned to new controls by default. Texture atlases are used to keep draw calls low, and will be covered in another tutorial.
  • Default Font is the font assigned to new labels by default. Fonts contain the necessary data to render text, and will be covered in another tutorial.
  • Merge Materials causes the GUI Manager to attempt to sort controls by material to reduce draw calls. For instance, if you have a sprite from atlas A as the background, a sprite from atlas B on top of that, and another sprite from atlas A at the very front, DFGUI will generate three draw calls (background, middle, foreground) in order to ensure correct render order. However, you can force DFGUI to back the background and foreground together into one draw call rather than two, but this can cause render order issues.
  • Generate Normals causes the GUI Manager to generate normals for each vertex. This is used by shaders that require normals, such as shaders that use lighting.
  • Screen Width and Screen Height control the size of the design canvas. For instance, if you want to design your UI at 640×480 you can enter that here and click Apply. The UI will still properly display on all screen resolutions, however. You can also click Use Build Settings to copy the default display resolution from the build settings.
  • Show Wireframe shows the wireframe mesh of your UI.
  • Show Rulers shows ruler markings at the edge of the UI canvas. This is used to aid in UI design.
  • Snap To Grid snaps UI controls to the grid. This is used to aid in UI design.
  • Show Grid displays the grid used for grid snapping.
  • Grid Size controls the size of the grid cells used for grid snapping.
  • Show Safe Area displays a rectangle around the edges of your UI. This is used when designing UIs for display on TVs which may crop some percent of the image border.
  • Safe % is the percentage used for the safe zone. Use this to display different safe zones (5% – 10% should suffice for nearly all cases)
  • Force Refresh causes an immediate redraw of the entire UI. If something doesn’t appear to be updating, you can select Force Refresh to force a redraw.

In the next tutorial, we’ll take a look at some basic controls – sprites, labels, and buttons.