00:00
00:00
TharosTheDragon
Nyaarg.

Kyle Delaney @TharosTheDragon

Age 36, Male

I r pogammur :3

USA

Joined on 7/1/09

Level:
35
Exp Points:
13,594 / 13,600
Exp Rank:
2,073
Vote Power:
7.68 votes
Audio Scouts
4
Rank:
Town Watch
Global Rank:
55,738
Blams:
20
Saves:
124
B/P Bonus:
2%
Whistle:
Normal
Trophies:
6
Medals:
6,797
Supporter:
7y 5m 25d

Game dev blog: dialogue box UI

Posted by TharosTheDragon - November 10th, 2024


I just had the pleasure of judging the best games of the month! Some of the games had dialogue systems, and among them I found some good examples to demonstrate the different ways dialogue box UI can work in games. Game dev posts about dialogue boxes typically focus on the visual aspect of how to style text that's presented to the player, so I want to talk about the functionality instead.


There are a handful of ways to design the input mechanism for dialogue boxes, and I'll say right now that they're not all equally good! There are some clear winners here, and it has everything to do with letting players read at their own pace. One design principle I try to stick to is to never make the player wait, because waiting isn't a fun game mechanic. But don't feel bad if you got it wrong, because even big studios screw this up! Skyward Sword's dialogue was so slow that I resorted to hacking my Wii to make it faster.


I'll try to come up with a code that's somewhat reminiscent of the Myers–Briggs personality types, so that the options for different dialogue systems can be quickly identified.


T: Typing effect

Often referred to as text scrolling or animated text, this is where the letters are each revealed one at a time as though someone is actually typing out the text in real time before your eyes. This option is so common that I'm sure there are more games that have it than those that don't. It's understandable why developers would want their text to come to life like this so that there's always motion on the screen to grab players' attention, but don't be so sure it's necessary! The alternative to the typing effect is to have the text all get displayed at once, which ensures that it will never be too slow even for the fastest readers.


S: Skip to the end

If there's a typing effect, this is when you can press a button to instantly reveal all the text so you don't have to wait. I highly recommend it to make typing effects unintrusive.


F: Fast forward

This is when you can hold a button to make a typing effect go faster while not being instantaneous. It's rare but I've certainly seen it. It can be acceptable if it's fast enough for even the fastest readers, but problems arise when the player has already read the dialogue before and now they can't quite skip it.


I: Instantly advance

This is when you press a button and instead of going to the end by revealing all the text, it actually skips past the text by advancing to the next bit of dialogue before you can read it. It's a bit of a flub, because if the player doesn't get to read the dialogue then the game might as well skip the whole cutscene instead of just skipping ahead a little.


P: Press a button to advance

This is when you have to perform some kind of input to continue on to the next bit of dialogue once all the text in the current bit is displayed. This is a great way to let people go at their own pace, especially for slow readers.


W: Wait to advance

This is when the dialogue continues on to the next bit automatically after some predetermined delay. You need to pick either W or P or else the dialogue won't advance at all. Technically you could have both, but that wouldn't make a lot of sense design-wise.


So without further ado, here are the examples from October.


iu_1298856_2914727.gif

Too skippable: Bloodlust: Santa Monica (Definitive Edition)

TIP. That's T for Typing effect, I for Instantly advance, and P for Press a button to advance (if you wait for the typing effect to finish). It's unfortunate that this game has the "I" problem, but the dev did say it will be fixed in an update so it may already be fixed by the time you read this.


iu_1298857_2914727.gif

Not skippable enough: HALLOWEEN HUSTLE!

W for Wait to advance. This is an interesting example because it doesn't have a typing effect so the wait isn't that bad, but it still needs to give more control to the player.


iu_1298858_2914727.gif

Just right: The Bugs Manor 🦋 - Prologue

TSP. That's T for Typing effect, S for skip to the end, and P for Press a button to advance. This is arguably the best way for dialogue box UI to work, though I personally am also happy with just P and no typing effect at all.


And there you have it, folks. I don't mean any disrespect towards the games I mentioned or their developers, I just wanted to teach devs about these principles and I saw an opportunity. I have a huge amount of appreciation for the game devs on Newgrounds and I hope they keep making games.


1

Comments

Comments ain't a thing here.