Makecode Font Editor

[WoofWoof]

font editor

Draw with your mouse, press A to see a preview of your font, and press B to print the current font file to the console. Make your own copy of the project so you can see the console (to export fonts), kinda save progress, and switch which font you are editing.

Exporting fonts

Press B to print your font data to the console. You have to make your own copy of the project to be able to copy/paste the exported font from the console. The font files can get a little long, so sometimes they are in the console as two separate blocks of code. Just make sure to copy both! This really only happens with font8, because font5 has fewer characters.

Saving progress

Fonts are not auto-saved (yet), so if you restart the console you will lose your progress. You can copy the font from the console and follow the “view a custom font” instructions in the comments of the project (line 9) to view your own font, which will effectively save it. That way, you can “save” every so often by copying your current progress into there. I’ll be adding autosave and maybe a font menu later, if I have enough motivation.

Replacing built in fonts

You can actually replace the built in font files with your own fairly easily in JavaScript, which lets you change the font of things like the Splash and Show Long Text functions! Maybe I’ll make a small extension to do that in blocks, but in typescript you use:

image.font8.data = hex`[font data]` 

Editing font5

Anywhere you can draw should show up if you replace the built in font8 file with one you made, but if you are editing/replacing the font5 file, not every editable space will be visible when Makecode renders the font because font5 specifies that its characters are smaller. (Font5 is used in some weird and niche places, usually where the font needs to be smaller.)

Nerd stuff

You’ll notice there is a two column gap between each character. These two columns are the binary representation of the character code, which tells the text renderer which character is which. Most characters are single-byte characters, but if you scroll down you’ll see some using that second column. For obvious reasons, these cannot be edited. Maybe I’ll add a way to add characters later, which could be interesting.

Future plans?

Right now you can only edit font8 and font5 because their size and data structure are the same, so you can’t edit font12 yet or make other sized fonts, but I’ll probably figure that out soon. I know Richard made a tool to do this, but I made this more for the logical challenge than for convenience or anything. I really enjoyed making this, and my next challenge is rendering and editing the much bigger font12, which looks pretty cool.

Have fun!

Feel free to use those custom fonts I made. There are more instructions in the project for looking at those on line 18.

[WoofWoof]

Forgot to add that you can scroll up/down the font with up and down. Also those red rows are the character IDs I mentioned. Made them red so it was more obvious.

[BotWarrior]

This is really cool!!! I don’t really have the time to build my own font, but it is amazing you built a tool for Makecode inside Makecode!!!

[WoofWoof]

It has been updated! It now supports font12!!! It’s also a tad more organized by some functions and comments. There is now a …

New way of making and displaying fonts

There is a line of code on line 10: font = image.font8 that controls which font is displayed. Above that, there’s a block of code that lets you set up your own font by copy/pasting your font data in between the “ ` ` ”. It’s fairly well explained in the project, and if you want your font5-based font to display correctly, simple make the character height 6 instead of 8.

font12 export complications

It turns out that there’s so much data in font12 that it completely overflows the console and you can’t copy all of it. I’ll have to figure something out where I convert to base64, but even then it might not be enough, considering font12 has support for, like, basically every ascii character.

Long side tangent

Not really though, as it actually doesn’t have support for this one smiley face character: which I wanted to add so badly that there’s an experimental function at the bottom of the project for adding new characters to font12. It just adds the slot for the character with the correct red binary bits, so you draw the character! I could definitely expand it to work with the other fonts too. Did you know you can’t add this character to other fonts? This is because Makecode automatically assumes the character is not in those font and so it forces you into using font12, even though it’s also not in that font either!! Luckily, you can just overwrite font12 with your own for data, width, and height, but it’s still annoying.

[WoofWoof]

ok so yet another update

I moved my custom fonts up to the top so you can use them without a “used before defined” error. I also added a version of font12 with support for that one smiley face character I wanted! How did I export such a large font you are probably not asking? Well…

Copying from the console is unreliable!

Yep. Turns out that if you copy font8 from the console, it skips a few bytes and your last few characters end up all jumbled up. Luckily, there is a “Save Raw Text” button in the top right of the console screen that lets you save the raw console output to a text file. This text file is perfectly fine with no errors, and it also allows for exporting font12 sized files, which is really cool! So yeah, just use that from now on. If you are only copying a font5 sized font, it should be fine, but make sure to delete the line break after you paste because that also messes it up.

[WoofWoof]

Update: You can now Right Click to see the ASCII character code of the character your mousing over, and you can press Menu to enter a character and add it to the font, or be sent to its location if it already exists. You will be sent to a view of the font with the character you added/searched for in the very top left of the screen.

☻ 
// I like adding this character to every font I make ☻

[Noob1235]

Can you possibly make a game using this where you can make your own character, then play a platformer with them?