Final Fantasy 1 is one of the earliest games to use dialog boxes for conversation. It helped define many of the conventions we associate with RPG dialog today. RPGs display a lot of dialog, to create a really polished RPG experience; you need to get the dialog box right. Let's start at the beginning by examining Final Fantasy's dialog implementation. Early implementations let us glimpse the root of an idea and tend easier to deconstruct because they're simpler.
Limitations Inform Structure
Like all games Final Fantasy 1 is partially defined by the limitations of it's platform; the Nintendo Entertainment System aka the NES. The NES was made to output to a CRT TV with an aspect ratio of 4:3, to even be legible on that screen the dialog box needs to be pretty large.
One of the NES's limitations is speed. To make a game run efficiently sprites are drawn in 8 x 8 pixel blocks. The dialog box is made from a limited palette of these blocks (See the image below). For speed reasons the dialog box doesn't use transparency and there's visible black border.
Somewhere in the memory of Final Fantasy there's a latin alphabet that represents each character with an 8x8 pixel block. This alphabet contains lowercase and uppercase letters as well as special symbols including punctuation. These blocks are snapped together one after another to form words and sentences. Text rendering is very simple, there's no fancy kerning, it's just a simple monospace font with well designed letter shapes.
How Final Fantasy Presents Dialog Boxes
Dialog boxes in Final Fantasy represent the speech of NPCs and are used to describe interactions with the game world. I see these as roles as distinct. RPG dialog boxes should only ever represent speech of a character in the game. In Final Fantasy they also happen to represent the voice of the unseen narrator who tells you what's in a treasure chest, asks if you'd like to save and that kind of thing. When making a game it's fine to use text boxes for both these use cases but better if they're visually distinct.
The animated image below shows how the dialog box appears in game.
There's a in-transition, then the box persists until the player dismisses it, then there's a out-transition and it's gone! This type of flow is typical of most game dialog boxes. To borrow a term from User Interface design, the box is modal. Modal means that the dialog box steals focus, the player can't move while the box is open, no menus can be opened, all input goes to the dialog box. Most games pause the game world while a dialog is open. You can see the flow of the states for the dialog box below.
The user can dismiss the dialog box by pressing A on the NES controller. Giving the player the power to dismiss the box allows the player to read the box text at their own pace.
In Final Fantasy 1, dialog text always fits in the box. It never has to deal with paging the text into box sized chunks. In the few cases where there's a lot of text, it's broken up into seperate dialog boxes that are loaded from scratch.
Transition-In
The dialog box is revealed pixel row by pixel row from the top of the box to the bottom. The text is already present on the box as it's revealed. This type of effect is generally called masking. The dialog box starts totally masked out, then the mask is reduced, row by row, revealing the box. On the NES this was probably done with a special blitting function, in modern graphic APIs you could use a scissor function such as glScissor or a pixel shader.
Open the dialog box triggers a sound effect. The time from the transition is quite slow taking about 0.8 seconds.
Transition-Out
The transition out is the same as the transition in but reversed. The box is masked out from the bottom up until it entirely disappears.
It takes the same time, around 0.8 seconds and triggers a slightly different sound effect.
Metrics
The NES has a resolution of 256 by 240 pixels. The default dialog box is 224 by 88 pixels, taking up 87.5% of the screen width and ~36% off the height. The image below shows how much of the screen is taken up at different aspect ratios.
Each textbox fits 175 characters, just a little longer than a twitter post.
The text in the box has horizontal and vertical padding of 16 pixels (including the border area). Or ~0.75% left and right pad and ~18% on pad of the top and bottom. The width is 224 pixels and the height 88 pixels. Here is the padding shown visually (not accounting for any of the black outline pixels).
The dialog box is pleasingly sized for the screen, made readable with padding and contains a good amount of information. These are reasonable defaults to use when creating your own textbox.
What Does the Final Fantasy Dialog Box Get Wrong?
The dialog box in Final Fantasy 1 gets a lot right but there are few areas that could be improved.
- The In Out Transitions are too slow
- Spoken text isn't typed out
- There's no chunking code
- Dialog box is weakly tied to the speaker (are you speaking or the NPC, it's hard to know!)
Chunking is a method used when there's more text than a single dialog box can display. The text is cut up into dialog box sized chunks. A continue caret indicates to the user that there is more text to read and pressing the accept button, shows the next chunk rather than dismissing the textbox.
Hopefully deconstructing one of the earliest textboxes will inspire you when writing one for your own RPGs.