Change glyphs

[boomshop]

Hey!

Love the appearance and the love for detail, great work! Is it possible to change the glyphs? And if so how would one do it?

Best
Markus

[Rezmason]

Hello, Boom,

the PNG files in this project ending in msdf are the glyph textures. They look weird because they're "MSDFs". Here's how you make your own.

See the svg sources folder? Those are vector graphics files I made in Illustrator. Each one is 512px X 512px, with the glyphs sitting in a grid of eight rows and eight columns. That means I gave myself 64 boxes, which fit my 57 matrix glyphs. But you can choose a different number than eight, if you have a million glyphs.

So yeah, your first step is to put your own glyphs in an SVG file like these.

By the way, the glyphs cycle in the order they show up in your SVG file, from top to bottom and left to right. So if you want your glyphs to cycle through a written message, you can use the grid kind of like this:

b o o m s h o p
h a s e n t e r
e d t h e m a t
r i x

The second step is to get msdfgen running on your computer. And then you feed it your SVG. Let's assume your source file is in /sources and is named boomshop_glyphs.svg:

./msdfgen/out/msdfgen msdf -svg ./svg\ sources/boomshop_glyphs.svg -size 512 512 -pxrange 4 -o ./assets/boomshop_msdf.png

So that should make you your glyphs' MSDF PNG file.

The last step is to put your PNG in the repo next to the others, and edit config.js to reference your new glyphs. You'll want to add a font description to the fonts object up top. Let's assume your MSDF PNG is called boomshop_msdf.png, and let's assume you used the same grid size I did with a glyph sequence 27 glyphs long:
boomshop: { glyphTexURL: "boomshop_msdf.png", glyphSequenceLength: 27, glyphTextureColumns: 8 }.

Below that, in the versions object, you'll want to make your own version, which you can customize a whole lot. But you should start simple:

boomshop: { ...defaults, ...fonts.boomshop },

—and experiment with all the other parameters you see there once you're happy with the new glyphs.

So! What's an MSDF? Well an SDF is a texture representing the distance of all its pixels to some shape. In our case, the shapes are glyphs. And an MSDF is an SDF that cleverly uses the red, green and blue channels to encode the corners of the shapes, so they look super crisp. SDFs (and MSDFs) are really useful for making 2D graphics look good in 3D graphics systems. MSDFs are explained in depth in msdfgen's programmer's master's thesis.

Anyway, I hope this helps! Making this process easier would make a good future part of this project. Let me know if you have any other questions, or need clarification.

-Rezmason

[boomshop]

Hey Rezmason,

wow, that was easy! Thanks a bunch for the detailed explanation! I'd propose adding this description to the readme?

Best
Markus