Overview
I built a web tool that generates .sb3 files containing sprites for rendering custom fonts in vanilla Scratch — inspired by Unity's TextMeshPro Font Asset Creator and built in 3 days with AI.
“Doesn’t the default variable display in Scratch look terrible?” That one thought started everything.
Introduction: I Want to Display Text “Properly” in Scratch
Anyone who’s built games in Scratch has hit this wall.
You want to display scores and dialogue, but the default variable display is ugly.
Showing lists and variables directly on screen gives you that unmistakably clunky Scratch look. I wanted something more game-like — any font I choose, text rendered cleanly from code.
So I previously published a Scratch project called “Text Display” — a system that renders characters using sprite clones. It had its audience.
— But it was slow. And it ended up mostly unused.
For years I kept thinking “I want to remake this someday.”
And finally, I acted. Let’s try building this with AI.
What I Built
Scratch Font Asset Creator (SFAC) is a web tool that generates **.sb3 files containing sprites capable of displaying text in any font within Scratch**.
Works on vanilla Scratch — no extensions required. Runs in the browser via GitHub Pages, no install needed.
🔗 Repository: GitHub - norinori1/Scratch-Text-Asset-Creator
🔗 Tool: https://norinori1.github.io/Scratch-Text-Asset-Creator/
Bringing Unity’s TextMeshPro into Scratch
The design model was Unity’s TextMeshPro (TMP) Font Asset Creator.
TMP’s Font Asset Creator generates a texture atlas from a font file for use in games. I reinterpreted its core UX — “drop in a font, get a ready-to-use asset” — for the Scratch ecosystem.
The key difference: the user base spans from elementary school kids to experienced developers. So SFAC offers three input modes at different skill levels.
Three Text Input Modes
🟢 Parameter Block Mode (Beginner)
```plain text
Display text [Hello!] x: [0] y: [0] size: [100] color: [0]
Pass color, size, and position as arguments to a custom block. Intuitive enough for a complete beginner.
---
### 🟡 Rich Text Inline Mode (Intermediate)
```plain text
<c=100>Red text</c> with <b>bold</b> too
TMP-style tags embedded directly in the text string. Works well for dynamic text like scores and dialogue — fine-grained visual control without extra complexity.
🔴 Console Script Mode (Advanced)
Write CSS/YAML-style scripts into a “text display console” list and execute them. The most flexible mode — handles complex text presentations and effects.
Three modes means the tool is accessible to beginners without being too simple for experienced developers.
Technical Overview
SFAC is a Node.js web app running on GitHub Pages.
```plain text
① User inputs font file + settings
↓
② Canvas API renders each glyph as an image
↓
③ Glyph images + Scratch block definitions assembled into project.json
↓
④ JSZip compresses to .zip → renamed to .sb3
↓
⑤ Download → load into Scratch and use
### Improvements Over the Old “Text Display”
---
## The Hardest Part: Implementing Rich Text
I’ll be honest — writing the rich text parser was **like writing half a compiler**.
Tag detection, stack management, nesting interpretation, conversion to Scratch blocks — designing all of that by hand is genuinely painful.
**AI was struggling too.** Multiple rounds of “please fix this” before it finally worked.
But I also think **this is a feature that only became possible because AI was there**. Rich text and YAML-style script input — without AI support, they wouldn’t have made it into scope.
---
## Developing with AI
From the start, I used AI as a development partner:
- Sounding out the spec
- Coding complex parsers
- Debugging and root cause analysis
The moment that genuinely surprised me was when I gave the instruction “implement rich text” and AI actually produced a working parser — in Scratch.
> **“It implemented rich text. In Scratch. What the heck.”**
Total development time: **3 days**. Not possible at this speed without AI.
---
## What’s Next
The feature set is solid, but **the in-Scratch UX is still complex**. First-time users loading the `.sb3` often hit “how do I use these blocks?” I want to reduce the number of parameters in custom block definitions and keep improving the Scratch-side experience.
Personally, I also think SFAC has real potential as a novel game engine of sorts — I’d love to see it used for that.
---
## Summary
If you want serious text presentation in Scratch, give it a try.
And to any Scratchers thinking “I’d like to try building with AI” —
**AI is incredible. For real.**
---
*#Scratch #GameDev #IndieGame #AI #NodeJS*
---
*This article was automatically cross-posted from [norinori1's portfolio](https://norinori1-web-site.vercel.app/news/scratch-font-asset-creator)*
Top comments (0)