brine / mtg-octgn

MTG game definition for OCTGN3 source code
The Unlicense
32 stars 20 forks source link

Add colors and ligatures to font. #104

Closed ccbrown closed 8 years ago

ccbrown commented 8 years ago

This adds ligatures to the font so that the standard codes for the various symbols are rendered as such. For example, {R} is rendered as the red mana symbol:

ligatures

In addition to making symbols usable in chat, this would allow you to drop the other font files, and just use this single font. Instead of using arbitrary symbols in the card text, you could use brace notation, and users would be able to search and filter in a familiar way (i.e. "{W}" instead of whatever symbol white is to search for white cards).

Ligatures are present for every symbol in both upper and lowercase sequences.

I've also added glyphs and ligatures for 0-20 and X-Z colorless mana (e.g. {5}, {X}, etc.).

All of these symbols are now fully colored if used in an application that supports Microsoft's relatively new TrueType COLR tables. OCTGN currently doesn't, but I'll make sure a pull request gets in there too as soon as I find a way to support it in a WPF application (I don't think it's possible yet).

So if, for example, you were to use the font for a web page and opened it in Edge, you'd see this:

color

brine commented 8 years ago

You just blew my mind sir, i had no idea this was possible with fonts!

brine commented 8 years ago

What software did you use to edit the fonts? If I need to add more symbols in the future (seems likely with the waste symbol) I want to make sure it stays consistent and doesn't break anything.

ccbrown commented 8 years ago

Took some screenshots as I did this. The ligatures can be done in FontForge (free, but not very user-friendly):

http://imgur.com/a/wfmFK

I don't know of any free software that supports coloring, but I did that in FontCreator:

https://youtu.be/J4BSK_ASOlw

FontCreator also has a much, much nicer interface for editing the ligatures.

If you want to create an issue to add the new symbol and assign me to it, I can add it for you.

brine commented 8 years ago

yea if you could retroactively add the new colorless symbol (I dunno if a hi-res version of it is available yet) that would be super helpful. I believe they're using {C} for it?

I used fontforge back when I added the original symbols in but, lets just say I'm no expert in font designing. I'm sure there's a lot of optimizing that could still be done on the symbols (size, kerning, positioning, etc)

brine commented 8 years ago

just for reference to a few OCTGN tickets dealing with font color: https://github.com/octgn/OCTGN/issues/1529 https://github.com/octgn/OCTGN/issues/112