> For the complete documentation index, see [llms.txt](https://kdoore.gitbook.io/cs2335/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kdoore.gitbook.io/cs2335/project-2-dialog/simple-dialog-prefab.md).

# 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

![](https://3353821304-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M04eWSVrF1dPNoG3KOs%2F-M04eY8N7DdhNt1OnIkz%2FScreen%20Shot%202019-03-06%20at%202.27.16%20PM.png?generation=1581716767038259\&alt=media) ![](https://3353821304-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M04eWSVrF1dPNoG3KOs%2F-M04eY8PyZFtKuu9fcP-%2FScreen%20Shot%202019-03-06%20at%202.32.44%20PM.png?generation=1581716767712498\&alt=media)

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].

```java
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.&#x20;

![](https://3353821304-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-MK_GrhxfgD8uVcZMJbT%2F-MK_HvVVMNVfL00UuIY3%2FScreen%20Shot%202020-10-26%20at%209.23.16%20AM.png?alt=media\&token=a223e526-25e6-4281-be53-fee2a5725ea9)

\
After creating the [SimpleDialog.cs](/cs2335/project-2-dialog/simpledialog.cs.md) script:&#x20;

Open the prefab to edit: \
1\. Add a CanvasGroup component\
2\. Make a Duplicate of the prefab before adding the SimpleDialog Script, \
&#x20;     *We can use this for the 2nd version which will use the DialogManager.cs script.* \
&#x20;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. &#x20;

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

**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.

##