Perf Tip: Put Your Bitmap Fonts in an Atlas!

Mike — Wed, 04 Mar 2020 18:54:34 +0000

Did you know that Bitmap Fonts can be added to the same Texture Atlas as the rest of your UI textures? I sure didn't. Read on to see how I measured and optimized my game's UI performance.

Outline

Background info and example from my game
Packing fonts in your UI Texture Atlas
LibGDX: Tell your Bitmap Font to use the new Atlas

Background

In my previous post, we learned about the importance of minimizing texture bindings in OpenGL. Using Texture Atlases is one of the easiest and most effective ways of optimizing your game rendering.

The LibGDX Wiki and many tutorials do a great job at recommending and explaining the use of atlases for your game world, but it was not obvious to me that you should also pack your Bitmap Fonts with your UI textures.

While making Santa Skate, I used the Hiero tool to generate the .fnt and .png files for my fonts. I generated four fonts, each of which had a 512x512 texture with mostly empty space.

What's the problem?

In the screenshot below, there is a typical scene from Santa Skate. There is a mixture of game world sprites and Scene2D UI elements. I had already gone through efforts to minimize draw calls/texture bindings on the game world, but I hadn't put much thought into the UI layer.

Measure before optimizing

After setting up the GLProfiler, I was surprised to see 13+ texture bindings in the UI layer per frame!

Why so many texture bindings?

The reason this happens is that the Scene2D Stage draws each Actor in the order they were added to the stage. Some of those actors need to draw both an image and text, which required multiple texture files in my project. The progress bar and the lower power-up icons (which render one at a time) are clear examples of this.

Packing your fonts?

While searching online for tips on optimizing Scene2D performance, I found some forum posts that mentioned packing your fonts with the rest of the UI graphics. This post by 'davedes' on java-gaming.org was especially useful. In hindsight, that tip made perfect sense and I'm a little annoyed that I didn't think of it!

Following that advice, I packed up all of my UI layer graphics, fonts, and particles into a single texture atlas.

The result?

Only 5 texture bindings/draw calls in the UI layer per frame!

Why not 1 draw call? My UI uses multiple Group actors, which can trigger SpriteBatch flush() calls that force a texture binding.

Packing fonts in your UI Texture Atlas

Open your favorite texture packer tool. I really like GDX Texture Packer GUI.
If you have a UI textures project already, open it. Otherwise, add all of your UI graphics to the list of files to pack.
Add your bitmap font PNG files to the list!
Turn on the option "Strip whitespace Y" to get rid of all the empty vertical space in your fonts.
Configure the other options to your needs.
Pack it!

Tell your Bitmap Font to use the new atlas

When you create Bitmap fonts with tools like Hiero, the .fnt file references the PNG that was generated with it. We won't be including those PNG files in our assets anymore, so we need to tell the BitmapFont classes where to find the atlas.

If you're using an AssetManager to load your resources, it only takes a couple lines of code to update your fonts to use the Texture Atlas. Create a BitmapFontParameter object, and set the atlasName property to the internal filepath of your texture atlas definition file (normally a .atlas or .pack extension). Pass that parameter as the third argument to the AssetManager load() function.

For my game, this is how I updated all 4 fonts. No other code changes were required!

  // 1. Create a BitmapFontParameter, pointing to your atlas
  BitmapFontLoader.BitmapFontParameter fontParameter = new BitmapFontLoader.BitmapFontParameter();
  fontParameter.atlasName = "ui/gameui.pack";

  // 2. Pass that parameter as the third argument to "load"
  assetManager.load("fonts/red32.fnt", BitmapFont.class, fontParameter);
  assetManager.load("fonts/red64.fnt", BitmapFont.class, fontParameter);
  assetManager.load("fonts/yellow64.fnt",BitmapFont.class, fontParameter);
  assetManager.load("fonts/yellow32.fnt",BitmapFont.class, fontParameter);

If you are not using AssetManager and are creating your BitmapFonts manually, you will need to pass in the TextureRegion to the constructor.

  // This code has not been tested!
  // Consider it inspiration.

  TextureAtlas atlas = new TextureAtlas(Gdx.files.internal("textures/gui.pack"));

  BitmapFont font = new BitmapFont(
    Gdx.files.internal("fonts/yourFont.fnt"),
    atlas.findRegion("yourFont")
  );

How To Use The LibGDX GLProfiler

Mike — Wed, 26 Feb 2020 02:02:21 +0000

When optimizing a LibGDX game's performance, sometimes you need to look under the hood. Let's add the GLProfiler to a Screen and see how (in)efficiently we're rendering.

Why?

In OpenGL, binding textures on the GPU can be an expensive operation. For each texture switch, there is a draw call. By minimizing these calls, you can improve rendering performance.

Thankfully, LibGDX has a built-in class to help us inspect the OpenGL calls: GLProfiler (Docs | Wiki).

Profiler Code

Here's the code needed to set up the GLProfiler in a theoretical "GameScreen" and read the number of draw calls and texture bindings.

  import com.badlogic.gdx.graphics.profiling.GLProfiler;

  public class GameScreen implements Screen {
    // Add this class member
    private GLProfiler profiler;

    public GameScreen(...) {
      // Your setup code

      // create & enable the profiler
      profiler = new GLProfiler(Gdx.graphics);
      profiler.enable();
    }

    @Override
    public void render(float delta) {
      // reset on each frame
      profiler.reset();

      // Do all your rendering here
      // ...

      // Check the profiler data.
      // You can view in debugger, log it, etc...
      float drawCalls = profiler.getDrawCalls();
      float textureBinds = profiler.getTextureBindings();

      // also handy
      float fps = Gdx.graphics.getFramesPerSecond();
    }

  }

What should you look for?

Many factors can result in extra draw calls & texture bindings.

Maybe you aren't using TextureAtlases?
Maybe you are, but there are more than needed?
Maybe you're rendering things in whatever order was convenient 6 years ago while your baby was sleeping?
Are you using Scene2D, and did not consider the textures when adding Actors to the Stage?
Scene2D actors (like TextButton) with BitmapFonts that are not packed with the other UI graphics.
Gremlins

The LibGDX Wiki page on SpriteBatch, TextureRegions, and Sprites is a great resource to learn more.

In general, use fewer texture files, and try to render your objects in texture-order as much as possible.

Case study coming soon

I recently went through a profiling & optimization effort for Santa Skate. Before release, I had not profiled it once! Performance was still okay, but my engineering brain was not satisfied knowing there were still slowdowns. In the coming days (weeks), I plan on writing another post explaining how I tamed the texture binds related to Scene2D widgets and the game world.

DEV Community: Mike