Textbox and avatar in twine

FaRKLISIN · November 25, 2023, 11:14pm

Twine Version: 2.7
[sugarcube 2.36.1]

Hi,

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

manonamora · November 25, 2023, 11:17pm

This might be what you’re looking for

github.com

ChapelR/custom-macros-for-sugarcube-2/blob/master/docs/speech-box-system.md

## The Speech Box System

[Back to the main readme](./README.md).

This set of macros, styles, and functions can be used to quickly generate simple speech boxes for character dialogue with a place for portraits, names, and text. Simply associate characters with image sources in your `StoryInit` passage or story JavaScript and the script will generate purpose-built macros at runtime, or you can supply character names and image sources to the `<<say>>` macro in any given passage for on-the-fly characters.

![Speech box example](https://i.imgur.com/CkI3K8Q.png)

The default look and styling is very bare bones, and meant to be a basic starting point. It is highly recommended you add your own styles to make the speech boxes better match your game. You can, of course, use them as-is if you want to, though.

> [!NOTE]
> Unlike most of my macros, this code relies on CSS files as well as JavaScript! Be sure to download and install the relevant CSS files as well!

> [!WARNING]
> If you want to use this system with the `typed.js` integration module, you'll need to use this custom JavaScript in place of that provided by the module: https://gist.github.com/tmedwards/4921bdcd7bfbb955530c135ee3feff83

**THE CODE:** [Minified JS](https://github.com/ChapelR/custom-macros-for-sugarcube-2/blob/master/scripts/minified/speech.min.js). [Pretty JS](https://github.com/ChapelR/custom-macros-for-sugarcube-2/blob/master/scripts/speech.js). [Minified CSS](https://github.com/ChapelR/custom-macros-for-sugarcube-2/blob/master/scripts/minified/speech.min.css). [Pretty CSS](https://github.com/ChapelR/custom-macros-for-sugarcube-2/blob/master/scripts/speech.css).  
**DEMO:** [Available](http://macros.twinelab.net/demo?macro=speech).  
**GUIDE:** Not available.

This file has been truncated. show original

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

Greyelf · November 26, 2023, 8:54pm

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.

FaRKLISIN · January 28, 2024, 7:09pm

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

manonamora · January 28, 2024, 7:16pm

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.

FaRKLISIN · January 28, 2024, 8:16pm

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.

manonamora · January 28, 2024, 8:20pm

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)

FaRKLISIN · January 28, 2024, 8:34pm

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 ?

Greyelf · January 28, 2024, 8:59pm

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>>
<</widget>>

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.

FaRKLISIN · January 31, 2024, 11:16pm

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

Textbox and avatar in twine

Macro: <<say>>

Macro: `<<say>>`