DIALOG BOX IN JRPGs

Cover image: Heart vector created by freepik

The dialog box in a video game is an important factor at least in the RPGs, since the narration of the story is a valuable part in these genres. The dialog box conveys what characters are saying in their world to the player so, it’s a UI element the player is going to see over and over again. All this creates the necessity to put special attention to the design of it.

Seeing this time the JRPGs where the characters’ sprites share screen with the dialog boxes, these last frequently respect a standard structure consisting of: a delimited container, the dialog text; a resource to point out the speaker (a portrait, the character’s name or a tail if it’s a speech bubble); and an indicator to show that there’s more text to read. This basic construction is to accomplish a functional dialog box, however this doesn’t prevent adding other elements to create different designs and thus improve the player’s experience.

So, with this in mind, let’s analyze how the dialog boxes have changed considering the pass of the time, the technological advances and the video games themselves.

LET’S OBSERVE THE BASIC OF THE FIRSTS YEARS

  • FRAME, BACKGROUND AND AN INDICATOR TO CONTINUE

As said before, the video games that will be mentioned obey the characteristics of being JRPGs and that have the character sprites sharing the same screen of their dialogs. Then, the first video game that follows this description is “Dragon Warrior” (“Dragon Quest”) released firstly in Japan in 1986 and in North America in 1989. It presented the dialog box one layer above the images. It was black, written in white and framed by a white border. In the English version, the dialogue was divided into paragraphs enclosed in single quotes and there was no visual mark to indicate the speaker. It was until “Dragon Warrior II (JP1987 / NA1990)” that a centered white triangle was employed to communicate the presence of more text to read. 

“Dragon Warrior” screenshot.
“Dragon Warrior II” incorporated a white triangle at the center of the box that indicated that there was more text to read.

The border and text in white on a black background became a standard during more or less 4 years, so there were a lot of games that used it. For example: “Destiny of an Emperor (JP1989 / NA1990)”, “Ghost Lion (JP1989 / NA1992)”, “Bikkuriman World – Gekitou Sei Senshi (1990)”, or “Lagrange Point (1991)”.

However, there were video games that decided to set aside this standard and experimented a little. Such is the case of “Faxanadu (JP1987 / NA1989)”, which utilized a green frame with pink details and squares with circles at the corners to give the idea of a metallic structure. Besides, it was one of the first games that employed illustrations to represent the sellers. A peculiarity of this game was that a down-pointing triangle meant there was more text, while an up-pointing triangle represented that the dialog had finished.

“Faxanadu” was one of the first games to experiment with the frame’s design of the dialog box.

In 1987 “Final Fantasy” introduced another standard design: a blue box with a beveled edge gray with white. This composition was used by the “Final Fantasy” series until “FFVII (1997)”, “Brain Lord (1994)” and “Bahamut Lagoon (1996)”.

The video games referenced so far had dialog boxes that appeared one layer above the images and when the player was talking to a character. Nonetheless, there were video games that reserved a space for the dialogs such as “The Magic of Scheherazade (JP1987 / NA1989)”. This one had a black space at the bottom that always showed the status, except when talking to an NPC, where it was replaced by the dialog. In “Akuma Kun Makai no Wana (1990)” the inferior black space was for the status and there was a black space at the top saved for the dialog box that was always visible regardless of whether or not there was text to display.

In “The Magic of Scheherazade” the status was replaced by the dialog at the moment the character interacted with an NPC.
The dialog in “Akuma Kun Makai no Wana” is always visible regardless of whether it is empty.
  • WHO’S SPEAKING?

When a character is speaking, it’s important to have a way to identify him/her. This is why the video games had adopted diverse resources to achieve this. As said before, “Faxanadu” applied portraits, but they were just for the merchants. It was “Final Fantasy II (1988)” the first game that used a way to indicate which important character was speaking. What it did was place the name followed by a colon and, in the same line, continue with the dialogue. The paragraph had a hanging indentation.

“Final Fantasy II” was one of the first games writing the name of the character in the dialog box.

This method, just varying the indentation type, were employed for example by the “Final Fantasy” series until “FFVI (1994)”, “Bahamut Lagoon”, “Breath of Fire I (JP1993 / NA1994)” and “Chrono Trigger (1995)”.

“Breath of Fire I” screenshot.

This practice changed a little in games like “Double Moon Densetsu (1992)” or “Brain Lord”, which add a line break after the colon. This approach resulted in keeping the names fixed to just scroll the dialog. The first game applying this was Sweet Home (1989) where the name was part of the frame of the dialog box.

“Sweet Home” put the name in the frame, and the dialog was the only one that scroll when it was necessary.

The combination of this practice with a portrait was featured in “Fire Emblem: Gaiden (1992)”, where the names were in square brackets, it was fixed, and the character’s photo was outside the dialog box, located above.

The dialog box in “Fire Emblem: Gaiden” had the portrait and name in fixed position.

