Openbound - Text Colours

This article covers modifying the existing text colours used in dialogs or adding new ones, to match any new characters. This is not a particularly complicated process, but it does require modifying a file in the src directory, which contains the engine source code. Please be careful when modifying these files.

Table Of Contents

• Overview
• Basics
  • Assets
  • Dependencies
  • Rooms
  • Sprites
  • Animations
  • Characters
  • Actions
  • Dialog
  • Dialog sprites
  • Triggers
  • Paths
  • Templates
  • Game State
  • Effects
• Good practice
• Advanced
  • Text colours
• Production
  • Build
  • Release

The colour section

To begin adding, removing or modifying colours, open the FontEngine.js file in the src directory. Now go to line 55. You are looking for a line containing the text Sburb.FontEngine.prototype.prefixColours = {.

Now, within the { and }, you can see a list of names with attached colours. The first defined colour is for aa and looks like so:

Sburb.FontEngine.prototype.prefixColours = {
    aa: "#a10000",
    ...
};

The name to the left of the :, which here is aa, is the name which can be used when writing dialog to define the colour of the text.

The #a10000 is the hexadecimal colour code for Aradia's colour. That sounds a bit complicated, but it's just another way to write the red, green, and blue values for the maroon colour that Aradia speaks in. There are plenty of free "RGB to HEX" converters and colour pickers online, if you need to turn your specific colour into hexadecimal. Most art programs can also represent colour in HEX in their colour picker. Note that the # at the beginning is necessary.

If you have the sample open, you may notice that there is a following definition for aradia, which is set to the exact same colour. According to the official documentation, they used to use two character (i.e. aa), but they made too many characters, so they had to use full names to avoid conflicts.

Adding a colour

Adding a new colour definition is relatively simple. Below is an example of adding equius's colour definition of #000056.

Before:

Sburb.FontEngine.prototype.prefixColours = {
    aa: "#a10000",
    ac: "#416600",
};

After:

Sburb.FontEngine.prototype.prefixColours = {
    aa: "#a10000",
    equius: "#000056",
    ac: "#416600",
};

NOTE: There must be a comma after every colour definition, though it is not required after the very last one.

Removing a colour

There is little need to remove colours, but if you do need to, you can simply remove the pairing of name to colour. Below is an example of the before and after of removing the colour definition for aradia.

Before:

Sburb.FontEngine.prototype.prefixColours = {
    aa: "#a10000",
    aradia: "#a10000",
    ac: "#416600",
};

After:

Sburb.FontEngine.prototype.prefixColours = {
    aa: "#a10000",
    ac: "#416600",
};

Note that the comma at the end of aradia: "#a10000", was also removed.