Update Log
Update Log
Update 1.4 - 29.01.23
Version 1.4
First update of 2023! Wooooo 
Additions
Pauses in dialogue
Hovering over a dialogue connection will show a number indication the amount of time the dialogue will wait before progressing to the next node. You can change this by clicking and dragging left or right to increase or decrease the time.
Creating your own presets
You can now make your own presets! In the Presets section of the Market, click the plus button to create a preset out of one of your created dialogues.
Changes
- Monotonous Colours setting now applies to whole plugin instead of just the dialogue editors
Update 1.3 - 18.12.22
Version 1.3
Additions
Market
Added Market where users can find presets with premade dialogue which they can edit. There is only one for now, but I plan to add more in future updates.
The plugin now alerts you when a new version is available.
Changes
New Dialogue Creation UI
The UI for creating dialogue has been revamped and looks cleaner than ever! You now also have the choice to create dialogue from a preset.
Old New
HUGE Navigation Changes
In previous versions, the main menu, Script Importer and Dialogue Edit windows were all separate. Now all windows (except the node editor) have been combined into one and to navigate through them you can either swipe or scroll on the title bar.
- Made UI colours more consistent.
- You now switch themes in the Market instead of main menu.
- Added more themes which can be accessed in the Market.
Fixes
- Fixed nodes being given the same name when created.
- Fixed node connection lines bugging out.
Update 1.2.2 - 14.10.22
Version 1.2.2
Fixes
- Fixed error when disabling Click To Advance on Display nodes
Update 1.2.1 - 1.09.22
Version 1.2.1
Fixes
- Fixed bug causing context menu not to open
- Fixed line gradients being flipped
Update 1.2 - 31.08.22
Version 1.2
Additions
- Creating a node in the Create Node menu will now place the node at the center of the window
- Right Clicking on empty space in the Node Editor will now open a context menu with tools such as creating a node at the mouse’s current position, toggling snap, toggling the grid and centering the editor.
- Right Clicking on a node will now show a context menu where you can create a new node that will be connected to the selected node or delete the node selected.
- Clicking and dragging on empty space in the node editor will enable you to select multiple nodes and move or delete them all at the same time
Changes
- Corner radii of most UI has been reduced
- Node UI has been changed slightly - rounded edges removed and colour outlines the whole node.
- Editing the name of a node now requires you to double click the node instead of clicking its title.
- Lines showing connection of nodes havebeen made slightly thinner
Update 1.1 - 29.08.22
Additions
- Added Light Mode
- Changed UI to fit in more with Studio
- Changed UI so it scales properly
- Added ability to retrieve properties of Instances in game through Variables
- Simplified Setting Names
Version History
If you want to use an older version, or edit the plugin, download the desired version here and copy it to the explorer in studio. Then right click it and click Save as Local Plugin. Downloaded versions are for personal use only. Please do not publish ANY version to roblox
Older Versions may contain bugs
Version 1.4 -
ChatterBlox Plugin.rbxmx (2.5 MB) (Latest Version)
Version 1.3.1 - ChatterBlox Plugin v1.3.1.rbxmx (2.4 MB)
Version 1.3 - ChatterBlox Plugin v1.3.rbxmx (2.4 MB)
Versioin 1.2.2 - ChatterBlox v1.2.2.rbxmx (1.3 MB)
Version 1.2.1 - ChatterBlox v1.2.1.rbxmx (1.3 MB)
Version 1.2 - ChatterBlox v1.2.rbxmx (1.3 MB)
Version 1.1 - Chatterblox v1.1.rbxm (118.8 KB)
Version 1.0 - Chatterblox v1.0.rbxm (113.7 KB)
Hello! I’ve been working on a nifty little plugin for the past few weeks and
after hours of fixing bug after bug, (I hope) it’s finally ready for release! Chatterblox makes dialogue creation so easy, even a baby could do it! Here’s an example of what you can make with this plugin:
I made it with this dialogue simple tree:
I hope you can put this plugin to good use! 
Section |
Description |
|---|---|
| The Basics | Information on creating dialogue, removing dialogue and n avigating the editor |
| Modifying Dialogue | Information on editing dialogue and using the Node Editor |
| Importing Dialogue | How to add the dialogue to your game. |
Section |
Description |
|---|---|
| Creating Dialogue | How to create dialogue |
| Editing Dialogue | How to open and navigate through the dialogue editor window |
| Deleting Dialogue | How to delete dialogue |
To create dialogue all you have to do is click the 
Create button in the top right of the main window. When clicked, a window that looks like this will show up
Back to Basics
Once you’ve created dialogue to edit it click the 
Edit Button to edit it. Clicking it will open up the edit window in which you can modify its settings and the dialogue tree.
Different Settings are located in different tabs. To view all the Tabs, click the 
Tab Selector button. This will open the Tab Selector Sidebar whith a series of buttons
- Collapse Sidebar
- Open Dialogue Tab
- Open Appearance Tab
- Open Advanced Tab
- Colour Selector Tab (Can only be opened when editing a setting with the type Color3)
- Instance Search Tab (Can only be opened when editing a setting that requires an Instance)
Back to Basics
To delete dialogue, click the 
Delete Button. A window will pop up asking to confirm the deletion. Click Delete to confirm. Do not manually delete the dialogue in the ReplicatedStorage or the plugin may error.
Back to Basics
Section |
Description |
|---|---|
| Appearance Settings | Explanation of all the settings in the Appearance Tab |
| Advanced Settings | Explanation of all the settings in the Advanced Tab |
| Node Editor | How to use the Node Editor |
Appearance Settings control how the dialogue looks.
Setting |
Type |
Description |
|---|---|---|
| Background Colour | Color3 | The Background Colour of the dialogue frame (Will be ignored if Overwrite Appearance Settings is set to true) |
| Text Colour | Color3 | The Text Colour of the dialogue text and response text (Will be ignored if Overwrite Appearance Settings is set to true) |
| NPC Model | Model | The Model that will be shown in the NPCPic ViewportFrame |
| Speed | Number | The Speed at which dialogue text will be shown |
| Title | String | The text that will be shown in the Title TextLabel (Will be ignored if NPC Model is set) |
Back to Contents
The Background Colour setting will determine the BackgroundColor property of the MessageFrame Frame and Response TextButton
In the example above, Background Colour is set to 205, 225, 255
The Text Colour Setting will determine the TextColor property of the Title TextLabel, MessageText TextLabel and OText TextLabel (found in the Response TextButton)
In the example above, Text Colour is set to 106, 106, 106
The NPC Model setting will determine the Model shown in the NPCPic ViewportFrame and the Text property of the Title TextLabel
In the example above, NPC Model is set to an NPC named “Hotdog Man”
The Speed setting will determine the speed at which characters are show in the MessageText TextLabel
In the example above, Speed is set to 100
---
The Title setting will determine the Text shown in the Title TextLabel if the NPC Model setting is setting is not set.
In the example above, Title is set to “Hotdog Man”
Advanced Settings control more advanced features like characters that the dialogue will pause on.
Setting |
Type |
Description |
|---|---|---|
| Background Gradient Colour 1 | Color3 | The first colour in the UIGradient’s ColorSequence (found in MessageFrame) |
| Background Gradient Colour 2 | Color3 | The second colour in the UIGradient’s ColorSequence (found in MessageFrame) |
| Pause Characters | String | Characters that the dialogue will pause on when reached |
| Pause Wait | Number | The time, in seconds, that the dialogue will pause when reaching a Pause Character |
| Overwrite Appearance Settings | Boolean | If set to true, The settings Background Gradient Colour 1, Background Gradient Colour 2, Background Colour, Text Colour and Title will be ignored. |
| Advanced UI Edit | None | Manually edit the dialogue UI |
Back to Contents
The Background Gradient Colour 1 will determine the first colour in the UIGradient’s ColorSequence (found in MessageFrame)
In the example above, Background Gradient Colour 1 is set to 0, 170, 255
The Background Gradient Colour 2 will determine the second colour in the UIGradient’s ColorSequence (found in MessageFrame)
In the example above, Background Gradient Colour 2 is set to 0, 170, 255
The Pause Characters Setting will determine the characters that the dialogue will pause at when reached
In the example above, Pause Characters is set to “!?.,”
The Pause Wait Setting will determine how long, in seconds, the dialogue will wait when reaching a pause character.
In the example above, Pause Wait is set to 0.87
If Overwrite Appearance Settings is set to true, the Settings Title, Background Gradient Colour 1 & 2, Background Colour and Text Colour will be ignored, enabling advanced UI customisation.
Clicking the Edit Button in this setting will open the advanced UI editor in the 3D Viewport. Here you can customise the dialogue UI to your liking. The Overwrite Appearance Settings setting must be set to true or most changes will be ignored.
Back to Contents
Section |
Description |
|---|---|
| Navigation | How to navigate the Node Editor |
| Tools | Explanation of the different tools in the node editor. |
| Nodes | Creating and modifying nodes |
To open the Node Editor, open the 
Dialogue Tab and click the Edit Button next to the Dialogue Tree text. When you open the editor, a window looking like this will show up:
To pan the editor, hold the middle mouse button and move the cursor. To zoom, scroll up or down with the scroll wheel.
To view the editor’s tools, click the 
Tools button. When clicked, a tools frame will appear that looks like this:
Toggle Snapping
Hide/Show Grid
Zoom
Editor Position
The editor uses different nodes as a visual representation of dialogue. To create a node, click the Create Node button in the top right of the editor window. This will open a drop down window where you can select a node to create.
Name |
Description |
|---|---|
| Root | Starts the dialogue |
| Display | Shows text to the player |
| Response | Shows the player a response choice |
| Split | Selects a certain node to advance to with a condition |
| Action | Runs a script either on the server on on the client. |
| Close | Triggers a closing animation |
A root node triggers an opening animation and starts the dialogue. If a prompt is set, it will also show text to the player similar to the Display node. If no prompt is set, it will skip to the next node. If click to advance is set to true, after text is show to the player, an arrow at the bottom of the MessageFrame will show and the player must click before the dialogue advances to the next node.
A display node will show text to the player. If click to advance is set to true, after text is show to the player, an arrow at the bottom of the MessageFrame will show and the player must click before the dialogue advances to the next node.
In the text of Display and Root nodes, you can use Variables, which are references to different Instances and properties. To start a variable, while editing the Text of Dialogue Node, type <var>. Then type what you want to get from the game. For example, if I wanted to get the name of the player, I would write game.Players.LocalPlayer.Name. To end a variable, type </var>. Currently you can only retrieve the Names of instances or a child of an instance but I plan to add support for math and string libraries and also add support for methods like GetChildren() and FindFirstChild()
A response node will show the player a response choice with text that they can click to advance to the nodes connected to it.
A split node will select the next node to advanced to based on a condition. For example, if the player has enough coins for a hotdog, go to the node with the ID 1 (takeCoins), else go to the node with the ID 2 (Display) When connecting a node to a split node, a TextLabel with the node’s ID will show.
(Client-Sided)
In the condition script, to tell the dialogue which node to go to, fire the SplitRecieve Event in the DialogueContainer inside the ReplicatedStorage with the ID of the node you want the dialogue to go to and the name of the split node (found in the Name attribute in the script). For example, if I wanted the node to go to the takeCoins node, I would write this:
game.ReplicatedStorage.DialogueContainer.SplitRecieve:Fire(1,script:GetAttribute('Name'))
But if I wanted the dialogue to go to the Display node, I would write this:
game.ReplicatedStorage.DialogueContainer.SplitRecieve:Fire(2,script:GetAttribute('Name'))
(Server-Sided)
If the Split node is on the server, to tell the dialogue which node to go to, fire the SplitServer Event in the DialogueContainer in the ReplicatedStorage with the player, the ID of the node you want to go to and the name of the split node (found in the Name attribute in the script). For example, if I wanted the dialogue to go to the takeCoins node, I would write this:
game.ReplicatedStorage.DialogueContainer.SplitServer:FireClient(player,1,script:GetAttribute('Name'))
But if I wanted the dialogue to go to the Display node, I would write this:
game.ReplicatedStorage.DialogueContainer.SplitServer:FireClient(player,2,script:GetAttribute('Name'))
The action node will run the code in a script. If Server is set to true, it will run the code on the server. If it’s set to false, it will run the code on the client.
The close node will trigger a closing animation and close the dialogue UI. Nodes can still be connected to it but Response and Display nodes won’t work.
Once you’ve fiddled with the settings and added some dialogue in the editor, you can add it to your game with the Script Importer. It will look like this:
It will show all the dialogues that you’ve created. To import the dialogue scripts, click the green Import Button. If Import To Selection is set to true, it will import the scripts to whatever you’ve selected. If Import To Selection is set to false, the scripts will be put in a new ScreenGui in the StarterGui. To start the dialogue that you’ve created, in the DialogueClient script, write startDialogue().
