Red Blob Games: blog posts

On my pages I often want to be able to move an object around in a diagram using the mouse or touch. Last year I spent some time learning about browser mouse+touch events, and wrote a page about event handlers for dragging objects around. I hadn’t realized it at the time, but it was only half the solution.

Earlier this year I was trying to improve font rendering in some of my C++ projects, and that led me down a rabbit hole of learning signed distance field (SDF) font rendering. I wanted to try out the SDF fonts in a real project. I occasionally help with Galactic Assault Squad (GAS), especially “engine” code, so for Week 6 I decided to try SDF fonts there.

In Week 4 of the year, I tried out various ways of using distances in signed distance field fonts. In Week 5 I wanted to do something different. I decided to explore what I could do treating each character as its own sprite and then applying sprite antimation. The week turned out to be fun but I didn’t learn as much as I hoped I would. To start, I copied the code from the previous week so that I would have a working program right away. Then I removed things I didn’t care about this week and added new code. This is like forking a project but for my weekly experiments I tend to copy the code instead of forking.

During the initial experiments I made an interesting discovery:

This is an ordinary font made more interesting by using a non-rectangular sprite.

In the last post I described how I fell into the font rendering rabbit hole. I try to put some time limits on each topic — otherwise I would explore forever! I try to pick a theme each week:

• Week 3 was the basics: SDF, MSDF, atlas, shader
• Week 4 was effects on individual glyphs: outlines, shadows, glow, bevel
• Week 5 was effects on how glyphs move: sink, rise, bold, slant, rotate, wavy, bounce, warp

The key idea I wanted to explore this week is that a distance field font can be thought of as contour lines:

When rendering a font normally like I did last week, I considered distance < 0 ? "white" : "transparent". But there are so many more things to do with this distance!

Each week I pick one or two things to work on. In week 2 of this year, I decided I should update my “hello world” OpenGL+Emscripten code from 2015. It’s boilerplate I use occasionally in other projects. It wasn’t compiling anymore, and I wanted to fix that as well as several other things.

One of the unsolved issues in that starter code was that the fonts never looked good. I was using the stb_truetype library, and got this output:

Look at how H and e are too far apart, and S and D are too close together. I tried various things but couldn’t figure it out, so I had two workarounds at the time:

1. Use Omar Cornut’s Dear ImGui, which has nice looking font rendering.
2. Use a monospace font to hide the spacing problems.

For some time now I’ve been unhappy with how much more friction there is when posting to my blog than posting to twitter. I keep wanting to blog more but I don’t. Part of the problem is content. I did blog more in 2018, when I was working on projects that had more to share. Part of the problem is expectations. On Twitter it’s expected that I write very little (280 character limit, up to 4 images or 1 animation). That constraint makes it easier to post. On my blog I tend to write longer more involved posts. But part of the problem is the process. My posts on Twitter take a lot less effort than my posts on Blogger. The Blogger UI got a lot worse in 2020, but it was already inconvenient for me.

So I’ve been thinking about what I actually want, and what I want isn’t Twitter or Blogger. I want something much closer to Hugo or Jekyll — a static site generator. I want to be able to save a file and have it become a blog post. I want to be able to grep over my existing files. I want to be able to write a perl script to fix something across pages. I decided a goal in 2024 is to switch from Blogspot to a static site generator.