Update 3: The Dialogue UI

We've now come to the point where fixing up a proper UI is important. More than just functional, we now want our game-in-the-works to look presentable and starting thinking about how visual design feeds into the game's systems. This is not a small task, so we decided to break up the UI design into a few pieces that we could work on one at a time. The first piece, and probably the simplest, was the UI of the dialogue engine.

This is what we came up with.

Screenshot from an event with Shelly

First, we wanted to place the text box at the bottom of the screen. That way, we could make use of the great width of the screen to display more text, and position the characters to have as much of them showing as possible without covering up any important features like the face.

Next, we wanted to have a cohesive theme for our UI. We decided on a mainly thread-based UI, since one of the core components of Dark Miasma's lore is the existence of the Threads of Fate. We designed the text box to be a bolt of linen rolled out a little bit, with various bits of UI stitched on, like the name plate and the "continue' indicator.

The nameplate displays who is speaking

The continue indicator lets the user know when the engine is ready to continue to the next line

These pieces were stitched with red in particular, in order to make them pop.

We had a deal of trouble deciding where to place the text options. We could put them in a menu on the corner, or have them on the text box itself. In the end we decided to put them on the text box. Due to the positioning of the speaker's name plate, the dialogue in the text box had to be put quite low. This left us with a lot of dead space towards the top of the text box, so we figured we could fill it with the options. Not wanting to draw too much attention to the options, we did not stitch them on. Stitching on such small buttons ended up being too busy, and the players' eyes would be distracted by it. We also made the text colour a shade of brown to help blend in with the background.

The options Slow, Medium, and Fast pop up when you click
the Speed button!

Finally, we decided to hide the actual text speed options behind a toast menu. 

We thought that having the Slow Medium and Fast text speed options on the text box would make the area too busy. By hiding the options behind an additional menu, it reduces space usage while also grouping the concepts of "text speed" together!

This is what we've developed so far for Dark Miasma's UI, and I hope you enjoyed reading a little bit about the thought process behind this design. Thanks for reading!