DebugUI Sample Scene

The Unity DebugUI sample can be used to quickly create World Space debug UIs with a variety of interface elements. The scene can be run to see a demonstration of a debug UI with all available UI elements.

Using in Your Own Apps

This scene was created with the intention of being used by developers to quickly create World Space debug UIs for their own apps.

To create a debug UI in your app, do the following:

  1. Add the CanvasWithDebug prefab to the Hierarchy.
  2. Add elements to the UI via a script. It’s generally best to do this in the Start method of a level script, as is done in the DebugUISample.cs script in this sample scene.

Keep in mind the following important information when creating your debug UI script:

  • The script can easily be created by copying, pasting, and updating content from the DebugUISample.cs script.
  • UI elements show up in the order they appear in the script, starting from the top and going down.
  • Look at the function definitions in DebugUIBuilder.cs for the full list of arguments. The UI elements generally take some display params and a callback for when they’re interacted with.
  • The final param for each function is targetCanvas, which specifies the pane the UI element will be displayed on. As implemented in this sample, it is a value from 0 to 2 (or the DebugUIBuilder.cs const values DEBUG_PANE_CENTER, DEBUG_PANE_RIGHT, DEBUG_PANE_LEFT).

Adding More Panes

This sample scene supports up to three panes, but more can be included by going to CanvasWithDebug’s DebugUIBuilder component and adding to Target Content Panels. Note that you will have to create an object similar to the existing Content* objects for each new pane and place it in the scene.

Scene Walkthrough

When this scene is run, the user is presented with a debug UI spread across two panes on a World Space canvas. The UI includes a button, slider, toggle button, and radio buttons that can be interacted with, along with some non-interactive elements. This UI implementation is used in other samples in the Unity Sample Framework.

Here are brief descriptions of the key prefabs and other Game Objects that make the debug UI in this scene work. These are all described in further detail later in this topic.

  • CanvasWithDebug prefab – This prefab contains everything needed to define a World Space debug UI like the one in this scene.
  • SampleSupport Game Object – This object defines the debug UI in the sample scene using the tools provided by CanvasWithDebug.

CanvasWithDebug Prefab

The CanvasWithDebug prefab contains Unity World Space canvas components and objects as well as the DebugUIBuilder script, which includes methods to add UI elements to panes on the canvas. The implementation of the UI is defined by a separate script on the SampleSupport object.

SampleSupport Game Object

This object contains only the DebugUISample script that defines the UI using the methods from the DebugUIBuilder script. This script can be named anything and placed on any Game Object aside from the CanvasWithDebug prefab.