Show HN: Miracode, a Minecraft programming font that is readable

by IdreesInc • 2 years ago

209 40 2 years ago

I always believe in using what one makes, which is unfortunate because I made Monocraft. For the past year I've been stuck looking at those pixels while I code, so over the weekend I tried my hand at making a version of Monocraft that was more legible. Introducing Miracode, a Minecraft programming font that is actually usable! Using a custom algorithm, I've converted adjacent pixels from the original font into strokes, which allow for a more smooth look while maintaining that Minecraft-y look. Give it a try and let me know what you think!

Solvency2• 2 years ago

Love the font but wish you'd share your custom algorithm. I've designed a number of pixel fonts in the past I'd love to convert to strokes in this way. Any chance you'd release a little conversion kit?

CaptainOfCoit• 2 years ago

Is it not what's in miracoda.py? https://github.com/IdreesInc/Miracode/blob/main/src/miracode...

Would be strange to make the project FOSS but not share all the parts that went into it.

IdreesInc6• 2 years ago

Don't worry, it's completely open source! Miracode is a fork of my other font "Monocraft" which is under the GPL. As such, Miracode is also GPL, and the font files themselves are under the OFL. Since it's a fork, there are a few extra files that are not actually executed which may be why you aren't seeing the algorithm. Check miracode.py for the script that generates the font! No promises that it'd work on other fonts though, the "algorithm" was made over a weekend and as such could definitely use some optimization. On the bright side, I did include a unit testing system which might help others convert fonts in the future.

Solvency2• 2 years ago

Awesome, thanks. I'm only versed in JS and Lua and all of my pixel fonts are basically glyphs on a big sprite sheet of 32x32 pixel grid cells. How difficult would it be for me to simply patch what you've started to work off something simple like bitmap data to export a TTF of converted vector data?

lifthrasiir2• 2 years ago

I've done so in the past and I believe it's not much different from usual pixel-art scaling algorithms. At some point though you would want more control over which corner should be sharp or not, and that resulted in my own semi-bitmap font with a subpixel handling [1].

[1] https://github.com/lifthrasiir/unison

ruined• 2 years ago

ooh, cute. excited to try the vectorizer on some old favorite BDFs from my eeepc days

IdreesInc6• 2 years ago

No promises that it is actually a good algorithm, I definitely had to handle a lot of edge cases and I am sure there are more out there! The best decision I made was to make a unit testing system for the font, so hopefully that'll make things easier for people in the future.

crazygringo2• 2 years ago

I applaud the attempt!

That being said, I sadly do not find this to be particularly "readable". The choice to introduce octagonal-style 45° segments rather than normal rounding makes it quite difficult for me to read. The worst glyphs for legibility for me are "r" and "p" -- you've actually increased the size of the diagonal segment that connects to the stem, compared to diagonals on letters like "o", which really throws off the forms for me, and doesn't seem to be inspired by anything in the original font. If anything, rounded connections to stems in fonts tend to be reduced rather than exaggerated. (As in the font used by HN, Verdana.)

I wonder what this would look like if you used curves rather than introducing octagonal corners, and didn't exaggerate the connections to stems? Keeping in mind that curves usually do things like extending slightly beyond the baseline or at the top.

IdreesInc6• 2 years ago

Thanks for the in-depth comment, it's definitely been a balancing act trying to determine how to handle things like the diagonals/curves. I originally made things more "curvy", but it made the font look similar to comic sans or other handwriting fonts for some reason. Perhaps a sharper curve algorithm would avoid this, though the "angular" look does make this font into something a bit more unique than the other programming fonts available.

crazygringo2• 2 years ago

Happy to help! Font design isn't easy, but it's very rewarding. You might look at the famous Eurostile font which does a kind of "rounded rectangle" style of curves which might work well here.

One more note -- I think this font actually works great as a display typeface. The octagonal angles and exaggerated stem connection give it a ton of personality, and display typefaces used for headings, titles, packaging, etc. are where personality is more important than readability.

So I think you've produced something really cool -- just not necessarily as a coding font!

Systemling0815• 2 years ago

cool!

politelemon2• 2 years ago

How is that "TODO" done in the joined up way?

xxr• 2 years ago

It’s a ligature defined in https://github.com/IdreesInc/Miracode/blob/main/src/ligature...

politelemon2• 2 years ago

Oh neat, makes sense now that you've shown. The ligatures could encompass entire words doesn't have to be a few joined up characters.

pjerem• 2 years ago

Oh, i was clicking thinking "meh, how could I code with the Minecraft font" but I’m actually positively impressed by your font. I will try it :)

al_borland• 2 years ago

I’ll have to send this to my nephew. He is obsessed with Minecraft and is starting to get into coding. I think he’d really like this. Thanks for sharing it.

I really like the TODO and NOTE ligatures. I have been using Comic Code for a couple years now and kind of wish it had those.

hello_computer• 2 years ago

I need Japanese characters so I can listen to city pop and pretend that it's still Shōwa.

RheingoldRiver• 2 years ago

This is the first time I've seen TODO as a ligature, and I am really into the idea. Is this something you can add to existing fonts? Does anyone have any recommendation for a good programming font that does this?

calamari4065• 2 years ago

Huh. You know what, I kinda dig it.

I could do without operators being condensed into ligatures, but that's just me. The gigantic triple equals strikes fear into my C programmer heart

jeffalyanak• 2 years ago

Yeah, I generally do _not_ like programming-oriented ligatures, but the one for todo is sort of interesting.

However, many editors can accomplish the same goal by highlighting or changing the text colour of todos.

pie_flavor• 2 years ago

Fira Code supports stylistic sets, so you can actually configure whether == and === (and != and !==) do that, and leave weirder ligatures out of the defaults. In VS Code, for example, you would change editor.fontLigatures from true to "'ss08'" to make them still ligate together, but with breaks between the = signs. I use ss06 to make backslashes faded when they're used to escape other characters.

IdreesInc6• 2 years ago

Glad you like it, I've never seen it in a font before so I am unsure if there are any others that add it in. I've definitely appreciated the ligature as I use the font, but I did wonder if others would find it annoying

lifthrasiir2• 2 years ago

I do think it's a better use of ligatures, and I generally dislike most ligatures in coding fonts [1].

[1] https://news.ycombinator.com/item?id=32746064 (and I only realized that I made this comment on the thread about your older font, oh...)

ijhuygft776• 2 years ago

must be blind but I don't see it in the image of all characters

paulirish• 2 years ago

The ligatures appear to be excluded from the image of all glyphs. But below it is an image of all ligatures. ;)

binary132• 2 years ago

I dunno if you're going to get away with calling it a "Minecraft font".

lupusreal• 2 years ago

I think this vector version isn't for me, but thank you for introduced me to Monocraft.

asjir• 2 years ago

same, I find monocraft much more readable and having spent hundreds of hours in minecraft might have something to do with it

andai• 2 years ago

Looks way better than I expected from the title. The vectorization did wonders. I think I saw a similar font in a HD Minecraft texture pack.

I wanted to suggest a RuneScape font, but it would probably be too skinny.

t_mann• 2 years ago

Judging from the one screenshot example, I actually like Monocraft better. It really has that nice Minecraft/retro look, and I think this could actually help get kids who are into Minecraft into coding. That being said, I actually still like Miracode better than most typical IDE monospace fonts (at least as a novelty). That's really cool, where did you learn to make such designs?

michaelcampbell• 2 years ago

Same for me, but I grew up and mostly learned my earliest programming on 8-bit machines so the monocraft style is way more in my burned synapses.

skerit• 2 years ago

Yes, this font reminds me of the "Faithful" texture packs (which makes sense, it's basically the same principle: still pixelated, but "zoomed out", more dense) and I don't like those. It's as if the 16x look has something magical, while everything above it looks "low res".

garaetjjte• 2 years ago

It does have "hq4x" feel.

dinkleberg• 2 years ago

I've installed it and am enjoying using it so far, nice work!

CleanRoomClub• 2 years ago

Is there anyway to disable the ligatures? I’d like to use it if not for those.

IdreesInc6• 2 years ago

Sure, next release I'll add a version that removes the operator ligatures

bcye• 2 years ago

Now we just gotta have a VS Code Plugin that plays the Minecraft theme if the font is installed.

IdreesInc6• 2 years ago

What if it played the Minecraft sunrise theme at sunrise so you could be reminded of your shame after an all-night coding session

Show HN: Miracode, a Minecraft programming font that is readable

Related Stories