Stay

an exploration on spacial-expressive typography for dialog in 3-D games

What it is all about

“Stay” is an experimental 3-D Visual Novel I created as my BA thesis. In the game I explored how typography placed inside the world (opposed to having the text render as a form of UI element) would impact the game­play, and how typography could be used to express the emotions of the speakers.

Or to put it a bit more straight forward:

What even is the problem?

In most games where written dialog is used it is ­positioned on some corner or edge of the screen. This creates a situation where the attention of the player is devided: Should they look at the animated characters in the center of the screen or diverge their attention to the text away from the center. In order to disolve this predicament game developers often switch the attention hierarchy of those two up: In situations with lots of text the characters are less active, and vise versa. In essence making one of those “background decoration.”

While this does in deed work it takes away from the player’s immersion. The approach for my thesis was therefore to combine gameplay and dialog reading in a way that avoids a split in attention.

As I wanted to solely work with text the text had to carry a lot of weight to convey the speakers emotion. Therefore the second goal of my research was to make the typography more emotional.

Harmonizing text and game play

Prototype Experiments

Keeping gameplay and reading connected essentially comes down to text positioning. I already experimented with text positioning in a small prototype game. I attached the text to the camera position, but in this particular setting it caused more problems then it solved. For example the camera depth of field also effected the text—which in turn wasn’t readable anymore. Or the text vanished in the ground, depending on the camera movement.

In the end I opted for placing the text on the interface layer but centered to the character. This worked in regards to keeping action and text together, but it was still a bit steril.

Pre-Production

My initial idea was to bring more of a magazine layout into the game. But I decided against this approach as it kept causing “two-focus-point-problem.” Rendering text directly on the screen but seperating it to left and right—depending on the speaker—also proofed faulty. so I went back to a scrapped idea of the prototype: Attaching the text to the camera position.

For the actual project I switched from Unity to Unreal Engine. Here I had a few options regarding text treat­ment I didn’t had for the prototype project. Chief among was the better ready-made character/camera controller. It allowed me to attach the text to the camera without the text vanishing into the ground every­time you looked down.

Implementation

After setting up the player character’s canvas, the next issue was adjusting the non-player character’s text. The two main problems here were the text size in relation to the player distance, and the position of the canvas. After a lenghty process of trial-and-error as well as bugfixing I came up with a technical solution to those problems.

For the player character the text can be viewed like reading a news paper over somebodies shoulder. With the second character this approach would have led to her body covering the text most of the time. So instead I decided to go for a “hold-a-signtowards-the-camera” approach. For this the canvas gets mirrored and then lined up with the players camera.

With the text size the problem was finding one that would look good no matter of the player is far or close. Obviously this one-size-fits-all approach didn’t work, as the text was either to large or to small if the player wouldn’t stay in a fixed distance to the second speaker. I therefore had to determine the size dynamically.

As an addendum I added the speakers’ names to the text. During playtesting players mentioned sometimes having trouble knowing who speaks because the text was free-floating. I hoped that switching between serif and sans serif typefaces would suffice, but it obviously didn’t.

Speaking Text

Exploring the capabilites of fonts to display a range of emotions as substitute for voice overs was the second goal of my thesis. I wanted to implement this in two ways: First by creating a typeface for each speaker to establish their “voice.” Second create a range of font weight variations that could be used to show different states of emotions.

Amilia

Amilia, the person the player inhabits, I assigned a sans serif typeface. My reasoning behind this was, that I wanted to point out her strife towards large international cities. Sans serif typefaces, especially Helvetica, have become strongly associated with international affairs in the 50s and 60s through the international style. In the 2010s this style was revived in the global style. But this time instead of international corporations it was mainly used in the cultural sector. I liked the shift in meaning and found it fitting for Amilia, as I imagined her as someone with an arts background. Instead of a static grotesque sans like Helvetica I decided to make a font based on the American form principle. That meant high contrasts, large x-height, and wide uppercase letters. The high stroke contrast worked well to represent her some­what jumpy nature and mood swings. In general I like this form principle because it alleviates the sterile nature so many sans serifs have and brings a type of quirkiness to the table.

Switch to another emotion.
Test the fonts.
Click the text and start typing.

Eline

