Robot Foot Games Helping you improve your games as we improve our own. :)

Text Helper Class

Here's a little text class that will help you keep things organized and if you have a bunch of SpriteBatch.DrawString(...) calls. It also has text alignment as you can see in the picture below and that comes in pretty handy. If you want to align your text to the very top right then specify the very top right position. Ex: new Vector2(viewport.Width, 0) or BottomCenter would look like this: new Vector2(viewport.Width / 2, viewport.Height).

UPDATE(July 5, 2010)

• Project download. I added a zip containing the project so you can see how things are laid out if you’re having troubles. Download link follows.

• Text wrapper. Example: string myText = TextHelper.WrapText(font, "add lots of text if you want here", width);. Width is the amount of space until a new line is started. A value of 400 would mean that each line can be up to 400 pixels wide before a new line is started.
• Auto updating. Whenever you change the text the fontSize and fontOrigin are updated through the UpdateText(...) function. Now if you have something aligned on the right side of the screen and you change its text it will update and display correctly (it didn’t align correctly beforehand). This happens automatically whenever you change the FontText variable. Example:TextList[0].FontText = “Hi”;
• Naming convention. I also change how the TextHelper objects are stored so instead of using TextList[3].FontText... to access and change the text you assign names to each TextHelper object so they're easy to remember and access. At the top of your class you now need to create all of your TextHelper objects. Example: TextHelper text_score; or TextHelper text_lives; etc. Then in your LoadContent(…) method where you previously used TextList.Add(…) you can replace those withTextList.Add(text_score); or TextList.Add(text_lives); etc. This is a tiny bit more work but it pays off in the end. Instead of using TextList[2].FontText = “new text”; you can use text_lives.FontText = “99”;. It’s a lot easier to deal with names than numbers so this is more of a usability update then anything.
• Fading text. I’m using Nick Gravelyn’s timer/interpolator code because it’s awesome and works perfectly for this. You’ll need to download it here and add it to your project. Quick run-through of his code - timers are used to create timers - interpolators are used to gradually change things. Since fading gradually changes the alpha value of our text using an interpolator makes perfect sense. You should read through his blog post about it before you move on to get a more complete explanation, “Using interpolators and timers”. An Update(…) method was added to the TextHelper class and just as you draw all the objects using foreach(TextHelper t in TextList) { t.Draw(spriteBatch); } we now need to do that in our Update(…) method. Add this: foreach(TextHelper t in TextList) { t.Update(gameTime); }
• Pulsing text. This just fades the text in/out and allows you to say how quick it should do so. Example: text_lives.Pulsate(3);will fade out for 3 seconds, fade in for 3 seconds, repeat.

That’s it for this update. I just gave a quick overview of the functions above so download the project if you're having trouble understanding it all.

Here's the TextHelper class in its entirety:

Create a new class called 'TextHelper.cs', replace its contents with the class above and change the namespace to match the namespace of your project.

Now for the implementation! To get it to work in your game you'll need a SpriteFont to draw the strings, a TextHelper variable for the actual string and (optional but recommended if you have lots of strings) a List of your TextHelper objects so you can just run through a loop of all the TextHelper's you have and draw/update them.

LoadContent(...) is a good place to create all of your text lines and we have to create our SpriteFont in here anyways so we'll keep it simple and in one place.

You'll have to either create/add your own SpriteFont or use one that you already have in that class. These are just some test instances so we can make sure it works. If you look at the first TextList.Add(...) line you'll see that I didn't include TextAlignment.(...). In this case it just defaults to TextAlignment.TopLeft.

In the Update(...) method, add the following if you're using the List of TextHelpers. Otherwise you can update each TextHelper individually.

Finally in our Draw(...) method just add these 2 lines and everything should work!