NGUI Dialogue UI

Table of Contents

Script reference: PixelCrushers.DialogueSystem.NGUI.NGUIDialogueUI

To use NGUI in the Dialogue System, import the package Third Party Support/NGUI 3.x Support.

The NGUI Dialogue UI works in much the same manner as the Unity Dialogue UI. The major difference is that you create your UI layout using NGUI's tools rather than creating Unity GUI controls.

How to Use NGUI Dialogue UI Prefabs

You can assign the Dialogue UI in the Dialogue Manager's Display Settings from a choice of prefabs in the NGUI Prefabs folder.

You can also add an instance of a prefab to your scene and customize it further using NGUI's tools.

If you do customize a prefab, assign the instance in the scene to the Dialogue Manager's Display Settings, or save it as another prefab.

How to Create a Custom Layout

To create your own layout:

  1. Create a GameObject with an NGUI Dialogue UI component by selecting Component > Dialogue System > UI > NGUI > Dialogue UI.
  2. Create your NGUI interface as a child of the NGUI Dialogue UI GameObject – that is, place a UIRoot directly underneath the GameObject.
  3. Assign an NGUI Response Button component ((Component > Dialogue System > UI > NGUI > Response Button)) to each response button. Then assign the component's Ngui Button and Ngui Label properties. Make sure the button's Box Collider is enabled.
  • In the NGUI Dialogue UI component, assign the UI control properties. At a minimum, you must assign these controls:
    • UI Root
    • Dialogue Panel
    • NPC Subtitle Line
    • PC Subtitle Line (if you will be showing NPC subtitles)
    • One or more Response Menu Buttons
    • Alert Line
  • If you're going to require the player to choose a response before a timer runs out, also add an NGUI UISlider for the timer control, and set the timer property in the Dialogue Manager's Display Settings.
  • Alerts can have, in addition to the alert line, an optional parent panel that can contain any other controls that you want to show, including an optional continue/close button. If you add a panel or continue button, make sure to add them to the corresponding NGUIDialogueUI properties.
  • If you want to add continue buttons to require the player to click past subtitles and/or alert messages, read the Continue Button section. Remember to point the button's handler to the dialogue UI, and select the OnContinue method.

Continue Button

To add continue buttons:

  1. On the Dialogue Manager GameObject, set Subtitle Settings > Continue Button to Always.
  2. Add continue button(s) to your dialogue UI.
  3. Assign the button(s) to the NGUI Dialogue UI component
  4. Point the button's handler to the NGUI Dialogue UI component, and select the OnContinue method.
  5. If you you're using the typewriter effect and continue buttons, you may want the continue button to only skip the effect forward if the effect is still typing. And, if the effect is done, the continue button should behave normally by progressing to the next stage of the conversation. To do this, add an NGUI Continue Button Fast Forward component. Assign the dialogue UI and the typewriter effect to the component, and change the continue button's OnClick event to call the component's OnFastForward method.

Text Field UI

If you want to prompt the player for text input during conversations, you need to create a GameObject containing a component with an NGUITextFieldUI.

Here's the step-by-step:

  1. Somewhere in your dialogue UI GameObject hierarchy, create an empty child GameObject named "Text Field UI". This object should be a child of the dialogue UI hierarchy, although it doesn't need to be a direct child of the root NGUIDialogueUI GameObject. It must be active.
  2. Add NGUITextFieldUI.cs to this GameObject.
  3. Create an NGUI panel as a child GameObject.
  4. (Optional) Create an NGUI UILabel as a child of the panel.
  5. Create an NGUI text input field as a child of the panel. Add an OnSubmit entry, assign the "Text Field UI" GameObject to the Notify field, and select the method NGUITextFieldUI/AcceptTextInput as shown below:
  1. Select the "Text Field UI" GameObject.
  2. Assign the NGUI panel to the Panel field. Assign the UILabel to the Label field. Assign the text input field to the Text Field field.
  3. (Optional) You can add other NGUI elements as children of the panel, too, to make it look the way you want. You can also add Accept and Cancel buttons. If you add these buttons, set their OnClick handlers to call NGUITextFieldUI/AcceptTextInput and CancelTextInput respectively.
  4. (Optional) Deactivate the NGUI panel GameObject. The NGUITextFieldUI script will automatically do this at start, so you can skip this step if you want.

See the example scene Third Party Support/NGUI/Example/Feature Demo Using NGUI with Text Input.

In your dialogue entry's Sequence field, use this command:

TextInput(Text Field UI, label, variable)

where "label" is the label text to assign to the UILabel, and "variable" is the name of the variable to store the user's input in.

Remember that the Dialogue System evaluates links before running sequences. If you want to immediately act on the value that the user entered, you need to add a dummy node between the TextInput() node and the node that has the conditions.

<< NGUI