However, one of the first game employing the character picture was “Sansara Naga (1990)”.

“Sansara Naga” screenshot.

Finally, the third form to point the speaker was through a tail, what it meant the introduction of speech bubbles (also speech balloons, dialogue balloons or word balloons). One of the first video games that took advantage of this component was “Final Fantasy Mystic Quest (JP1993 / NA1992)”. The speech balloons were rectangles with a tail pointing the speaker. In this case, the brighter background color indicated the most recent dialog.

“Final Fantasy Mystic Quest” speech bubbles.

GIVING THE NEXT STEP

The previous sections served to stipulate the basics of the various types and structures that a dialog box can have. Therefore, it is time to observe the change in designs and styles that dialog boxes underwent thanks to the fact that with technological advances the number of colors, textures and effects that could be used increased.

  • A LITTLE DESIGN FOR THE BACKGROUND

It was already described how, although the frame did have diverse designs, the background color of the dialog box had been frequently black or blue. A game that broke this aspect was “Ganbare Soemon Gaiden: Kieta Ougon Kiseru (1990)” which is based on a Japanese-style world view set in Japan, that’s why it wanted to offer a dialog box that harmonized with this concept. Its dialog box had the form of a Japanese scroll that, in fact, used an animation that tried to give the idea of a scroll unrolling.

The dialog box is a Japanese scroll.

To talk about the next innovation in the background color of dialog boxes, let’s take into account that at until at least 1995 the style of the menu and the dialog box were linked, which means that changing the visual characteristics of the menu meant changing those of the dialog boxes. This was taken advantage of by some video games to incorporate an option to change the background color, affecting also the dialog boxes. Here, it was possible to obtain the color the player wanted by modifying the RGB values on the Config menu. Furthermore, there were even games that allow to use textures. “Final Fantasy VI (1994)” had both alternatives.

“Final Fantasy VI” had options in the Config menu to change the texture or the background color of the menu and dialog box.

Adding low opacity to the background was another popular mode that allowed the player to enjoy the scenarios while reading the dialogs. “Lunar: The Silver Star (JP1992 / NA1993)”, “Suikoden (JP1995 / NA1996)”, and “Grandia (JP1997 / NA1999)”,” chose to use it.

“Suikoden” screenshot.
“Grandia” screenshot.

Some recent games use opacity and avoid the border to create a less invasive dialog box. “Tales of Berseria” (JP2016 / NA2017)” is an example.

“Tales of Berseria” screenshot.
  • GOOD BYE TRIANGLES, HELLO TO OTHER ICONS

The generic symbol for telling the player to press a button to continue the dialog was a triangle. This could vary in color, border or direction, but it was a triangle and was the most used figure in the video games. An exception was “Sweet Home” that utilized a circle, however the real innovation came in 1995 with “Terranigma”, which changed the popular triangle for the icon of a page with its corner flipping.

In “Terranigma”, the triangle that indicated that the dialogue was continuing was replaced by a page icon.

From here, video games took different inspirations to create unique icons that worked to instruct the player to press a button to continue. For example, in “Kartia (1998)” the story included magical cards, so the indicator was an arrow within a spinning card.

“Kartia” kept the theme of the cards, even in its dialog box.

In “Thousand Arms (JP1998 / NA1999)” it’s a hammer, the protagonist’s weapon.

“Thousand Arms” put a hammer on its dialog box.

Or in “Tales of Destiny (JP1997 / NA1998)” it’s possible to appreciate the shape the circle button of the Play Station control because it was a literal way of informing the player which button to press to continue.

“Tales of Destiny” applied an icon with the form of the circle button of the Play Station.
  • MULTI-TASK SPEECH BALLOON

The speech bubble for dialogues was already mentioned, but over time it was exploited in others ways. 

The word balloons have the characteristic that depends on the form it can refer to a speech, whisper, thought or scream. This flexibility was favorable for video games due to, instead of using capital letters for the screams, they preferred the jagged outline. Or it was possible to avoid the parenthesis to communicate thoughts employing the chain thought bubble and the “fuzzy” bubble.

“Live A Live (1994)” used the normal rectangle and the “scream” form. It also put icons and even characters inside.

Suikoden II (JP1998 / NA1998)” simply used the speech bubble for icons that expressed some sentiment. For example, a heart for love or a sweat drop for stress or concern.

In “Suikoden II” the speech bubble contained icons that expressed feelings.

Or more recently, in “Ni no Kuni: Wrath of the White Witch (JP2011 / NA2013)” the bubbles are to enclose the actions within a battle and the name of the spells and techniques performed by allies or enemies.

The battle screen of “Ni no Kuni: Wrath of the White Witch”.

OH! THERE ARE A LOT OF STYLES!

Analyzing the dialog boxes employed since the JRPGs began, there are many styles and these have been increasing thanks to technological advances and, of course, the creativity of designers. It can be noted how, regardless of the limited resources, the dialog boxes creators did a great job and laid the groundwork and inspired the designers who followed them. That’s why in recent video games, it’s possible to observe retro designs, experimentation, or combinations of structures and styles discussed here. In the end, what counts is that the main objective is to obtain readable dialog boxes, that do not break with the flow of the game and that their design harmonizes with the video game.

Let’s remember that a game involves a lot of visual elements that require time and effort to ensure that the gamer has a good experience when playing.


The end of this post is here! I listed many games, but I know I was missing many more. However, I hope that with the ones I mentioned, I have managed to explain a lot about things related to dialog boxes. I hope you like this post and if you want to help me to expand this topic, please let me know with your comments or by email. But for now, see you in my next post!!!

LINKS OF IMAGES / VIDEOS

Video GameLink
Akuma Kun Makai no Wanahttps://www.youtube.com/watch?v=pNEQ2M4iMek
Bahamut Lagoonhttps://www.youtube.com/watch?v=WsREYx1LLWY&t=444s
Bikkuriman World – Gekitou Sei Senshihttps://www.youtube.com/watch?v=lPtL3qHP8b0&t=351s
Brain Lordhttps://www.youtube.com/watch?v=m4OreVjtkNU&t=347s
Breath of Firehttps://www.youtube.com/watch?v=oxmU6rURGvo
Chrono Triggerhttps://www.ff6hacking.com/forums/thread-3455.html
https://www.youtube.com/watch?v=fEcwtSkRz2Q&t=4663s
Destiny of an Emperorhttps://www.youtube.com/watch?v=dDOg6yaFeHg
Double Moon Densetsuhttps://www.youtube.com/watch?v=jlUvrubvqa4&list=PLKua6Rkz_ciwAUwaVYjkRSbq8Sb_El3C9
Dragon Warrior (Dragon Quest)https://www.youtube.com/watch?v=jmzHrNVelL0
Dragon Warrior II (Dragon Quest II)https://www.youtube.com/watch?v=d4NsE4tpb6k
Faxanaduhttps://www.youtube.com/watch?v=p4B2ZuY1fmY
Final Fantasyhttps://www.youtube.com/watch?v=fTdlzqhSdt8
Final Fantasy IIhttps://www.youtube.com/watch?v=zENBscPiExo&t=198s
Final Fantasy VIhttps://www.youtube.com/watch?v=iGNskqYu2_0&t=10005s
https://www.ff6hacking.com/forums/thread-3455.html
Final Fantasy VIIhttps://www.youtube.com/watch?v=KhSicdniIng&t=226s
Final Fantasy Mystic Questhttps://www.youtube.com/watch?v=AyVxBfFc6-c&t=414s
Fire Emblem: Gaidenhttps://www.youtube.com/watch?v=heaj2HLDdBE
Ganbare Goemon Gaiden: Kieta Ougon Kiseruhttps://www.youtube.com/watch?v=iQoGfWSF9b8
Ghost Lionhttps://www.youtube.com/watch?v=D57pzclvIAU&t=2478s
Grandiahttps://chickgreenway768.weebly.com/grandia-1.html
Kartiahttps://www.youtube.com/watch?v=4ACVyBJfQvI&t=92s
Lagrange Pointhttps://www.youtube.com/watch?v=j5Xu-ZGfAhM&t=8696s
Live A Livehttps://www.youtube.com/watch?v=vUOI1qtaOWY&list=PL950A7D15C39E8ED8
Lunar: The Silver Starhttps://www.youtube.com/watch?v=izav0KeT_AA
Ni no Kuni: Wrath of the White Witchhttps://hardcoregamer.com/2013/02/08/review-ni-no-kuni-wrath-of-the-white-witch/29090/
Sansara Nagahttps://www.youtube.com/watch?v=qUO4GnuvhXg
Suikodenhttps://lparchive.org/Suikoden-(by-The-White-Dragon)/Update%2030/
Suikoden IIhttps://lparchive.org/Suikoden-II-(by-The-White-Dragon)/Update%2006/
Sweet Homehttps://www.youtube.com/watch?v=n5JqOc-8zBU
Tales of Berseriahttps://www.reddit.com/r/PS4/comments/5w8urz/tales_of_berseria_screenshot_i_dont_think_hes_a/
Tales of Destinyhttps://www.youtube.com/watch?v=7PCJtdF-AAA&t=2979s
Terranigmahttps://www.youtube.com/watch?v=Nsb2eFt7BCs&t=62s
The Magic of Scheherazadehttps://www.youtube.com/watch?v=SvBRURRas58
Thousand Armshttps://www.youtube.com/watch?v=Wslu_75z8nM&list=PLPvyvYJLfkXiHn6TP3NhmOa7O6OTtQslY
Links to the images and videos used in this post.

I'm a Graphic Designer in love with Otomes and JRPG. I like the interface design area and that's why I really like to talk about this theme. You can conquer me with a good videogame Illustration book and a good capuccino.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s