Skip to content

Example Tutorial Blueprint

Jump to bottom
Daniel Butum edited this page Oct 24, 2020 · 40 revisions

[[TOC]]

ℹ️ NOTE: The FINAL Example Project is here

1. Introduction

The purpose of this tutorial is to teach you how to use the dialogue system and how to integrate it into your own project.

The tutorial starts from the Third Person template project.

At the end the player character will be able to talk to our NPC, Mr. Cube and ask him to change his color. Mr. Cube will be happy to do that at the first few times, then he gets annoyed and won't change his color anymore.

2. Getting started

  • Create new project using the Third Person Blueprint template project with the name DlgExample.
  • Install plugin from marketplace / Get the plugin source from our repository (Click HERE)

3. Setting up an NPC and a Dialogue

a. Create a new NPC Blueprint

  • Create a new Blueprint based on Actor with the name BP_MrCube.
  • Open the Blueprint, add a Cube component.
  • Go the the Class Settings to add the DlgDialogueParticipant interface to the implemented interfaces list.

Export_SetupMrCube

b. Implement the GetParticipantName Function

  • Open the GetParticipantName function
  • Create a DialogueParticipantName variable on the Blueprint and Set the value to MrCube.

Export_SetupMrCube_GetParticipant

c. Create & Open Dialogue

  • Switch to the content browser
  • Create a Dialogue asset with the name Dlg_MrCube
  • Open the Dialogue
  • Drag an edge from the border of the start node and place a Speech node.

Export_CreateDialogue

d. Setup Participant Name and Text on first Node

  • With the recently added node selected, set the Participant Name to MrCube
  • Set the Text to I am Mr. Cube! What can I do for you?

Export_SetupMrCube_Dialogue_FirstNode

e. Setup first Node enter condition and create second Node

  • Create a new Speech node and place it on the right of our first Node.
    • Set the Participant Name to MrCube
    • Set the Text to Good to See you again!
  • Save the Dialogue
  • Select the first Node you added
    • Add an Enter Condition
    • Set the Condition Type to Was node already visited?
    • The node index has to match the white number on the top right corner of the selected node
    • Make sure that the Is Node Visited? checkbox is unchecked

This setup will make sure that MrCube will say his name only the first time the player talks to him.

Observe the fact that the node has an icon on its top left corner - that means that it has an Enter Condition.

Export_SetupMrCube_Dialogue_EnterCondition_FirstNode

f. Setup Player Node and first End Node

  • Add a Speech Node child from Node 0
    • Set the Participant Name to Player
    • Set the Text to Could you change your color?
  • Add a End Node child from Node 0
  • Make and edge from Node 1 to the newly created Nodes: Node 2 and Node 3
  • On the edges leading to Node 2 set the Text to Ask him to change his color
  • On the edges leading to Node 3 set the Text to Leave

Export_SetupMrCube_Dialogue_SetupPlayerNode_And_FirstEndNode

g. Add Selector Node and the two Speech Nodes

  • Add a Selector Node child from Node 2
    • Set the Participant Name to MrCube
    • Set the Selector Type to First
  • Add a Speech Node child from the Selector Node (`Node 4)
    • Set the Participant Name to MrCube
    • Set the Text to Sure. What color would you like to see?
  • Add a Speech Node child from the Selector Node (`Node 4)
    • Set the Participant Name to MrCube
    • Set the Text to I can't keep changing my color all the time! Just leave me alone!

This selector node automatically select the first child with satisfied conditions.

SetupMrCube_Dialogue_SelectorNode

h. Add ColorChangeRequestCount Variable to the NPC Blueprint

  • Open the MrCube NPC Blueprint
  • Add a new Variable named ColorChangeRequestCount
  • Set the Type to Integer
  • Compile & Save the Blueprint

SetupMrCube_ColorChangeRequestCount

i. Setup ColorChangeRequestCount Edge Condition

  • Select the Edge from Node 4 to Node 5
    • Add a new Condition
    • Set the Condition Type to Check Class Int Variable
    • Set the Participant Name to MrCube
    • Set the Variable Name to ColorChangeRequestCount
    • Set the Operation to <= (Is Less Than or Equal To)
    • Set the Int Value to 3

This will check the ColorChangeRequestCount variable (you will have to type it the first time you use it).

If it is less than or equal to 3 then Mr. Cube will be happy to change his color.

This selector node automatically select the first child with satisfied conditions - so each time the player asks Mr. Cube to change its color it will either say the text of Node 5 or Node 6 depending on the variable value.

This ColorChangeRequestCount variable will be Modified by the Dialogue in the next step.

