Beginner tricks I figured out while making my first Narrat game

These are probably common sense to people familiar with HTML and CSS, but I thought it might be helpful for other beginners!

Bold and Italic text

These are done with HTML tags! Surround text with the <strong> strong tag </strong> to make them bold, or the <em> emphasis tag </em> to make it italic.

There are also <b> and <i> tags, but I read that their use is discouraged, since they only make a visual change and don’t work with screenreader software.

Read more about HTML tags here:
HTML <strong> Tag
HTML <em> Tag

Inserting line breaks

I wanted a bit of empty space between each label for pacing, so I added the HTML <br> Tag at the starts of labels.

The code:

  "Darkness is always the same no matter where you are."
  jump snack

  wait 1000
  "<br /><br />You search the snack bar for something to eat, but your pupils are slow to adjust. You scan the dull mass of plastic wrappings, trying to remember what it looked like in the day."

What it looks like:
Dialogue box with a large empty space between passages, transcript above.

Line break tags don’t play well with talk commands though, since the line breaks would be wrapped inside quotation marks. So for labels that began with a talk command, I added the line break to the end of the previous label instead. I didn’t try putting line breaks on its own line of text, but I think that would require an extra input from the player instead of being automatic.

Changing the colour of think text

I wanted to change the think text colour from its default blue to the same as regular text. I did this by editing the main.css file. Here’s the code that worked for me:

/* main.css */
.think-command {
  color: var(--text-color) !important;

Hiding the HUD stats

You can’t simply delete all the stats in config.yaml, the game will throw an error. Instead, you’ll need to edit the game’s CSS to hide them. This is the code that worked for me:

/* main.css */

.hud {
  opacity: 0 !important;

The Narrat documentation has a great guide with more info on CSS editing:


Thanks for posting this :smile: some of this I should add to the docs.

Things like this are a really good use of the forum though because they’ll help people in the future, or when someone is searching for something they can’t find in the docs :sparkles: