DEV Community

민준기
민준기

Posted on

I built a bitmap font generator as a non-developer — here's how it happened

I'm not a developer. I'm a Spine animator at a game studio — my job is character animation, not web apps. But a year ago I got so frustrated with a workflow problem that I ended up building a full web tool to solve it.

This is the story of how CopyPxl happened.

The Problem

Our studio's designer loved using AI tools to generate pixel art. The results were genuinely beautiful — retro RPG style lettering, hand-drawn-looking characters, you name it.

But there was always the same friction at the end: you can't just drop a PNG into Unity or Godot and call it a font. A game engine needs a bitmap font sheet — a grid of every character — plus a .fnt descriptor file in BMFont format that maps each glyph's position and spacing.

So every time the designer generated something cool, someone had to manually cut it into individual characters, create the spacing metadata, and export it all in the right format. Hours of work per font.

The Python Script

I'm not a developer, but I can write Python. I started with a simple script: take an image, chop it into a grid, output a .fnt file.

It worked — barely. Hard-coded spacing, no style matching, just mechanical slicing.

Then I started wondering: what if the AI could generate the full character set in a matching style, not just one letter?

Gemini + BMFont

I experimented with Gemini's image understanding. If you give it a reference image and describe what you want, it can generate characters that match the aesthetic. Pixel weight, color palette, stroke style — it picks up on these.

So I built a pipeline:

  1. User uploads a reference image
  2. Gemini analyzes the style and generates a full ASCII character set
  3. The output gets assembled into a proper BMFont sheet

The .fnt descriptor format turned out to be simpler than I expected — it's just a text file listing each character's x/y/width/height and kerning. Totally parseable and generatable.

Turning It Into a Web App

Here's where it got interesting. I had a working Python script, but my designer couldn't run it — they don't use terminals.

I needed a web interface. I had zero web development experience.

This is where Claude came in. I described what I wanted: upload an image, run the pipeline, download a ZIP. Claude helped me build the Flask backend, the frontend, the credit system, and the Google OAuth integration. I'd write requirements in plain language; it would translate them into code I could understand and modify.

It took a few months of evenings and weekends. The result: copypxl.com

What CopyPxl Does

  • Upload any reference image (pixel art, hand-drawn lettering, retro screenshots)
  • AI generates a full ASCII character set in matching style
  • Download font.png + font.fnt — drop into Unity (TextMesh Pro or legacy), Godot 3.x/4.x, Phaser, or LibGDX

No plugin needed. Standard BMFont format that every major engine already supports.

What I Learned

Building a side project as a non-developer taught me things I wouldn't have encountered in my day job:

API design matters. Gemini's API has a learning curve. Prompt engineering for consistent glyph output took the most iteration.

Free tiers will break your heart. I went through two hosting providers before settling on one that doesn't cold-start in the middle of a demo.

People notice the story more than the product. My best traction came from explaining why I built this — the animator-who-needed-a-font angle landed better than technical feature lists.

Try It

CopyPxl is live at copypxl.com — free to try with 10 credits on Google sign-in, no card required.

If you're a game dev who's ever stared at a beautiful piece of AI art and thought "I wish I could use this as a font" — that's exactly who I built it for.

Happy to answer questions about the build, the AI pipeline, or what it's like shipping a web product as someone who came from animation.



Enter fullscreen mode Exit fullscreen mode

Top comments (0)