Dialogue Editor by ThiebautAlexis - 3

Extensions

A Nodal Dialogue Editor for Unity.

Unknown VersionUnknown LicenseUpdated 6 days agoCreated on December 15th, 2019
Go to source

A Nodal Dialogues Editor For Unity Engine!

Dialogue Editor Image

Contact me at thiebautalexis01@gmail.com if you want to report a bug or give me feedbacks! 😃

Version Française

English Version

[FR]

Bonjour Ă  tous! J’ai crĂ©Ă© un outil d’édition de dialogues inspirĂ© de cette confĂ©rence animĂ©e par Anna Kipnis de Double Fine Productions Ă  la GDC 2015. Il est fortement recommandĂ© de la regarder puisque j’utilise beaucoup de mĂ©canismes prĂ©sentĂ©s dans cette confĂ©rence (et en plus, elle est trĂšs intĂ©ressante!).

Dialogue Systems in Double Fine Games

Passons maintenant aux choses sérieuses!

Avant tout pour commencer, comment ouvrir la fenĂȘtre d’édition des dialogues ? Simplement, vous pouvez trouver dans le menu dĂ©roulant sous Window une section “Dialogue Editor” et en cliquant sur Open Editor vous ouvrirez donc la fenĂȘtre d’édition de dialogues.

WindowMenuImage

I. Créer un Dialogue Asset

Une fois sur la fenĂȘtre d’édition de dialogues, vous pouvez faire un clic droit pour ouvrir un menu qui vous proposera deux options: crĂ©er ou ouvrir un dialogue. Nous allons donc en crĂ©er un.

CreateDialogImage

CreateDialogWindow

Ici, vous avez donc deux champs Ă  remplir:

Dialogue Name : Ceci sera le nom de votre dialogue, vous pourrez le retrouver dans le dossier Assets/DialoguesDatas/Dialogues.

Spreadsheet ID: Ici vous devrez renseigner l’ID de partage de votre Google Sheets. Vous pouvez le trouver en cliquant sur le bouton “Partager” en haut à droite de votre feuille de dialogues. Vous copierez donc un lien de cette forme https:/docs.google.com/spreadsheets/d/[spreadsheet_ID]/edit?usp=sharing et c’est cet ID qu’il faudra coller dans le champ Spreadsheet ID.

Puis en cliquant sur le bouton “Create Dialogue And Load Spreadsheet” vous allez donc crĂ©er un Dialogue Asset et tĂ©lĂ©charger le fichier TSV de votre spreadsheet sur votre ordinateur. Si vous avez apportĂ© des modifications Ă  votre spreadsheet, vous pouvez la mettre Ă  jour en faisant un clic droit et en cliquant sur “Update Spreadsheet”.

[Concernant la Spreadsheet]: La spreadsheet doit ĂȘtre sous cette forme afin de fonctionner avec cet outil.

SpreadsheetImage

Vous pouvez ensuite ajouter autant de langues que vous le souhaitez, mais il faut que cela reste sous cette forme avec les IDs, suivi des lignes de dialogues rangées en fonctions de chaque clé de localisation.

II. Ajouter des nƓuds à votre dialogue.

Maintenant que votre dialogue est crĂ©Ă©, vous pouvez dĂ©sormais commencer Ă  l’éditer. Pour cela vous pouvez crĂ©er des nƓuds en faisant un clic droit, il en existe 4 sortes:

  1. Starting Node:

StartingNode

Le Start Node est utilisĂ© pour savoir oĂč le dialogue va commencer, il est prĂ©sent par dĂ©faut et ne peut pas ĂȘtre supprimĂ©. Vous pouvez ajouter des sorties Ă  ce nƓud en ajoutant des entrĂ©es Ă  l’enum DialogStarterEnum dans le script EnumHolder.cs.

StartingNodeEnum

Vous pourrez ensuite prĂ©ciser vers quels nƓuds poursuivre en fonction de l’enum choisi au moment de la lecture du dialogue (Cette partie sera expliquĂ©e plus en dĂ©tail plus tard)

  1. Basic Node:

BasicNode_1 BasicNode_2

