Narrative Design - Narrative based NPCs with convai on web.
Narrative design is a method of structuring interactive stories, particularly for convai non-player characters (NPCs) in web-based environments. It utilizes a graph-based system where each node represents a step in the story progression.
Select your Character in which you want to enable Narrative Design.
Each section has an objective and decisions. Based on whats written in Objective the character would speak/respond. You can give the character exact dialogues using <speak>{your dialogue}</speak> tags.
For decisions add messages as context on how the character can decide on which objective to move to own its own. The once you want to control can be through invokeTrigger in the next section.
Open Narrative Design section in convai playground.
According to your storyline create a narrative map/graph. Shown bellow is an example. The blue boxes represent triggers (used to initiate a line in the graph) and the black boxes represent sections (what you want the character to speak about).
These triggers would be used to navigate through the story graph and activate specific narrative design sections.
In the example bellow calling the trigger (start tour) would activate "Greet User" section.
Once the logic is decided we can move to our Javascript code. Where we have initialised convaiClient.
We can call convaiClient.invokeTrigger() whenver we require it in our use case.
Additional information for context can also be passed as the second argument : message.
This guide shows how to dynamically pass variables to Narrative Design section and triggers
We will create a simple scenario where the character welcomes the player and asks them about their evening or morning based on the player's time of day.
In the playground, enable Narrative Design on your character and change the starting section name to Welcome.
Add the following to the Objective field of the Welcome section:
The time of day currently is {TimeOfDay}. Welcome the player and ask him how his {TimeOfDay} is going.
Notice that by adding any string between curly brackets it becomes a variable, and what we did here is adding the time of day as a variable, then from Unreal we can pass either the word "Morning" or "Evening" and the character will respond accordingly.
Setting Narrative Template Keys in JavaScript
To initialize your narrative design framework with custom template keys, you can pass the narrativeTemplateKeys argument when instantiating the convaiClient. This allows you to define and structure your narrative flow programmatically.
