Textbox and avatar in twine

Twine Version: 2.7
[sugarcube 2.36.1]


I made a story game in twine but I didnt give any textbox or calor to characters, soo reading the story is a bit hard. I want to make something like this.


Avatar and a textbox for the each character in the game. Do you guys know how can add this to my game ? And I hope there is a easy way to do it because the game almost 150 passage… I hope you can help me out.

Kind Regards :heart:

This might be what you’re looking for

But it’s essentially a container widget and some CSS.

For those that find navigating GitHub difficult, the same Speech Box System third-party addon can be found on Chapel’s Twine related web-site.

1 Like

Hello again,

I am using some code from the internet for the spechbox and images,
I am using something like below,

<<character ‘Aslan’ ‘images/background/Aslan.jpg’>>

But I want to make the name chosen by the player like this

<<character ‘$name’ ‘images/background/Aslan.jpg’>>

But when I do this in storyInıt its say invalid macro and game doesnt open anymore. Can I do this somehow ?

Kind Regards :heart:

Did you add the JavaScript code of the custom macro in the JavaScript passage?

From the page linked in the first answer
THE CODE: Minified JS. Pretty CSS.

Yes I add all the codes from this link. İt is working for me so well, but when I try to add wariable on the code its giving me errors. İf I type ‘name’ its working but if I type ‘$name’ its not working.

Then you should used the <<say>> macro:

Macro: <<say>>

Syntax:<<say name [imageSrc]>>...<</say>>

This macro can be used to create speech boxes that aren’t based on predefined characters, allowing you to use names that would be unsuitable as macro names, use bit characters that aren’t worth defining, or change a character’s name or image, or use characters that don’t have associated images.

<<character>> should only be used for pre-defined NPC (so not customisable)

Error: cannot execute macro <>: unable to parse macro argument “[im”: malformed image markup

<<say $n [images/ch2/characters/you.jpg]>>I dont feel good right know chef dont mess with me.<</say>>

Do I have to make something in StoryInit or js for <<say>> macro ? 

Chapel, the developer of the Speech Box System that is being used, now advises to use SugarCube’s <<widget>> macro instead of the <<character>> macro to define both the “Main” character as well as any non-random NPCs.

Because using the <<widget>> macro allows greater flexibility with the naming and images associated with a specific character.

eg. the ‘Aslan’ character could be defined like so.
1: Assign the default name for the ‘Aslan’ character in the project’s StoryInit special Passage.

<<set $name to ‘Aslan’>>

2: Define a ‘Aslan’ specific speech box in the project’s widget tagged Passage.
note: also assigning the special nobr tag to this Passage will help suppress unwanted line-breaks from appearing in the dialogue spoken by the characters.

<<widget 'aslan' container>>
    <<say $name 'images/background/Aslan.jpg'>>_contents<</say>>

3: Use the character specific widget when outputting that character’s dialogue.

<<aslan>>Hi, my name is $name, and I welcome you to my story.<</aslan>>

4: Add code to your project that allows the reader / player to supply the name they want to give the ‘Aslan’ character in the story / game.

note: using this Character related custom widget technique, instead of using the <<character>> macro to define a character, also allows showing different (emotion) images for a specific Character. By either:

  • altering that Character’s widget to accept an argument that represents the current emotion, and altering the code within the widget to display different images based on the argument passed.
  • creating additional “emotion” specific widgets for that character, each of which displays the correct image for that specific emotion.

You guys so kind and helpful thank you so much for your helps.:heart::heart::heart:

1 Like