Le Basic Node est le nƓud de base des dialogues, il peut prendre une ou plusieurs lignes de dialogues. Chaque ligne de dialogue possùde plusieurs paramùtres:

  • Line ID: La clĂ© d’identification de la ligne dans la spreadsheet du dialogue. Elle sera utilisĂ©e pour retrouver le contenu de la ligne de dialogue, et ce en fonction du langage sĂ©lectionnĂ© dans les options.
  • Inital Waiting Time: Le temps d’affichage de la ligne de dialogue Ă  l’écran. Si il y a un AudioClip liĂ© Ă  cette ligne de dialogue, ce temps d’affichage sera Ă©gal Ă  la durĂ©e de l’audio clip, sinon il sera Ă©gal Ă  la durĂ©e prĂ©cisĂ©e dans ce champ.
  • Extra Waiting Type: Il s’agit de type d’attente qui sera exĂ©cutĂ© aprĂšs le temps d’affichage de la ligne. Il peut s’agir d’un temps d’attente, l’attente d’un input par le joueur ou alors ne rien attendre.

En plus de cela, le Basic Node a lui aussi des paramĂštres:

  • Un premier pour choisir s’il doit jouer tout le set de lignes de dialogues ou seulement une seule.
  • Un second pour choisir s’il doit jouer son set de lignes de dialogues alĂ©atoirement ou sĂ©quentiellement.
  1. Answer Node:

L’Answer Node est une variante du Basic Node, on peut l’ajouter en faisant un clic droit sur un Basic Node ou en cliquant sur l’icîne en haut à droite du nƓud. Ensuite on a ce menu qui nous permet d’effectuer la conversion.

AnswerNode_1

Une fois converti, on obtient un nƓud qui prend cette forme:

AnswerNode_2

On a donc un nƓud qui a plusieurs sorties qui peuvent nous diriger vers d’autres nƓuds dans ce dialogue. De la mĂȘme maniĂšre que le Basic Node, on peut choisir quelles seront les lignes de dialogues affichĂ©es en sĂ©lectionnant les IDs des lignes de dialogues correspondantes. Le joueur aura donc le choix de cliquer sur l’une des lignes de dialogues proposĂ©es, nous verrons son fonctionnement dans une partie ultĂ©rieure.

  1. Condition Node

ConditionNode

