Arcade font renderer

Have you ever wanted to make a rad title screen with awesome fonts and outlines and shadows and stuff?

Well, you should try https://arcade-font-renderer.jacobcarpenter.com/

arcade font renderer makes it easy to render some text in a custom font into a MakeCode Arcade compatible image format.

Step 1: Make your awesome title—pick fonts; mess with colors and text effects; etc
Step 2: Find the Copy Image Data button (it’s either right below the picture in two-column mode, or at the bottom of the page in single-column mode) and click it
Step 3: Go to your game and make an image big enough for your text—the Set background image to [image] is a handy block for this…
Step 4: Open the image editor and Ctrl+V (or Cmd+V on Mac)!

Boom! Your sweet-lookin’ text should be pasted in, ready for you to polish up in the image editor.

If Google fonts doesn’t have what you want, you can switch to Local fonts and enter the name of a font you already have installed.

Have fun and keep making!

18 Likes

where is comic sans

2 Likes

Yeah, that one’s not on Google Fonts, but if you already have it on your computer, you can click Local fonts and type in “Comic sans” (or perhaps “Comic sans ms”), and it should switch to it.

2 Likes

ok thank you

2 Likes

I’ve been loving this! Also good job on supporting Unicode characters as well - works very nice!

One suggestion: You should have like some text saying how big the image you copy to the clipboard otherwise I’m just guessing sizes.

2 Likes

:blush: Thanks! Glad you’re finding it useful!

The unicode character support relies on your selected font having the characters—which can be a bit of hit and miss—but I’m glad to hear you’ve had a good experience!

Ah, sure. The size of the preview image should be equivalent to the screen’s dimensions… but I can see how the actual bounds of the drawn text pixels as numbers would be useful too. That should be easy to add.

1 Like

Just updated it with a small “Text Dimensions” display beneath the rendered image. Let me know if you think of anything else.

1 Like

Small update to the font renderer: I just added an option to support dithering.

Dithering results with text are somewhat of a mixed bag—so it’s off by default—but it seems to add a nice effect to text shadows; especially as you mess with the blur value.

Here’s an example image:

4 Likes

Thank you so much for this excellent tool!! It’s so easy to use and such a time saver! Great stuff!!!

1 Like