Making Dialog Fun

October 27, 2010

I’m working on a couple of projects that are text heavy so I wanted to spend time building a really good dialog box system.

This certainly doesn’t look like much, but I’m really pleased with the little touches. Artistically speaking I’m pleased with how organic this feels both visually and auditory. The only thing I’d change is the font which doesn’t match the feeling I’m trying to convey.

Get Adobe Flash player

Here is my source-code. Note: This stuff is pretty broken since Flixel 2.35.


Technology

The dialog is supplied from a Chat-Mapper XML project file that I parse with the couple of classes I’ve been blogging about recently.

Flixel.org forum member ShooterMG created a class (FlxDialog) which is a simple little object to handle dialog boxes and typing text. I took this code and started hacking it to my needs, passing in dialog text from my Conversation object.

Flixel.org forum member Cai created a set of classes for bitmap text. I really liked his implementation as it allows for non-uniform character widths. I hacked the FlxBitmapText class to allow keyword highlighting, word-wrapping, and page breaks.

There’s a lot of code at play here, but essentially I can pass a super long string with keywords to the dialog box and it’ll just figure everything out without a fuss. Pretty cool.

But that’s just the technical stuff. The real purpose behind all of this is to make dialog boxes fun.

Inspiration

I played a lot of Square RPGs growing up and have read thousands of dialog boxes full of text. In these games it rarely felt like a chore to scroll through text. Part of this was the concise writing, but another important element was that Square worked hard to make dialog boxes fun and satisfying.

Final Fantasy Tactics had one of the most satisfying dialog box systems

Final Fantasy Tactics is what I consider the pinnacle of dialog box “fun”. The palette was warm and inviting and a lot more subtle than earlier RPGs. The texture of the panel added to the warmth and gave it an organic feel. But my favourite element is the “clicks”. It had a sound of a really deep typewriter and you could almost feel each letter scratching the paper. Here’s a video if you want to hear this in action: http://www.youtube.com/user/PlainOlJoe#p/u/362/_4WDoPFderU

Tactics was one of the few Square games that used audio cues for dialog but I feel it brought a sense of warmth to the text not seen in other titles.

Tactics also retained text streaming, an almost universal RPG element that slowly types the text out to the screen one character at a time. It’s subtle, but this has a huge impact on how the user perceives the story. Even the most rapid text streaming in games helps prevent the user from getting overwhelmed by a large body of text. Psychologically it also has an effect of pulling the player into the text.

Text heavy games need to have a satisfying dialog box system that helps pull the player into the universe and make them want to keep reading.  Audio cues, an inviting palette & design, as well as streaming text character-by-character can go a long way to make text more exciting and easier to digest.

Other influences:

Final Fantasy VI: Square had a very standard and simple dialog box system in the 16bit era. It had simple text with no colour highlighting and generally no audio. http://www.youtube.com/watch?v=2x0VGtqDvKc&feature=related

Legend of Zelda Link to the Past: The slightly random audio cues helped make the text stream more interesting as did the small audio cue at the end of each page. http://www.youtube.com/watch?v=RgVXmj-ThmE&feature=related

Xenogears: No audio cues again from Square here, but each character has a more subtle “fade-in” as the dialog progresses.
http://www.youtube.com/watch?v=laqkbcAl30o&feature=related

{ 1 comment… read it below or add one }

Alex July 10, 2012 at 2:00 pm

Hi Kayla,

Just found this post and really appreciate what you did. Also a huge fan of FFT’s dialog boxes.

I’m looking at adding a streaming dialog box to a game I’m developing, and really like the coloring and word-wrapping system in your version. Would you be willing to share your source code for this?

Cheers and best of luck,
Alex

Reply

Leave a Comment

Previous post:

Next post: