How to draw a string to the screen by fading in one letter at a time?

Question

I'm making a text adventure-style game with MonoGame. I have created a TextBox class which prints text onto the screen one letter at a time (like it's being typed). It does this by storing received text in a buffer string, and using Update() to periodically push letters into the output string, which is then drawn to the screen (I've written a function for wrapping, so I've had no problem there).

However, this method has some significant limitations - inability to change the font or colour of individual lines, for example - but there is something specific I am trying to achieve: I want each new letter to fade gradually onto the screen instead of just appearing instantly. So far, I've had no luck finding a way to do this.

At the moment, I've been attempting to remake the TextBox class to print each character with its own draw call, allowing me to change a letter's colour - and therefore alpha - individually. However, I've ran into a problem. I am using spriteFont.MeasureString() to allow me to draw the letters in the correct positions relative to each other, but it hasn't been giving me the values I need. Letters are drawn too close together, as it seems to be measuring the actual pixel width of the glyph, rather than the space they would take up if the string was printed all at once.

So, my question is: is there a way around this particular problem with MeasureString, or is there another solution entirely to make each letter fade in individually?

Answer 1

You're facing into a problem that most game devs face in relation to enriching your HUD/User interface to be more dynamic.

In the end, you either find a library, or define your own requirements and write your own functions. It's a well duh moment yes, but chances are that libraries might be a 90% fit if you find the right one, even better if you can find an opensource one close to your needs and can contribute. But that's getting extreme to a degree.

The other extreme, write your own. I chose this path myself, and for me it was the right fit. I had a need to not only integrate text glyphs but also icons (such as xbox controller icons into my text). All I can give you is a few tips on what I found to work.

• Define exactly what functionality you are after. It will save you so much time if you can just sit down and define all the things you would need, then want and what would be a nice to have.
• Weigh up the compromises on libraries or if you were ever using something like Unity, plugins for example.

• If you choose the coding route, then you do have flexibility. Things I have learnt from my own build.

  • Every glyph is an object, work out what attributes you need.
  • Do not build all the functionality into the glyph object. But basic stuff like colour, size, font type, alpha etc, fit perfectly (and fit what you are thinking of above).
  • Overlay your glyph string functionality over the top. You have all the data, so you can create your overlay functions such as width. Others you might want to consider is things like centring text.

I have some classes I have written to enable the above mentioned functionality, they are a little embedded in my game. But i'm happy to discuss/share what I have if you do proceed down that path.

Answer 2

Rendering type is quite a difficult task, and it looks like you're trying to re-implement the text renderer with tools that aren't meant for that. See if you have access to some plugin or other open-source tool that allows you to render rich text. Then you'll have more control over how the letters are rendered.