Le dernier type de nƓud est un Condition Node, il permet de vĂ©rifier une condition et de continuer la lecture d’un dialogue vers un certain nƓud si la condition est vĂ©rifiĂ©e et vers un autre si elle ne l’est pas. Ces conditions sont Ă©crites en LUA et sont dĂ©finies dans les Settings du Dialogue Editor, nous y reviendront juste aprĂšs. L’écriture de conditions en LUA est diffĂ©rente de l’écriture en C#:

  • “==” signifie l’égalitĂ© (comme en C#).
  • “~=” signifie la diffĂ©rence (!= en C#).
  • “and” est l’opĂ©rateur logique && en C#.
  • “or” est l’opĂ©rateur logique || en C#.

L’utilisateur a la possibilitĂ© d’écrire lui mĂȘme ses conditions en LUA en effectuant un clic droit sur le nƓud ou en appuyant sur l’icĂŽne en haut Ă  droite pour ouvrir un menu contextuel. SwitchToLUA

Il pourra donc ensuite Ă©diter ses conditions directement en LUA (ATTENTION: la dĂ©claration du est faite automatiquement, il n’est pas nĂ©cessaire de la faire lors de l’édition du code en LUA).

image-20200302140001794

III. RĂ©gler les settings de l’éditeur de dialogues.

Pour ouvrir la fenĂȘtre d’édition des settings, il suffit d’aller de nouveau dans le menu dĂ©roulant sous Window, puis dans la section Dialogue Editor puis dans Edit Settings.

WindowMenuImage

Cela ouvrira une fenĂȘtre comme celle-ci:

Settings

  1. Conditions

    Dans cette premiĂšre partie, vous pouvez entrer toutes les conditions utilisĂ©es par votre Dialogue Editor. Il suffit d’entrer le nom de votre condition dans le champ correspondant, d’appuyer sur le bouton Apply Conditions et de sauvegarder les settings. De plus, pour chaque condition, vous pouvez choisir sa valeur par dĂ©faut grĂące au Toggle qui la suit.

  2. Colors

    Vous pouvez aussi choisir d’appliquer des presets de couleurs pour certains personnages. Puisque l’identifiant de la ligne de dialogue contient les premiĂšres lettres du nom du personnage, nous pouvons les utiliser pour appliquer une couleur sur le TextMesh qui affichera la ligne de dialogue Ă  l’écran.

  3. Localisations Keys

    Les clĂ©s de localisations correspondent aux identifiants utilisĂ©s pour afficher le texte ou jouer les Audioclips avec la bonne langue. Les clĂ©s de localisations du texte correspondent aux identifiants que vous avez choisi de mettre dans votre spreadsheet. De mĂȘme pour les AudioClips, la clĂ© de localisation correspondra au suffixe que vous appliquerez Ă  votre asset en fonction de la langue dans laquelle il se trouve.

IV. Le Runtime

  1. Dialogue Reader

DialogueReader

Le script DialogueReader permet de lire un dialogue grùce à la méthode

StartDisplayingDialogue();

qui permet de lire tous les nƓuds de dialogue partants de la sortie Default du Start Node. Cette mĂ©thode possĂšde une surcharge qui permet de prĂ©ciser avec quel enum il faut commencer Ă  lire le dialogue.

StartDisplayingDialogue(DialogStarterEnum _starter);

Pour lire un dialogue en particulier, il suffit de sĂ©lectionner le dialogue correspondant dans le champ “Displayed Dialogue”.

Dans les champs suivants on peut rĂ©gler des paramĂštres concernant l’affichage du texte:

  • On peut ainsi choisir quel TextMesh va afficher nos lignes de dialogue.
  • On peut ensuite choisir quel police sera utilisĂ©e, mais aussi sa taille et sa couleur.

Et pour finir on peut choisir quel sera l’audio source qui Ă©mettra les sons relatifs aux lignes de dialogue.

  1. Dialogue Event Handler

DialogueEventHandler

Le Dialogue Event Handler, lorsqu’il est reliĂ© Ă  un Dialogue Reader, permet d’appeler des Unity Events et de changer la valeur des conditions lorsqu’une ligne de dialogue est lue. En sĂ©lectionnant la clĂ© d’activation, qui correspond Ă  l’ID de la ligne de dialogue jouĂ©e, on peut donc appeler les Unity Events reliĂ©s Ă  celle-ci. Un Dialogue Event Handler peut stocker plusieurs Events Ă  appeler en fonction de diffĂ©rentes clĂ©s.

-----------------------------------------------------------------------------------------------------------------------------------------

[EN]

Hello everyone! I made a dialogues editing tool inspired by this lecture presented by Anna Kipnis from Double Fine Productions at GDC 2015. I highly recommend to watch it because I use many features from this lecture (And it’s really cool and interesting!)

Dialogue Systems in Double Fine Games

Let’s begin!

First of all, How to open the editing dialogues window? It’s preatty easy actually, you can find a “Dialogue Editor” section below the Window drop down menu. If you click on “Open Editor” it will open the Window to create and edit your dialogues.

WindowMenuImage

I.Create a Dialogue Asset

Once the Editing Window opened, you can right click to open a new menu that will show you two options: Open or create a new dialogue. Let’s create a new one!

CreateDialogImage

CreateDialogWindow

Here, you have two fields to fill.

Dialogue Name : This will be the name of your dialogue. It will be saved in Assets/DialoguesDatas/Dialogues.

Spreadsheet ID: Here you have to write the sharing ID of your Google Sheets. You can find it by clicking on the “Share” Button in the top left of your spreadsheet. You’ll copy a link that looks like this one: https:/docs.google.com/spreadsheets/d/[spreadsheet_ID]/edit?usp=sharing and You’ll have to paste this “spreadsheet_ID” in the Spreadsheet ID field.

Then, when you click on the “Create Dialogue and Load Spreadsheet”, it will create a Dialogue Asset and download the TSV file from your spreadsheet on your computer. If you modified your spreadsheet, you can update it by right clicking and click on “Update Spreadsheet”

[About the Spreadsheet]: The spreadsheet has to be like this one below to works with the Editor

SpreadsheetImage

You can add as much languages as you want, but it has to follow this pattern: First the IDs of the dialogue lines, then the dialogue lines themselves according to the right localisation keys.

II. Add Nodes to the dialogue.

Since your dialogue is created, you can edit it now. When right clicking, you can add new Nodes to your dialogue.

  1. Starting Node:

StartingNode

The Starting Node is used to know where does the dialogue will start. It is automatically created and can’t be removed. You can add Output to this Node by adding entries in the DialogStarterEnum in the script EnumHolder.cs.

StartingNodeEnum

You can choose which nodes to follow according to the selected enum when the dialog is read. (This part will be explained later).

  1. Basic Node:

BasicNode_1 BasicNode_2

The Basic Node is the simplest dialogue node, it can contains several dialogue lines. Each dialogue line has parameters that can be edited.

  • Line ID: This is the identification key of the dialogue line in the spreadsheet of the dialog. It is used to find the right content according to the selected language in the options settings.
  • Inital Waiting Time: This is the displaying time on screen for this dialogue line. If there is a Audioclip linked to this Dialogue, it will be displayed during the length of the AudioClip otherwise, it will be displayed during the Inital Waiting Time.
  • Extra Waiting Type: This is the settings about the waiting time after the dialogue line has been displayed. It can be a delay, an input from the player or nothing.

Moreover, the Basic Node also has parameters

  • A first one to choose if it has to play all the set of dialogue lines or just one of them.
  • A second one to choose if it has to play the dialog set randomly or sequentially.
  1. Answer Node:

The Answer node is a variation of the Basic Node, we can convert it by right clicking on it or by clicking on the top right icon. Then we have this menu to convert it.

AnswerNode_1

Once it had been converted, the node will look like this one below.

AnswerNode_2

So we have a node with multiple outputs that can lead us to another nodes in this dialogue. Like the Basic Node, we can choose which dialogue lines will be displayed by selecting the linked IDs from the spreadsheet. The player will has the choice to click on each dialogue line to continue this dialogue. We’ll see the inner working of this feature later.

  1. Condition Node

ConditionNode

The last node type is the Condition Node, it checks a condition then an reroute the dialogue to a node when the condition is true and to another one when the condition is false. Those conditions are written in LUA and are defined in the Settings of the Dialogue Editor (We’ll look at it just after this part). There is some particularities in the writing of LUA conditions:

  • “==” means equality (like in C#).
  • “~=” means different (!= in C#).
  • “and” is the && logic operator in C#.
  • “or” is the || logic operator in C#.

The user has the possibility to write themself the LUA conditions by right clicking on the node or by clicking on the top left icon to open a context menu and switch to LUA code.

SwitchToLUA

The user will be able to write the LUA conditions in a text area (WARNING: the if statement is made automatically, it is not necessary to write in the LUA code).

image-20200302140001794

III. Adjust settings of the Dialogue Editor.

To open the Dialogue Editor Settings Window, you just has to go back in the Window drop down menu, then int Dialogue Editor and click on the Edit Settings Menu.

WindowMenuImage

It will open a window like this one below:

Settings

  1. Conditions

    In this first part, you can add the conditions used in your Dialogue Editor. You just have to fill the field with the name of your condition, then click on the Add Condition Button and Apply the Conditions. Don’t forget to save the conditions to save them in Unity. For each condition, you can also set its default value in this window.

  2. Colors

    You can also choose to apply color presets on some character’s dialogue lines. Since the dialogue line ID contains the first letters of the character’s name, we can use them to apply a color on the TextMesh that will display the dialog line of a specific character.

  3. Localisation Keys

    Localisation Keys match with the identifiers used to display the dialog lines or playing Audio Clips according to the selected language. The text localisation keys match with the identifiers written in the spreadsheet of your dialogue. And the Audio Localisation Keys match with the postfixes applied to your audio asset according to the selected language.

IV. Le Runtime

  1. Dialogue Reader

DialogueReader

The Dialog Reader Script will allow the user to start reading the dialogue with the method:

StartDisplayingDialogue();

This Methods read all dialogue nodes from the default output of the Starting node. This method is overloaded and takes a DialogStaterEnum as parameter to specify with which enum the dialogue starts.

StartDisplayingDialogue(DialogStarterEnum _starter);

To read a specific dialogue, you have to select this dialogue in the “Displayed Dialogue” field.

The next fields allow the user to adjust text displaying settings such as

  • Which Text Mesh will display the dialogue.
  • The Font used by the Text mesh, its color and its size.

The last field match with the Audio Source that will play the Audio Clips of the dialogue lines.

  1. Dialogue Event Handler

DialogueEventHandler

The Dialogue Event Handler, when it is linked to a Dialogue Reader, allow the user to call Unity Events and to change the conditions values when a dialogue line is read by selecting the activation key matching with the Dialogue Line ID. A Dialogue Event Handler can hold multiple events called by multiple keys.

Show all projects by ThiebautAlexis