Simple DialogPrefab

Simple Dialog Prefab

How can we create a simple dialogue system in Unity? We should try to make something that will work as a prefab, We want to use it in any scene, as many times as we'd like, so we need to be able to add custom dialogue for each unique conversation.

• We need to include

  • UI-panel as a container with a CanvasGroup component so we can toggle it's visibility

  • UI-Text, a child of the UI-panel, this will display the text

  • UI-Button, a child of the UI-panel, this will allow us to advance through the dialog items

  • A custom script component- attached to the UI-Panel

    will have logic for the dialog system.

  • Script must use a public List of strings that can be populated in the inspector, with new dialog each time the panel-prefab is used.

Create Simple DialogPrefab

Hierarchy - Nested GameObjects

The image below shows the Hierarchy panel structure of these gameObjects. The SimpleDialog.cs script is attached to the top-level panel object: DialogPrefab. The panel must also have a CanvasGroup component attached. To add a CanvasGroup component, in the Inspector panel: Add Component>Layout > CanvasGroup

The DialogText is anchored to 4 corners of its' parent, the DialogPanel. The NextButton is anchored to the bottom corner of the panel (not shown here).

Prefab: You will create a Prefab of this after adding and configuring the SimpleDialog script component.

Important - Order The Text Elements As Children 1,2,3:

• Make sure that the DialogText is the first child of the DialogPanel, and that the NextButton is below the DialogText in the Hierarchy Panel. Notice that the NextButton has a child that is a Text gameObject: it is the 2nd child Text element of the main panel when we use the method below, it is textChildren[1].

Text[] textChildren = GetComponentsInChildren<Text>();
        dialogText = textChildren[0]; //first child Text
        speakerText = textChildren[2]; //3rd child Text

• Note: the SpeakerName is the 3rd child Text element of the main panel: DialogPrefab.

• In the code snippet above, note that we're finding the DialogText, and the SpeakerText components since it's the first (and third) children objects of the SimpleDialogPanel that has a Text component. Since these are returned as an array, note first textChildren has index 0, third textChildren has index 2.

DialogPanel Logic - Attaching SimpleDialog.cs

The image below shows part of the Inspector panel for the DialogPrefab.

After creating the SimpleDialog.cs script:

Open the prefab to edit: 1. Add a CanvasGroup component 2. Make a Duplicate of the prefab before adding the SimpleDialog Script, We can use this for the 2nd version which will use the DialogManager.cs script. 3. Add the SimpleDialog.cs script component. The SimpleDialog script has a List<ConversationEntry> displayed as Conversations. Expand Conversations to show the property size, change this to a non-zero value to have the ConversationList items displayed. Each Conversations element can hold some DialogTxt, SpeakerName, which will be displayed sequentially when the scene is played.

I recommend to create actual dialog in a word or excel document and then pasted into the

Note: The SimpleDialog.cs script does not use the SpeakerImg sprite, it'll be used in the DialogManager.cs where the prefab will include sprites that update with each displayed conversationEntry.