The Wonderful World of Text Boxes

After the last post, I felt like I went a little too big. I learned that it’s incredibly difficult to write about a massive franchise if you’re someone like me who wants to talk about every single game in the series and is forced to generalize. So this time, I decided to tackle something much, much smaller. And I’ve ended up basically writing a novel somehow. About text boxes.

If you’ve ever played a typical RPG, you definitely know what these things are.  Text boxes are used to convey dialogue and narration in video games, kind of like speech bubbles in comic books.  I can guess what you’re thinking. “Why are you devoting your sweet time to analyzing something so insignificant? Text boxes are just a U.I. element! It’s like you’re doing a post just on health bars!”

WRONG. Text boxes totally DO matter when conveying a video game narrative. A good text box can dramatically improve the story’s “readability”, which we’ll explore later. I like to compare text boxes to blocking in theater. Let’s say two different directors get the same script, the same actors, and the same props as each other to run the same production. Everything else might be the same, but if one director is bad at his job, with his actors constantly getting in each other’s way and with his lead incomprehensible because he’s standing way too far in the back that production is going to end up a lot worse. Likewise, the other director might become a success if he knows how to place and choreograph his actors like a professional.

So how does one make the perfect text box? In order to find that answer, we need to learn what the different parts of the box do. To help with that, I drew a fantastic diagram of a generic RPG text box. Check it out!

img_0934

(Just to clarify, I’ll only be discussing text boxes present in games without voice-acting. Subtitles are entirely different and much more complicated.)

1) Text Window

The box in which the writing is contained. The box is usually located at the bottom of the screen. Some RPGs (such as Earthbound and Pokemon) allow you to change the box’s color or shape.

2) Text

The actual line or lines of dialogue/narration. A game could have text that just appears immediately once you advance the conversation, but most games have text that fades or scrolls somewhat quickly across the screen. Some games give you options to determine how fast it scrolls. Often-times “voice beeps” play as the text is scrolling to make it seem more like the characters are speaking.

3) Character Portrait

While certainly not a standard in every video game, a lot of them, especially old-school RPGs, have a sprite or animated model to represent the character. This is so the player can get a better view of the person’s expression and attributes that can’t be portrayed in the often-simplified “overworld” perspective that you see and control during regular gameplay. Because of this, character portraits are not usually not displayed during elaborate cutscenes where you can clearly see the character already, or games with more detailed graphics. Also, they tend to not appear for narration (“Jennifer flipped the switch”), and for unimportant NPCs (non-player characters) that are too generic to bother making some new art for them. These portraits can be fully animated or static, but since the entire purpose of them is to show emotion, it’s generally a good idea to have it change expressions. The location and shape of the portrait wildly varies from game to game.

4) Name

The name or title of whoever is speaking. Usually not given to unimportant characters or narration. If the character’s name is unknown and they play a role in the story, their name is usually written as “???” until they get fully introduced.

5) “Continue?”Arrow

Most RPGs possess an icon of some sort that indicates when the line of text has finished scrolling, and you can press a button or click to proceed through the conversation. Typically this icon is an arrow, but it could also be a line, a circle, or a miscellaneous symbol that’s significant to the story.

6) Additional options (fast forward, rewind…)

Usually confined to the “visual novel” genre, these extra options can help make the experience smoother. The ability to fast forward to choices you haven’t made yet is important to quickly explore multiple endings, and the rewind option allows you to take back your choices. However, while helpful, these utilities can often severely disconnect you from the game. On occasion, some games have a “chat log” that you can check and refer to if you missed something earlier in the conversation.

Now that all of these basic components are explained,  I’ll demonstrate how they work in 3 of my favorite games. We’ll take a thorough look at these specific examples to determine what makes a good text box.

Ghost Trick

so-i-enter-the-ghost-world

We’ll begin with Ghost Trick, a game by Shu Takumi, who created the more well-known series Phoenix Wright: Ace Attorney. I was originally planning to focus on analyzing the other game, and talk about Ghost Trick  on the side, but after I stared at at this screenshot for a couple of minutes I learned there was a lot more to this text box than I had originally thought. I decided that since I couldn’t find a quality image of Phoenix Wright’s somehow (and I was way scared to dig too deep for fear of spoilers), I would use Ghost Trick to talk about both. So here I am, doing that. Anyway!

Ghost Trick and Phoenix Wright share a lot of similar qualities. Their text boxes are roughly the same size, shake if a character is shouting, and highlight important words or phrases that the player should remember later. However, they have a number of differences that exemplify how text boxes are designed to fit each game. For example, Ghost Trick, unlike Phoenix Wright, doesn’t possess character names. In Phoenix Wright, showing names make perfect sense you need to keep track of every single detail during a case. However, it would be more awkward for Ghost Trick because most of the characters stay nameless for most of the game and the story would be ruined if their names were revealed too early. Ghost Trick also has a “chat log”, which Phoenix Wright does not. The power to go back and look for clues or foreshadowing in previous conversations would make the game too easy and remove a lot of the tension and mystery.

