Description
I have been intrigued by a technique for drawing text from a texture using SDFs (signed distance fields). Typically text in construct is drawn to a 2d canvas then moved to a texture which is drawn. Any time the text or font is changed the texture gets updated. SDF text is more like spritefonts. You have one texture atlas and letters are just drawn with quads. SDFs differ slightly from spritefonts in that they can be resized and still have crisp edges.
Test
Here is the initial test. I used a tiledBg as the texture atlas, and to draw individual letters, and I used the alpha threshold effect to treat it like an SDF. It compares the text object to sdf text to basically a spritefont text.
dropbox.com/s/j8hvj98c0nsd0fo/sdf_font.c3p
The sdf could look better with some antialiasing but that would require a new effect.
Tools used to make test
I used this tool to generate the texture atlas and json of the letter metrics.
evanw.github.io/font-texture-generator
I also made a small tool to modify the texture to work with the alpha threshold effect.
dropbox.com/s/2hz7crpwwncr1ny/bw2alpha.c3p
Multiline text and scrolling test
I added word and character wrapping to limit the text to an area. I also added basic vertical scrolling. Characters aren't drawn outside of the area and are clipped when halfway in it.
dropbox.com/s/67ukw6bak4gvq41/no_dom_text_scroll.c3p
It works but it gets slower the further it scrolls down since it has to process all the text up to that point. I may research how that's usually done. One idea is to process the word wrapping once and add all the newlines in. Then it would be simpler to access particular lines so the scrolling would take the same amount of time regardless. There are some other issues that have come up that I'll work on later.
Summery
This is mostly for me to learn about how to do text rendering from scratch. I find it fun that it's possible to do with basically just a texture and a bunch of quads.
-cheers