Creating character navigatable dialogs

Question

Hi there,

I'm using SugarCube 2.21 and Twine 2.x.

I'd like to create short dialogs between my player and the NPCs in game.The idea is, that I don't want to create too many passages as that would make organizing passages in Twine a nightmare for me.

For the first time I want to keep everything simple and just have one NPC talk to the player. The format would be the following:

$NPCs_Name : $NPC_Message1

$Players_Name:
$Players_answer_1
$Players_answer_2
$Players_answer_3

If there was a previous dialog: go back to that.

The depth of the dialog's level would be 3. So, if there was a dialog between the NPC and the player, the player would answer the first question and proceed to the second one, but in case the player decides to go back to the previous question, they could do just that and change their answer. After answering the third question, the dialog would be over and the player would be transfered to a passage via <<goto>>.

Answers and NPC messages should be able to display variables and answers would also be able to set variables using macros such as <<set>> and <<script>> and send the player to other passages via <<goto>>.

So far I've been looking at the following answer from a Twine 1 SugarCube question:

https://twinery.org/forum/discussion/2954/dialogue-without-shifting-from-passage-to-passage

Unfortunately, the answer was not enough for me to get the resutls that I'm looking for.

Answer 1

Maybe this thread contains the answer you need. Basically you create an element on the bottom of the screen to display the dialogue (in this case #dialogue-bar) and replace its content with the content of a different passage (in this case "Dialogue"):

<<set $talk = "Hi, how are you?">>

<<replace "#dialogue-bar">><<display "Dialogue">><</replace>>

Then handle the conversation in the Dialogue passage via a <<switch>>:

<<nobr>>
$talk <br>

<<switch $talk>>

<<case "Hi, how are you?">>
<<button "I'm great. How are you?">>
	<<set $talk = "I'm great too. Wanna hang out?">>
	<<replace "#dialogue-bar">>
		<<display "Dialogue">>
	<</replace>>
<</button>>
<br>
<<button "I'm feeling miserable.">>
	<<set $talk = "What's wrong?">>
	<<replace "#dialogue-bar">>
		<<display "Dialogue">>
	<</replace>>
<</button>>

<<case "I'm great too. Wanna hang out?">>
<<button "Sure thing.">>
	<<set $talk = "Let's head to the candy shop then.">>
	<<replace "#dialogue-bar">>
		<<display "Dialogue">>
	<</replace>>
<</button>>
<br>
<<button "Sorry I'm busy.">>
	<<set $talk = "Aw... Maybe next time then.">>
	<<replace "#dialogue-bar">>
		<<display "Dialogue">>
	<</replace>>
<</button>>

<<case "What's wrong?">>
<<button "I ate too much candy...">>
	<<set $talk = "Better lay down for a bit then.">>
	<<replace "#dialogue-bar">>
		<<display "Dialogue">>
	<</replace>>
<</button>>

<</switch>>

<</nobr>>

 

Comments

Thank you! I'll post the code that I came up with, once it goes final.

---

Sorry for taking this long, but I just gone through your solution and it is more like a solution to a CSS based dialog organization that I wasn't really looking for here. I wanted to figure out how to implement simple dialogs in a single passage without making too many.

Even if I put the following span into the starting passage, <<replace>> would not find the tag.

<span id="dialogue-bar"></span>

 

---

Alright, today I went on Discord to discuss, why IDs and Classes are not recognized when I try to refer to them and it turns out that the page has to load these first before they can be referenced by <<replace>> and <<append>>:
 

<span id="conversation">\Dialog:</span>\
<span id="conversation-controls">Controls go here:</span>
/% This is essential in order for the span id to be recognized %/\
<<timed 40ms>>\
    <<NewCustomerMassageDialog>>\
<</timed>>\