HTML-like formatted text in XNA (fonts, colors and images)

Check out the updated version, now with a complete example project and MSPL licensing.

After looking for something that will help me display nicely formatted text in XNA I ended up
writing my own somewhat naive text markup rendering engine. I really like the result, the thing does text-wrapping with multiple fonts, colors and images and I even added conditional rendering, you can find the source code at the end of the post. For now here is what it can produce:

If you recovered after the crazy colors burning your retina keep reading. Here is the code that rendered into the abomination above:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Quisque tincidunt elit et augue viverra vel lacinia risus varius.
Morbi rutrum, orci auctor congue molestie.
Nibh neque semper orci,

at volutpat ligula libero sit amet sapien.



We are here.


We are there.

  • The tag sets font and color. Nested text blocks are supported and will inherit any missing attributes from the enclosing parent tag.
  • The tag obviously specifies an image and it also support a color attribute.
  • The
    tag inserts a line break.
  • The tag is the interesting one and is used for conditional rendering. I came up with it when I had to render text differently on Windows and the Xbox but I used it everywhere after that. Probably not a very good idea to use it too much.

The markup engine uses little strategies (I called them resolvers) to translate from an attribute string to whatever it needs to render the markup, e.g. the image resolver translates a string into a Texture2D. The source text is “compiled” into an representation that can be drawn repeatedly without generating garbage (at least this was my intention). Here is the relevant C#/XNA code:

public override void LoadContent() {
if (content == null)
content = new ContentManager(ScreenManager.Game.Services, "Content");
font = content.Load("Font1");

//...

//setup the font, image and condition resolvers for the engine
//the resolvers are simple lambdas that map a string to its corresponding data
//e.g. an image resolver maps a string to a Texture2D
var fonts = new Dictionary();
Func fontResolver = f => fonts[f];
var buttons = new Dictionary();
Func imageResolver = b => buttons[b];
var conditions = new Dictionary();
Func conditionalResolver = c => conditions[c];
markupTextEngine = new MarkupTextEngine(fontResolver, imageResolver, conditionalResolver);

fonts.Add("Font1", content.Load("Font1"));
fonts.Add("Font2", content.Load("Font2"));

buttons.Add("Planet1", content.Load("Planet1"));
buttons.Add("Star1", content.Load("Star1"));
buttons.Add("Star2", content.Load("Star2"));

conditions.Add("IsCondition1", false);
conditions.Add("IsCondition2", true);


buttons.Add("B", content.Load("Textures/Controller/xboxControllerButtonB"));

var text = @"
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque tincidunt elit et augue viverra vel lacinia risus varius.
Morbi rutrum, orci auctor congue molestie.
Nibh neque semper orci,

at volutpat ligula libero sit amet sapien.



We are here.


We are there.

";
//generate the compiled representation
compiledMarkup = markupTextEngine.Compile(text, 800);
}

public override void Draw(GameTime gameTime) {
//...
spriteBatch.Begin();
var location = new Vector2(100, 100);
//this is easy
compiledMarkup.Draw(spriteBatch, location);
spriteBatch.End();
}

Some things in the implementation are quite naive, my C# skills being what they are – I probably speak C# with a Java accent. The code is not very robust and the error reporting is terrible, the thing will basically explode with exceptions if there are any problems, but it does what I need it to do so here it is. Drop me a note and maybe show a link to here if you are using it.

Source code MarkupTextEngine.cs

2 thoughts on “HTML-like formatted text in XNA (fonts, colors and images)

Leave a Reply

Your email address will not be published. Required fields are marked *