-INTRODUCTION
Hello, fellow devs!
For some time now I’ve been wanting to get my hands on an advanced dialogue system that is supported by a solid dialogue tree editor. After some research I came across Roblox’s official dialogue system and its editor. While it looked promising it seemed to miss a few features I was looking for. After that I found nothing that would come close to what I was envisioning, so I decided to make my own. After some planning, me and my friend @iiPotatoFlamesii set out to create our own dialogue system and an editor for it for us to use in our own games.
Introducing a brand new dialogue system and dialogue tree editor plugin!
We wanted to create an advanced dialogue system with lots of features, such as locking certain responses behind certain dialogue paths or even scripting your own conditions for different dialogue options. We also wanted to keep the systems user-friendly with a clean UI in the editor and a straightforward structure in the workspace.
Here is a quick look inside the editor:
The editor’s one and only purpose is to manage the dialogues inside the workspace. The dialogue system itself does the rest. You can of course write your own system or edit the existing system if you want.
-DEMONSTRATION
In this demonstration I create a simple in concept but complex in structure shop dialogue. Have a look:
And now let’s see it in action:
-HOW TO USE
After the installation of the plugin you will see two new buttons: “Dialogue Tree Editor” which opens the editor and “Install Scripts” which installs the pre-made dialogue handler into your game. The installation inserts the dialogue gui inside StarterGui and a remote event into ReplicatedStorage. This editor can be used as the main dialogue system for a game but it is recommended to modify it to fit your needs.
To trigger a dialogue, simply fire the RemoteEvent installed into ReplicatedStorage by the plugin to a client and as an argument send a dialogue configuration folder. The RemoteEvent does not have to be a direct child of ReplicatedStorage, so it can be placed inside folders or other instances as well. Here’s an example of that:
Inside the editor you find 2 main buttons which are: “New Dialogue” and “Close”. And those two do exactly as they say.
After clicking “New Dialogue” a new configuration folder is placed into the workspace. This configuration folder is where the current dialogue you’re editing is stored. Inside this configuration folder is a custom attribute called “Speaker”. This name is displayed to the player inside the Gui. This value can also be changed via script using Instance:SetAttribute(“Speaker”,“NameGoesHere”)
Each new dialogue comes with an InitialPrompt like this:
From here you can start branching out your dialogue by pressing the + icon on the top right corner of the InitialPrompt node. This opens up a new menu with 5 different options.
The first one is a simple prompt. A prompt’s job is to display a wall of text to the player. By clicking the “Edit Text” button a new widget pops up where you can edit the text in real time. This changes the corresponding StringValue’s value that sits inside the configuration folder under its parent node.
The next one is a response. Responses are used to give players a path choice in dialogue. These also have the “Edit Text” button that works similarly to the prompt’s button.
The one after response is the Redirect node. Redirects are used to redirect the dialogue to another point. For example, if you wanted to go straight to the beginning from the end you can simply redirect the dialogue back there.
Example of a redirection:
The next node is called a Lock. Locks are used to lock behind single nodes or response paths. The green “TRUE” text tells you if the lock is currently locked or not. If it’s true, the lock is locked, otherwise it’s unlocked. The key connection is the key to opening the lock. When the dialogue reaches the key node the lock is toggled on or off. Locks can also be toggled inside the editor.
Example of a Lock node being used:
And last but not least, the Condition node. These nodes are used to create your own custom conditions for dialogue. Inside the node is a “Edit Condition” button which opens up a module script inside the corresponding ObjectValue within the configuration folder. Inside you can edit the condition however you see fit. the “If” connection happens if the condition returns true, otherwise it follows the “Else” path. Perhaps you want the player to have a certain amount of gold? Or maybe the player must know of something to unlock a certain dialogue path? This node can also be used to run any code you want. So you can also think of it as a command node in that sense. I might add a separate command node later down the line but for now this will hold its place.
And those are pretty much the basics to all the available nodes! There is a lot you can do with all of them and they aren’t just limited to a single function. All their functions are handled inside the pre-made DialogueHandler script, so if you feel like something isn’t working like you want, then feel free to edit the code as you like.
The system also supports both Remote- and BindableFunctions. Simply place one of them inside a node’s corresponding workspace value and the built-in dialogue handler will fire them if it reaches them. The remotes can also be named whatever.
This system has been in development for about 2 weeks now and it still has some bugs and issues. Though most of them are visual issues within the editor, we would still like to get all of them fixed in the near future. So if you happen to run into any issues with the editor or the pre-made system please report them on this thread!
Both me and Potato contributed greatly to the plugin. I took care of the UI and most of the main functions of the plugin while Potato took care of the general plugin management and the rest of the functions.
You can find my other plugins here:
That is all.
Thank you! : )
-UPDATES
Update #1, 22.5.2021
-
Quality of life improvements
-
Editor now looks more consistent between all screen sizes
-
Added node type as an attribute to all workspace values (Allows you to rename nodes as you see fit without causing issues. Old dialogues will automatically be converted to work with the new system.)
-
New logo
Update #2, 27.5.2021
-
Built-in dialogue system now uses Roblox’s “MaxVisibleGraphemes” feature instead of a custom module.
-
Created an icon for installing scripts so you don’t get confused about which is which.
-
A better logo once again
Update #3 27.5.2021
-
You can now end dialogues with all of the node types with the built-in dialogue system.
-
Improved the consistency of text size within the built-in dialogue system.