Ghost Trick also is a good example of a text box that fits the game’s art style. The way everything is drawn, with bright colors, thick, black lines, and simple shading looks like something out of a comic book. To fit this design, the box is white with rounded corners to give it the impression of a speech bubble.

i'm missle.png

Final thought: One my favorite things that I like about Ghost Trick is that if a character is shouting, the words are twice the size they usually are instead of just being in all-caps.

Iji

ijisaveworld

Before I rip this text box to shreds, let me just say that I absolutely love this game. Iji is probably the reason that I became interested in video game design in the first place. It’s one of those games that I love so much that I constantly obsess of all of its flaws, one of them being its text boxes. I HAVE THINGS TO SAY ABOUT THEM.

The main the reason why I think this box is horrible is that the text doesn’t scroll. Instead of scrolling left to right across the screen like everyone else, Dan Remar (the creator of Iji, I truly adore him) decided that he wanted his text box to quickly slide up from the bottom of the screen, all in one motion. This makes dialogue seem tedious and boring at times because huge walls of text show up all at once. It certainly doesn’t help the that the font is kind of small, and a lot of words are crammed into 1 page. All this can seriously overwhelm the player. It’s a shame, because I think Iji’s story is actually really good, but its poor design when it comes to managing that story might make some people ignore it altogether.

On the plus side, the fact that the text comes up all at once means you can quickly skip cutscenes with ease if you just want to get to the next level or boss, unlike games such as Cave Story, which make it feel like a chore because you have to wait for the text to scroll. It also feels a little bit more natural when reading things like logbooks, because those things were written, not spoken.

Undertale

Flowey Howdy.jpg

As you’ll quickly learn throughout the course of this blog, this game makes me so, so jealous. Just…everything is perfect. Even the text boxes.

The first thing I’d like to point out is that there’s no character name. That’s not a problem, though, because names like “Flowey” and “Sans” are pretty easy to remember anyway. Since the character portrait takes up some space, Toby Fox probably wanted to make room for more text.

Making room for text is especially important because of how big the font is. It’s large and easy to read! Lines of dialogue are constructed in such a way that they usually don’t have to split long sentences across multiple boxes. The writing is simple but effective, not only to make its plot more accessible but also to keep the text from looking too complicated or boring to read. Contrast this with Iji, who slams you with paragraphs of information and lore covered in a thick veil of technobabble, making it hard to digest. The story’s there, it’s just hard to get to, and to some people it might not seem worth the effort. (I’m sorry, I can never miss an opportunity to fuss about Iji.)

The other reason why this text box is perfect is how it helps portray characters. The text scrolls appear at a fairly slow, but comfortable pace. It’s slow enough that the characters can seem like they’re actually speaking (and have good comedic timing) and fast enough that you don’t have to sit there and wait for the text to slowly advance. The pace of the text reminds me a little bit of Animal Crossing.

Another thing that reminds me of Animal Crossing is the “text beeps”, which are different for every major character. For example, the comedian Sans sounds like he’s chuckling all the time, while the killer robot Mettaton talks with electronic beeps and screeches. This effect, combined with the scrolling text, helps characters feel more like real people.

Finally, there’s  a weird “*” at the beginning of each line of dialogue. Quite frankly, I have no idea what this thing is  supposed to do. It’s probably to make it resemble Earthbound, a game which it is heavily inspired from, but other than that, I got nothing.

 

And there we have it. Two quality text boxes from three quality games. It’s been a long journey, but let’s review what we learned. Here’s a list of my guidelines to good text box design:

  1. Remember, communication of basic gameplay features comes first. If there’s a tutorial and the player can’t decipher what button is “jump” or how to go into the inventory, then something is horribly wrong with your text box.
  2. Make the text easy to read. I can’t stress this enough. That means it should be big as possible (within reason) and be in a neat, legible font.
  3. Don’t be flashy or distracting. Your text box is not a fireworks show. The best kinds of text boxes are the ones you don’t even think about, and silently do their job.
  4. However, don’t be afraid to experiment with different ways of conveying emotion. (like Ghost Trick)
  5. Don’t be like Iji, just scroll your text. Being confronted with a wall of text all at once is actually very different from the box “filling out” quickly, however insignificant it may seem. Scrolling text helps build suspense while making dialogue flow more naturally.
  6. Try to theme your text box to fit the purpose (Phoenix Wright’s is plain and logical because of all the evidence and testimony you need to deal with) as well as the general aesthetic of the game (Ghost Trick’s comic book style). You don’t want it to have a “medieval scroll” sort of look if your game is about fighting aliens in outer space.
  7. Although that this wasn’t really an issue in any of these examples, remember to be cautious of the size of the box as well as where it is so that it doesn’t potentially interfere with gameplay.
  8. Not a requirement, but it’s good to have different types of text/noises for different characters, to make each of them feel more unique.
  9. Finally, never forget that the actual writing is the most important part. A really good format and presentation cannot save an fundamentally bad story.

I hope you now understand that no matter how meaningless a game element or U.I. design might appear to be, it still ultimately contributes to how the player perceives the story. Take care!

(Photo credits: me, nintendo.co.uk, lparchive.org, me, avclub.com)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s