Hey All,
I’ve seen some pretty interesting ideas for dialogue systems, including one by @ Epic (A new, community-hosted Unreal Engine Wiki - Announcements - Epic Developer Community Forums) and thought I would show my own idea on how to create one. This system is very bare bone, but could be modified very easily once you understand it. I think it works pretty good but would love feedback as I plan to modify it in the future.
Anyhow, this project is very simple to set up. please let me know if I have mistakes that need to be fixed.
Edit: Project type is third person and version is 4.7
This tutorial will need the following things made in the content browser:
2 widgets:
- Choices
- DialogueScreen
3 structs:
- DialogueTree
- NPC_Reply
- PC_Choices
1 actor:
- DialogueSystem
The first thing we need to do is in the MyCharacter BP. Add the following two functions and run them on the event begin plays as follows:
Event Graph:
Init Mouse: Make sure to set all the bools to true
Spawn Dialogue: You do not need to promote the transform to a variable like I did, I just prefer it over the make transform.
The second thing to do is to set up how the widgets will look in the designer.
Choices Widget
This widget is simple, just add a text box and wrap it with a button.
The text needs to be a variable, mine is ChoiceText.
The button does not need to be but make sure “Size to Content” is set to true. Also add an “On clicked” event to this button. The only code for this widget goes there.
Inside the widget add two variables
Bool - Exit Conversation
Integer - Link To Node
Here is the how the BP looks but you won’t be able to set it up until we make the Load Dialogue Function in our Dialogue Actor.
Dialogue Screen Widget
This widget has no code so you can set it up however you’d like but this is how I set it up:
NPC Responses text must be a variable
Choices border does not need to be a variable like it shows in mine but I would set it’s size to fill.
Choices Vert Box needs to be a variable
Now lets set up our structs, they are pretty straight forward.
PC_Choices
Text - Reply
Integer - LinkToNode
Bool - ExitDialogue
NPC_Reply
Text - NPCReply
PC_Choices(struct) - PC_Choices (make it an array)
DialogueTree
NPC_Reply(struct) - Conversation (make it an array)
**Dialogue Actor **
Don’t forget that once you set this up, you can go back to the choices widget and set it up correctly.
Create one custom variable and set it to the type “Dialogue Tree (struct)” - I named mine dialogue test for this.
Event Graph
Promote the return value from the create widget and set it to Dialogue Widget
Create a new function “Start Conversation”
Promote the as dialogue screen value and set it to Dialogue Screen Cast
Create a new function “Load Dialog”
This is a bigger function so it will be multiple screen shots.
Part 1
Part 2
Now for the last part, setting up the actual conversations and how it works.
This may be kind of confusing at first so I will do my best to explain it since this is the guts of the setup.
In the dialogue actor, click on the variable you made called dialogue test. (for my screen shots, I drug the details panel out into the open and set it to full screen to set this up, makes it easier)
Here is the opening statement and what it would look like when fully expanded.
NPC_Reply: This is the text that will fill the screen above the players choices, its pretty straight forward. Each time you add another element it becomes a new “screen” that is accessible for the player. (the elements array number is the number you’d use in the link to node below)
Conversation: This is an array/list of choices you can set for the player to pick from. Each element you add will become an option the player can click on
Link to Node: This is used to pick which screen you want to load next.
Exit Dialogue: If this is set to true, and the player clicks it, the dialogue menu will close.
In the picture above, you can see this conversation is Node 0 - This means it will be the opening conversation. You can also use 0 to link back to this screen from any other PC_Choice you’d like to.
here is another picture:
In this picture you can see I added another conversation screen. If the player chooses the option for “wanting more information” I set the link to node to 1 which will load the next screen.
The other two I left at 0 for now so it will just reload the same screen but the you’ll notice the third has the exit convo set which will end the conversation (by hiding the widget)
In the second conversation, every option will link back to the first screen creating an infinite loop of sorts.
Edit: Another way you can do this too is when you set the dialogue widget, change the variable type from User Widget and set it to the Dialogue Screen and you can remove the start conversation function altogether and replace all the existing dialogue cast nodes with the dialogue widget variable.
Edit: Here is what it looks like in game
You can expand on this system infinitely.
If you have any questions or feed back on how this system could be made easier/ more efficient please let me know.
In the future I do plan to add more features like activating quests, opening shop menus, and many other things. I just hope this helps some people with basic dialogue systems.