For Eline—the second character—I wanted to take a serif typeface. I wanted to show that she is the more stable of the two. I also wanted to show that she retains an edge—she might be stable but that doesn’t mean she’s bland. To show the static and more traditional character I went for a modern serif type­face. Those are characterized by their high stroke contrasts and strong empasize on the vertical axis. This alone would create an association closer to high fashion, so I added the rather contemporary design feature of angular serifs. I also decreased the stroke contrast to increase readability and underline her more stable character.

Switch to another emotion.
Test the fonts.
Click the text and start typing.

Creating a Gesamtkunstwerk

Though the main goal was to explore emotional typo­graphy in 3-D space, I wanted my thesis to be an culmination of the various backgrounds and interests I have. Namely composing music, writing, creating atmospheres, and of course typograpy. This meant I wrote an original story, composed and recorded music on top of making the core game work.

Story

I created four variations of font weights for each character: neutral, silly, lost-in-thought, and angry. In order to be able t ouse those variations the characters needed to go through quite a range of emotions. Initially I thought I could just take an existing theatre piece. But none hit I found was able to hit these different emotions or they where to subtle. So, I decided to write an original story. In order to cover all four emotions the characters would need to “overact” a little bit. That’s the reason why they both seem a bit moody at times. Nevertheless the story was able to unravel a certain mood and at the end even hit a hopeful note.

Music

I went through some iterations regarding the tone of the music. I nthe beginning I was using a calm ambient music track. But, this felt too neutral while playing. Next I wanted to try an pop-guitar opening similar to RADWIMPS opening song to “Your Name.” Though I liked the song it fell flat as soon as the characters started moving. The game genre was after a walking simulator. So, for the next attempt I thought of an orchestral approach with an ominous opening. But instead of orchestral instruments I wanted to focus on the use of the electric guitar.

Similar to classical pieces I opted for movements instead of seperate songs. One musical piece transitions into the next one. This approach allowed me to underscore the mood during the conversation. It goes from moody and angry into quite. The quite piece goes into one that has a more hopeful notion. And finally the outro has a powerful and positive energy. In the past I had written these kind of sound­tracks all on my own. This time I asked a friend of mine who plays drums to record percussion and drums. It was a really nice experience seeing my music getting enhanced by someone else adding to it.

Workarounds

In game development picking your battles is essential. I therefore decided to use existing assets instead of creating my own nature objects and characters. When going with this approach the challenge is to select assets that fit together. So, I used Metahumans for the characters as they come fully rigged, as well as the Quixel Megascans library. The issue with these assets was that they need a very powerful machine to run smoothly. And my machine wasn’t that powerful. Additionally I used the Avananced Locomotion System v4 for character animations. Though these are well made, they still looked a bit of. Go for photo­realism under these cirmustances was out of the question, because it would invoke the uncanny valley that would throw players out of the expierence.

Around the time I was working on my thesis we got a new Riso printer at KISD (that you can find in the room next door). I wanted to incorporate this technique in my documentation, as the colors are simply stunning. Part of the limitation of this printer is that it needs rasterized images to work. Also the colors—though vibrant—look imperfect and maybe even a bit old. I decided to mirror the look of this printing technique in my game. Because it would a layer of abstraction so that players would not be put off by the somewhat clunky animations. It also tied everything together in a nice way. The result is a more duo-tone look with chunky raster shapes in the shadows—which I find to look pretty nice.

Did it work though?

Did my approach solve the issue of tying gameplay and text together as well as proof that typography could be used to show the intent and inflection of the written word? Yes and no.

By projecting the text into the world instead of placing everything on a 2-D layer you lose a lot of control. You can set the approximate position of the text, but since the text is moving with the characters it can happen that it gets obstructed by scenery. With more then one speaker it can become difficult to see who is talking at the moment. And this whol approach only works if you let typo­graphy take a big role within the game.

While these problems are an issue it can’t be denied that this approach manages to create a more engaging reading experience. It becomes possible to navigate the game and read the text without having to re-focus everytime. Additionally reading becomes a kind of gameplay mechanic. Because, similar to real life conversations, you need to face the person you are listening to. Otherwise you miss what they are saying.

Regarding the use of typography for translating emotions there are a few caveats. As a type designer one becomes very literate in recognizing small details in a font. On an average player many of these details are lost. During playtesting players sometimes didn’t notice a sans serif was used for one character and a serif for the other.

What players picked up on were the variations within the fonts. Anger, joking, and thinking-out-loud were understood without issues. Further iterations need yet to show if these variations can be expanded upon to display more subtle emotions.