Text Effects

 from Red Blob Games
28 Jan 2024

What I’d like to do this week is explore how the individual characters are arranged.

 1  Initial setup#

I’m starting with the code from last week’s projects, but last week it was all about changing the uniforms to the shader (interactively in the browser) and trying different parameters for msdf generation (command line, a bit more manual to experiment with). This week the experiments are going to involve changing the sprite positions and changing the per-sprite rendering, so the uniforms will need to be attributes instead. It’s probably a good chance to try instanced rendering again. I have tried it a few times but not enough for the concepts to “stick”.

I often start from previously working code. Sometimes it’s easier to start with working code and remove stuff, than to start with an empty file and add stuff until it works.

I had started out thinking I will need to update the buffers every frame, and that I need to change the uniform parameters to attribute so that they can vary per letter. And then maybe I should use GL instancing to reduce the number of attributes being sent. And do I need to use gl static draw or gl dynamic draw?

And then I remembered the purpose of this is to quickly experiment. I am prematurely optimizing. Argh.

I should just draw one letter per draw call! I can optimize later.

It’s quite a bit slower to load than the previous project with only one draw call, so maybe I will optimize it sooner rather than later.

 2  Experiments#

Although I checked in a lot of the code, I didn’t write most of it up. Sorry. I got some screenshots and movies.

Letter thickness:

Letter widths:

bell bottoms

Vertical movement:

War And Peace Gun:

Dancing Characters:

 3  Accidental find#

This is how I normally render the font:


but by tweaking the corners I can get these:


I don’t quite understand why this happens! Look closely and there are corners in what used to be straight lines. It’s a mystery I can investigate later. But it’s also a cool effect — I can get these fonts with more personality out of a base font! (I did investigate a few weeks later)

 4  More#

MacOS has a way to capture a movie in mov/h265 format, but for wider compatibility (see caniuse[1] and mdn[2]) I converted to mp4/h264 and webm with:

for f in *.mov
    ffmpeg -i $f ${f%%.mov}.mp4
    ffmpeg -i $f ${f%%.mov}.webm

With these settings, mp4 was smaller than webm or mov. I didn’t try other settings.

This week was the end of my font experiments for now.

Source: text-effects.js (for the dancing animation only)

Email me , or tweet @redblobgames, or comment: