Cinder Font use best practices

Using Cinder
1

Hey Embers,

I recently noticed that some of the text in my Cinder-based application wasn’t particularly legible, prompting me to compare 2 font rendering approaches in Cinder. This screenshot is from a barebones application:

image

The top text rendered using a ci::gl::TextureFontRef and .drawString().
The bottom text rendered using ci::TextBox() with render(), placing the text into a ci::gl::Texture2dRef to then render.

The top text is far more legible in my opinion, and from a GUI standpoint preferrable.

Until now, I preferred the 2nd approach simply because it seemed to me that it’d be less resource intense, given that you’d do all the ‘difficult’ rendering once, get your texture and then perpetually reuse it if the text didn’t ever change. Now, I’m a bit more inclined to think that having 100+ labels of text (which I do have) each requiring their own texture is perhaps actually far more resource intense than using a single ci::gl::TextureFontRef that gets drawString() called. Yes, it means doing the render calculation at every draw call, but it also eliminates potentially 100+ texture swaps.

So I have 2 questions to pose to the Cinder brain-trust:

  1. Any ideas why the top text is bolder? Both approaches use the same ci::Font object and don’t otherwise supply font modifying settings. I’m wondering if simply the ci::gl::draw() call for the texture in the 2nd approach does some sort of blending that doesn’t happen for the top text?
  2. Any one else have any best practices advice? Given how far more legible the top version is, I’m inclined to swap to its rendering approach.

Cheers,
Gazoo

2

I can’t speak to the details of how the two different techniques work exactly, and it probably depends on the OS you’re on. For TextBox/TextLayout, afaik GDI+ is used, which has various settings for hinting etc: Cinder/Text.cpp at master · cinder/Cinder · GitHub

I’m not sure if TextureFont has any equivalent to that, but might be worth digging into the code.

The easier thing to look into might be to check your blend mode, as you said. Premult vs Normal has made a difference for us with thicker lines like what you’re seeing.