SetupMrCube_Dialogue_EdgeCondition_From_SelectorNode

j. Setup ColorChangeRequestCount Node Enter Event

  • Select the Speech Node 5
    • Add a new Enter Event
    • Set the Event Type to Modify Class Int Variable
    • Set the Participant Name to MrCube
    • Set the Variable Name to ColorChangeRequestCount
    • Set the Int Value to 1
    • Make sure that the Delta checkbox is checked

This will increase the ColorChangeRequestCount variable each time the dialogue enters this node.

Export_SetupMrCube_Dialogue_NodeEnterCondition_From_SelectorNode

k. Setup Final End Nodes

  • Add an End Node child from the Speech Node 6
  • Add three End Node children from Speech Node 5
    • Set the Edge Text in this order from left to right: Red, Green, Blue
    • Add an Enter Event to all three Nodes
      • The Participant Name should be MrCube
      • The Event Type should be Event
    • Set the Event Name in this order from left to right: ColorToRed, ColorToGreen, ColorToBlue

SetupMrCube_Dialogue_EndNodes_With_Event

l. Make Cube NPC Blueprint change his Color

  • Open the BP_MrCube Blueprint
  • Create a new Function with the Name SetCubeColor
    • Add a new Parameter named Color of type Vector
    • Call SetVectorParameterValueOnMaterials on the Cube with the Color input
      • Set the Parameter Name to Color

Export_SetupMrCube_SetCubeColor

  • Create a New Material like in the picture below and set it on the Cube Component of the BP_MrCube Blueprint

Material_MrCube

  • In the BP_MrCube Blueprint open the OnDialogueEvent Function
  • Place the Switch on Relevant Dialogue Event node - it lists the event names associated with Mr. Cube and works as a normal switch node.

Export_SetupMrCube_SwitchOnRelevantDialogueEvent

  • Call SetCubeColor depending on Event Name

SetupMrCube_OnDialogueEvent

4. Setting up the Player

a. Implement the DlgDialogueParticipant Interface

  • Open the Player Blueprint (for example BP_ThirdPersonCharacter)
  • Go the the Class Settings to add the DlgDialogueParticipant interface to the implemented interfaces list.
  • Add the DialogueContext Variable of type DlgContext
  • Add the DialogueParticipantName Variable of type Name and set the Value after compiling the Blueprint to Player
  • Implement the GetParticipantName Function

Export_SetupPlayer_GetParticipantName

b. Create the StartDialogueWithNPC Custom Event

  • Open the EventGraph of your Player Blueprint
  • Add a Custom Event with the Name StartDialogueWithNPC
  • Set the following inputs
    • Dialogue of type DlgDialogue
    • NPC of type Object
  • Start the Dialogue by calling StartDialogue
  • Use the return value of the StartDialogue to set the DialogueContext Variable of the Blueprint

Blueprint_AddCustomEvent

SetupPlayer_StartDialogueWithNPC_Partial

c. Create the SelectDialogueOption Custom Event

  • Open the EventGraph of your Player Blueprint
  • Add a Custom Event with the Name SelectDialogueOption
  • Set the following inputs
    • OptionIndex of type Integer
  • Call ChooseOption (NOTE: we will handle the return value later when we have the UI setup)

SetupPlayer_SelectDialogueOption_Partial

5. Starting the dialogue

  1. Open MrCube Blueprint and add a DlgDialogue variable. Set the default value to DlgMrCube.
  2. Add a SphereCollision Component, and a Component Begin Overlap event.
  3. Setup the event based on the image trigger0

6. UI

If you used blueprint only your PlayerCharacter and PlayerController have a different name then the ones used in the images of this section. Other than that everything should work fine - just use your own blueprints for those.

  1. Create a new User Widget with the name DlgWidget and construct the setup based on the image. All the variable is anchored to the bottom left and all the texts are marked to be variables. ui0

  2. Add the button pressed events. ui1

  3. Create the UpdateOption function. ui2

  4. Show/Hide and setup everything from tick: ui3 ui5

  5. Create the widget and add to the viewport in the BeginPlay of the PlayerCharacter blueprint. If you worked with blueprint only your BeginPlay already contain some code. Adding the nodes from the image to the beginning of your Event BeginPlay works fine. ui6

Set the return value of the GetDlgParticipantIcon functions in both the character and the MrCube blueprint.

Place MrCube to the level. If you start the game and go near him the dialogue should start. You can ask him to change his color four times before he gets annoyed. (Leaving him and returning again triggers the dialogue again).

Clone this wiki locally