ChatterBlox [v1.4] - Create dialogue with ease!

Chatterblox

pluginbutton


Update Log

Update Log

Update 1.4 - 29.01.23

Version 1.4

First update of 2023! Wooooo :partying_face:

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.

image


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.

image

New Settings Window

Added a settings window where you can customise parts of the plugin to your liking.

image

Outdated Plugin Alert

The plugin now alerts you when a new version is available.

image


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
      image                        image


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.

Old
New

image


  • 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

Version 1.1


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

:warning: Older Versions may contain bugs :warning:
Version 1.4 - ChatterBlox Plugin.rbxmx (2.4 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! :happy2:

Table of Contents

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.


The Basics

Back to Contents


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

Creating Dialogue

To create dialogue all you have to do is click the Creat-removebg-preview Create button in the top right of the main window. When clicked, a window that looks like this will show up

image

Enter a name for your dialogue and click Create to create it.

Back to Basics


Editing Dialogue

Once you’ve created dialogue to edit it click the Edit-removebg-preview 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 Open_Tabs-removebg-preview (1) Tab Selector button. This will open the Tab Selector Sidebar whith a series of buttons

Collapse-removebg-preview - Collapse Sidebar
Dialogue-removebg-preview - Open Dialogue Tab
Appearance-removebg-preview - Open Appearance Tab
Advanced-removebg-preview - Open Advanced Tab
Colour-removebg-preview - Colour Selector Tab (Can only be opened when editing a setting with the type Color3)
Search-removebg-preview - Instance Search Tab (Can only be opened when editing a setting that requires an Instance)

Back to Basics


Deleting Dialogue

To delete dialogue, click the Delete-removebg-preview 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




Modifying Dialogue

Back to Contents

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

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



Background Colour

The Background Colour setting will determine the BackgroundColor property of the MessageFrame Frame and Response TextButton

image

In the example above, Background Colour is set to 205, 225, 255

Back to Appearance Settings


Text Colour

The Text Colour Setting will determine the TextColor property of the Title TextLabel, MessageText TextLabel and OText TextLabel (found in the Response TextButton)

image

In the example above, Text Colour is set to 106, 106, 106

Back to Appearance Settings



NPC Model

The NPC Model setting will determine the Model shown in the NPCPic ViewportFrame and the Text property of the Title TextLabel

image

In the example above, NPC Model is set to an NPC named “Hotdog Man”

Back to Appearance Settings



Speed

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

Back to Appearance Settings



Title

The Title setting will determine the Text shown in the Title TextLabel if the NPC Model setting is setting is not set.

image

In the example above, Title is set to “Hotdog Man”

Back to Appearance Settings





Advanced Settings

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



Background Gradient Colour 1

The Background Gradient Colour 1 will determine the first colour in the UIGradient’s ColorSequence (found in MessageFrame)

image

In the example above, Background Gradient Colour 1 is set to 0, 170, 255


Back to Advanced Settings


Background Gradient Colour 2

The Background Gradient Colour 2 will determine the second colour in the UIGradient’s ColorSequence (found in MessageFrame)

image

In the example above, Background Gradient Colour 2 is set to 0, 170, 255


Back to Advanced Settings


Pause Characters

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 “!?.,”


Back to Advanced Settings


Pause Wait

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


Back to Advanced Settings


Overwrite Appearance Settings

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.


Back to Advanced Settings


Advanced UI Edit

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 Advanced Settings




Dialogue Editor

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


Navigation

To open the Node Editor, open the Dialogue-removebg-preview 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.

Back to Dialogue Editor


Tools

To view the editor’s tools, click the Tools-removebg-preview Tools button. When clicked, a tools frame will appear that looks like this:
image

Snap-removebg-preview Toggle Snapping
Toggle_Grid-removebg-preview (1) Hide/Show Grid
Zoom-removebg-preview Zoom
Position-removebg-preview Editor Position

Back to Dialogue Editor


Nodes

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

Back to Dialogue Editor


Root

image

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.

Back to Nodes



Display

image

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.

Variables

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()

Back to Nodes



Response

image

A response node will show the player a response choice with text that they can click to advance to the nodes connected to it.

Back to Nodes



Split

image

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'))

Back to Nodes


Action

image

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.


Back to Nodes


Close

image

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.


Back to Nodes




Importing Dialogue

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:

image

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().


Back to Contents

53 Likes

Out of curiosity, is this the same plugin as this one? It looks awfully similar in terms of the node editor part.

1 Like

I need to know how to make an image work as a link.

Other than that pretty cool plugin.

[put the image here](put the link here)

and it should work

Capture

2 Likes

I did see that post come up saying it was similar to mine. No they aren’t the same

I like this idea. Good work. I love how it’s as simple as attaching nodes.

I’m bored so I am making random logo designs for people, feel free to use this

(use right click > open in new tab > save image to make sure it won’t downscale)


Also great job on this! It’s really well done.

6 Likes

Damn good plugin, however “The BEST” is just a scummy way to get more clicks, it isn’t the best, no plugin is “the best”.

7 Likes

Agreed. “The BEST” isn’t necessarily accurate either - in terms of UI the plugin by @Sol_ttu is much more polished.

4 Likes

Thanks for the feedback! I’ll be sure to change the title to more accurately describe the plugin

1 Like

Thanks for the feedback. I must admit, @Sol_ttu’s plugin UI does look alot more polished. I’ll be sure to make improvements to the UI

1 Like

This plugin is pretty good. However, if you disable click to advance and re-enable it, it will give an error on the display node.
RobloxStudioBeta_z6F6qSRwQR

1 Like

I would like to know what’s different about this plugin in comparison to the plugin by @Sol_ttu. I see that there is a built in NPC Model, but that’s the only difference I see. I think that there should be a reason as to why we should use this plugin than the plugin by Sol_ttu

1 Like

Thanks for the feedback. The ChatterBlox plugin offers support for server-sided “actions” to be used. You can also customise the dialogue’s UI within the plugin, making it alot easier.
The plugin also has support to pause the dialogue when punctuation is reached, making it feel more authentic.
Another feature exclusive to this plugin is the ability to request an Instances properties through “Variables”.
Another feature that makes node creation and accessing other features of the Node Editor is it’s context menu. Right clicking on the editor or a node will open a menu containing various different actions. The Node Editor also gives you the ability to select multiple nodes and move/delete them all at the same time
I do plan to add more to this plugin to make it stand out from the rest

1 Like

Thanks for reporting the bug. I believe the issue is now fixed.

1 Like

The gui looks way better than that plugin, and it’s more user-friendly.

1 Like

Could you add a remove connection to node thing?

1 Like

RobloxStudioBeta_kbIlsyTAUO

RobloxStudioBeta_w0frCBS7m2

1 Like

Thanks for reporting this issue. I’ve figured out the cause of the first bug and am currently fixing it.Could you tell me how I could reproduce the second bug it so I can fix that one too?

To remove a node connection, all you have to do is click and hold the connection line, and drag it to the left of the editor window.

1 Like