My daughter drew a knight, so I had Doubao turn her manuscript into a playable little game
My daughter drew a knight, and I had Doubao turn her hand-drawn sketch into a playable, beatable little game. A pencil sketch → a side-scrolling action game that runs, fights, and can be completed. Tool: Doubao Work (office task mode), model Doubao-Seed-2.1-pro-0915. All images in this article are actual in-game screenshots.
I. A sketch by my daughter
A few days ago, my daughter was lying at the table drawing, and handed me a sheet of paper.
💡 What You Will Learn
My daughter drew a knight, and I had Doubao turn her hand-drawn sketch into a playable, beatable little game. A pencil sketch → a side-scrolling action game that runs, fights, and can be completed. To
📜 Table of Contents
My Daughter Drew a Knight, So I Had Doubao Turn Her Hand-Drawn Sketch into a Playable Game
One pencil sketch → a side-scrolling action game that runs, fights, and can be beaten
Tool: Doubao Work (Office Task Mode), Model: Doubao-Seed-2.1-pro-0915
All images in this article are actual in-game screenshots.
1. A Sketch by My Daughter
A few days ago, my daughter was drawing at her desk and handed me a pencil sketch: a little knight with curved horns, a floor-length cape, and a longsword in hand. She couldn't say who it was—she was just doodling.
I'd recently been using the newly upgraded Doubao Seed 2.1 Pro-0915, and multimodal programming was the highlight of this upgrade. A thought struck me: what if I gave it just this one drawing—no requirements doc, no three-view turnaround, no color specs—could it turn the character my daughter drew into an actually playable game?
Here's her original sketch, drawn on a piece of homework paper:
2. What It Understood from a Rough Line Drawing
The hardest part of this challenge is that a child's sketch isn't a standard design sheet—the lines are rough, and the model has to figure everything out on its own. I didn't add any text annotations. Here's the visual checklist it ultimately recreated in the game:
| What My Daughter Drew | How It Interpreted and Implemented It |
|---|---|
| A pair of large horns on top of the head | Crescent-shaped horns that grow vertically first, then curve outward, with tips flaring out |
| Inner base of the horns | A pair of small pointed teeth |
| Center of the forehead | She drew a crescent mark—rendered as a U-shaped engraving opening upward |
| Face | Two solid black oval eyes, with four vertical slash marks below the left eye—a tiny detail it didn't miss |
| Shoulders | Three layers of rounded, blunt overlapping scale armor on each side, fanning outward layer by layer |
| Chest | Three layers of V-shaped armor plates, with a diamond-shaped ornament hanging below |
| Outer garment | Floor-length cape, hem shaped like three flower petals, sways when running and jumping |
| Limbs | Insect-segment-like slender limbs, claw-like hands |
| In hand | A slender straight-bladed sword in the right hand (called "Bone Nail" in the game), with a guard and wrapped hilt |
On the start screen, I had it place my daughter's original sketch side by side with the game character: pencil sketch on the left, the knight "brought to life" from the sketch on the right.
Honestly, this step alone was worth the price of admission. The first version of the horns came out looking like upright rabbit ears. I told it to "curve them more, sweep them outward like a crescent," and after a few rounds of adjustment, it got it right—it didn't nail it on the first try, but it understood what I was saying and corrected accurately, which reassures me more than a lucky first shot.
3. 1,200 Lines of Code Packing a Complete Game
I expected at most a little character that could run and jump. What it delivered was a full game system. The entire game is 1,226 lines of code, 50KB, in a single HTML file—no installation needed, just double-click in a browser to play. No game engine used; all sound effects are synthesized in real-time by code, with zero audio files.
It filled in everything needed to make the game work on its own:
Character actions: idle breathing, running, jumping, cape unfurls during double jump, dash with afterimages and invincibility frames, horizontal slash with arc light, downward air slash that bounces you off enemies' heads (parents who've played Hollow Knight know what this is), hold-to-charge healing, hit knockback, death shattering into white light.
Three enemy types:
- Ground beetles patrol back and forth, turn around at walls, and even turn back at cliff edges instead of dumbly walking off;
- An elite beetle with red markings on its shell charges at you when you get close, and takes five hits to kill;
- Flying bugs hover in the air, and when you approach they dive down at you, conveniently entering your blade's reach.
Level and systems: A full side-scrolling level with stone slab floors and floating broken beams, falling returns you to the nearest foothold with HP loss, killing enemies builds a soul gauge, spending soul to heal, and a light gate at the end—clearing it shows your time, kills, and death count. Beyond keyboard, it also auto-adapts virtual buttons for mobile.
Here's how it actually plays:
4. The Most Surprising Part: It Caught Two Game-Breaking Bugs on Its Own
If this were just about "generating something that looks right," I wouldn't be writing this article. What really made me decide to document this was the verification process that followed.
I had it write an automated test script: simulating key presses to actually play the game, reading game state frame by frame (coordinates, HP, actions, enemy positions, whether there's ground underfoot), auto-running the level, fighting enemies, healing, jumping over pits. It caught two problems that would be absolutely invisible from just looking at the screen—
Bug #1: The game freezes the moment you hit start.
The menu looks fine, but the moment you click "Enter the Corridor," the knight just stands there and no key press does anything. Console error: a frame-interval variable was declared locally but used as a global in the physics function, crashing the main loop on the very first frame. The menu doesn't call game logic, so static screenshots are all green; only actually playing exposes it. After fixing the variable scope, the knight immediately started running.
Bug #2: The path to the goal is blocked by an invisible wall.
The automated test character would sprint in place right before the goal every single time until timeout. Digging into the level data revealed that when it placed a raised platform, it also placed a solid collision body—that wall rose 108px from the ground, while the knight's jump height is only 120px. No matter how you jumped against that wall, you couldn't clear it. After changing it to a broken beam you can pass through from below and land on top, the path opened up.
After fixing both bugs and re-running the automated test: zero deaths throughout, cleared in 23 seconds (the script's time—I'm much slower when I play myself; it cut down 4 bugs along the way and dodged the remaining 3 by positioning).
"Generate → actually run it → read errors and state → locate → fix → run again until it passes"—it walked through this entire pipeline on its own. All I did was click "try again." This was the most unexpected part for me.
5. Where It Shines, and Where It Falls Apart
Genuinely strong:
- All those "non-standard" little details in my daughter's drawing—curved horns, layered shoulder armor, petal-hemmed cape, those four slash marks under the eye—all recognized, not assembled from stock assets;
- The game feel is genuinely tuned: jump has coyote time, landing has buffer, attacks have hitbox frames, enemies patrol, charge, and dive—this is a "game," not an "animation";
- Code structure is clear, and it can locate problems based on errors and runtime state rather than rewriting everything from scratch.
Boundaries worth stating clearly:
- It doesn't inherently know when it's "done." If I hadn't made it actually run through the game, that crash-on-start bug would have been delivered to me as-is—"looks finished" and "actually playable" are two different things;
- Level geometry issues like a platform blocking the path—it can't detect those on its own. They only surface when you actually run through it;
- I sat with it through several rounds of adjusting the character's horns, which shows its first-try hit rate on "spirit/essence" is noticeably lower than on functional checklists;
- This is a really fun demo, but it's still far from what a commercial game needs—level editors, save systems, asset pipelines. That part still requires humans.
6. How to Play
Just one index.html file. Double-click to open in a desktop browser, fullscreen recommended. Opening in a mobile browser auto-shows virtual buttons; landscape orientation is best.
| Key | Action |
|---|---|
| A / D or Arrow Keys | Move |
| Space | Jump; press again in air for double jump |
| J | Swing sword |
| S + J in air | Downward slash; bouncing off an enemy or platform launches you up |
| K or Shift | Dash; invincible for a moment during dash |
| Hold H on ground | Spend soul gauge to heal (soul builds by killing enemies) |
| M | Toggle sound |
Final Thoughts
I named the game "Pale Nail." Every move the knight makes comes from my daughter's homework paper. She doesn't know yet—I'm planning to bring my laptop home tonight and let her play as the little knight she drew, cutting down the beetles she "accidentally designed."
This might be the first time in her life she realizes: someone drawn on paper can come to life and go on adventures.
As for model version numbers and benchmark scores—she doesn't care about any of that. She'll just say one thing—
"Daddy, how does it look exactly like what I drew?"
Written by our editorial team; tools listed here are tested or verified against public sources. Links point to official sites or GitHub repos for reference only — no paid placements.