Nuclex.Fonts: Tutorial

in

This tutorial guides you through setting up Nuclex.Fonts in your project.

Instead of working your way through the tutorial, you can just open the demo project provided with the download. This won't teach you how to integrate Nuclex.Fonts into an existing project, however ;)
Download the development kit here: Nuclex.Fonts.

  • 0) Recommendation: Copy Nuclex.Fonts.dll and Nuclex.Fonts.Content.Pipeline.TrueTypeImporter.dll into a folder within your project directory

    You can of course also keep these files in a seperate directory, but copying them into your project direcotry will ensure that you can easily copy the project over to another machine as well as guarantee that the same version of the component is still there when you open the project in the future.

  • 1) Add Nuclex.Fonts.Content.Pipeline.TrueTypeImporter.dll to the list of content pipeline assemblies for your project

    You can find the list of custom content pipeline assemblies in your project settings:

    The properties entry in the project context menu

    Click on "Add" and select Nuclex.Fonts.Content.Pipeline.TrueTypeImporter.dll

    Adding a custom assembly to the project's content pipeline

    Content pipeline assemblies serve as plug-ins to the XNA build system. The assembly you just added contains the TrueType importer that will create platform neutral bitmap fonts from .ttf font files.

  • 2) For each font you want to import, add a .ttfimport file to your project tree

    The .ttfimport files are XML files containing instructions for the importer, telling it which font to import and what size and style you want it to be. Here's an example that imports the windows Arial font in a size of 12 units:

    <?xml version="1.0"?>
    <TrueTypeImport>
      <Path>C:\Windows\Fonts\Arial.ttf</Path>
      <Size>12</Size>
    </TrueTypeImport>

    The easiest way to set up these files is choose "Add Item" from the project's context menu...

    Adding a new project item in Visual C# 2005 Express

    ...select the "XML File" icon and enter the full name of the file (eg. MyFont.ttfimport) overriding the .xml extension.

    Creating a new .ttfimport entry using the new project dialog

    The file you just added should immediately be recognized as an XNA font resource and have the proper Content Importer and Content Processor set like in the picture shown below.

    Content pipeline settings for a TrueType font import

  • 3) Use it!

    Now all you've got to do is to load the imported fonts in your game using the XNA ContentManager class. Add a normal reference to Nuclex.Fonts.dll to your game and add the font to your game class (or where ever else you need it):

    // Import the Nuclex.Fonts namespace for convenience
    using namespace Nuclex.Fonts;

    /// <summary>Font rendering demonstration</summary>
    public class MyGame : Microsoft.Xna.Framework.Game {

      /// <summary>An example BitmapFont</summary>
      private BitmapFont myFont;

      // ...
    }

    In your LoadGraphicsContent() method, load the font:

    /// <summary>
    ///   Load your graphics content. If loadAllContent is true, you should
    ///   load content from both ResourceManagementMode pools. Otherwise, just
    ///   load ResourceManagementMode.Manual content.
    /// </summary>
    /// <param name="loadAllContent">Which type of content to load.</param>
    protected override void LoadGraphicsContent(bool loadAllContent) {
      if(loadAllContent) {
        this.myFont = this.content.Load<BitmapFont>("Content/MyFont");
        // TODO: Load any ResourceManagementMode.Automatic content
      }

      // TODO: Load any ResourceManagementMode.Manual content
    }

    Finally, to draw some text to the screen, you can call the drawText() method of your new font:

    /// <summary>This is called when the game should draw itself</summary>
    /// <param name="gameTime">Provides a snapshot of timing values.</param>
    protected override void Draw(GameTime gameTime) {
      graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

      // TODO: Add your drawing code here
      this.arial56.DrawString(
        new Vector2(200.0f, 60.0f), // location in pixels from upper left
        "Hello World!",
        Color.White
      );

      base.Draw(gameTime);
    }