While learning webgl to make games, I've become a little annoyed with blurry rasterized text. Also what's up with all the font metrics? leftSideBearing, advanceWidth, xoff, yoff, kerning, ascent, decent... all the number-math is too much.
So why not just make my own font format and loading system? Seems easy enough :P
The goal is go go from blurry nonsense...
...to crispy goodness!
(images zoomed to 300% for dramatic effect)
&crispyfont I went a bit farther down the path of generating sizes from a single glyph definition, but the code is kind of a mess. I may work on this idea more, but I enjoy drawing the atlases more, so I went back to that and drew a 12px size to finish out the jam. Not sure I made anything useful, but I had fun 😁
&crispyfont Starting to auto-generate sizes from code now - I'd like to create a visual editor eventually, but for now I'm typing in values manually to test the rasterization code
&crispyfont I spent too long figuring this out, but I finally got resizing and zoom working the way I want. By default zooming in the browser just scales everything up uniformly and gets blurry, but I wanted some elements to stay the same while some other text changes size. I only have 3 sizes of font currently, but it picks the one that's closest to the target size for the selected zoom (or a multiple of one of the sizes). That way it should stay aligned to the device pixels and look sharp. It's mostly working, so next step is to create some more font sizes
&crispyfont Day 3 - I got a pipeline setup where I draw the font in Aseprite aligned to a grid, export a png, and then generate the packed atlas + font metrics with a script. I've chosen to only use fully transparent or fully opaque pixels for maximum crispness... the upside is a bit-depth of 1, but the downside is that curves look real bad, so I'm going with a more angular design. 3 sizes so far:
