buildgames.jmj.fyi — E+O Edition

YOUR
ART.
YOUR GAME.

You make the art. Claude Code writes the code. Your characters, your world, your levels — built exactly how you imagined them.

Start with your character ↓
You do this Aseprite Draw the characters
and the world
Claude Code does this All the coding Movement, physics,
enemies, effects
Runs it all Godot Engine 4 Free game engine
Mac, PC, Linux
Play it right USB SNES Controller Plug-and-play
Works automatically
1
Make your
character
2
Make your
world
3
Give it to
Claude Code
4
Play &
tweak
01
Make Your Character
Art first
The one rule

Finish all your art before Claude Code touches anything. A complete sprite sheet takes one hour to import. An incomplete one takes three hours of backtracking.

1
Sketch your character on paper first

Before opening Aseprite, draw your character on paper doing four things: standing still, running, jumping, and getting hurt. Keep it loose — this is just planning. The goal is knowing what your character looks like before you start pixel by pixel.

sketch space — or use a sheet of paper
Good character design tip

Silhouette matters more than detail at this size. If you can recognize the character from just their shape, you're good. Big head, weird hat, giant sword — whatever makes them unmistakably yours.

2
Set up your canvas in Aseprite

Open Aseprite. Go to File → New and set these settings exactly:

Width: 48
Height: 48
Color Mode: RGBA Color
Background: Transparent

Every frame of every animation will be 48×48. This is your character's bounding box. Don't change it mid-project.

Why 48x48

Big enough to have personality and detail. Small enough to animate fast and look clean in-game. You can go bigger on your second game.

3
Draw every animation

In Aseprite, each animation is a series of frames on the same canvas. Use the Frame panel at the bottom to add frames. Draw each pose. Check them off as you finish.

AnimationFramesPriorityDone
Idle4Must have
Run6Must have
Jump (up)3Must have
Fall (down)2Must have
Attack / spear thrust3Must have
Hurt / hit3Must have
Land2Nice to have
Death5Nice to have
Attack animation tip

The spear thrust is 3 frames: wind-up (pulling back), extended (spear out all the way), recovery (returning). The extended frame is the one that actually hits enemies — make it obvious and satisfying.

MVP tip

Idle + Run + Jump + Attack is enough to start. Get those four done, hand it to Claude Code, and watch your character move and fight. Add the rest after.

4
Export each animation as a PNG sprite sheet

When each animation is done, export it. In Aseprite: File → Export Sprite Sheet. Set to horizontal, then save to your art/ folder. One file per animation.

Sheet type: Horizontal

art/char-idle.png ← 4 frames at 48x48
art/char-run.png ← 6 frames at 48x48
art/char-jump.png ← 3 frames at 48x48
art/char-fall.png ← 2 frames at 48x48
art/char-hurt.png ← 3 frames at 48x48
Naming matters

Use these exact names. Claude Code will ask for them and it's easier if the names are predictable. Keep char- at the start of each one.

5
Draw your enemies

Enemies in a Final Fight-style game can take multiple hits before dying, so they need a few animations each. Keep enemies on the same 48×48 canvas as your character so they scale right in the world. Same export process — one PNG per animation, saved to art/.

AnimationFramesNotesDone
Enemy idle / walk4Patrol loop
Enemy hurt2Flash + stagger
Enemy death4Collapse + fade
Enemy attack3Add later
art/enemy1-walk.png ← 4 frames at 48x48
art/enemy1-hurt.png ← 2 frames at 48x48
art/enemy1-death.png ← 4 frames at 48x48
Design tip

Make your enemy read differently from your character at a glance — different color palette, different silhouette. If the enemy has a weapon or armor, that tells the player it's a threat before they get close.

More enemy types later

Start with one enemy that works well. Once it feels right in the game, make a second one with different behavior. Use enemy2- for the file names.

02
Make Your World
Tiles + backgrounds
1
Design your tileset

A tileset is like a stamp sheet — a grid of small images used to paint your levels. In Aseprite, create a new file at 192 × 192 pixels. This gives you a 6×6 grid of 32px tiles. Draw each tile type in its own cell.

Canvas: 192 x 192 px
Tile size: 32 x 32 px
Export as: art/tileset-world1.png
  • Ground tile (main floor)
  • Ground edge left & right
  • Platform tile (floating)
  • Wall tile
  • Hazard tile (spikes, lava — anything dangerous)
  • Decoration tiles (rocks, plants, whatever fits your world)
Keep it simple

Six solid tile types is enough to build a complete level. Don't try to tile-paint every rock by hand — get the shapes right and Claude Code handles placing them into a real level.

2
Paint your background layers

The background is what makes a world feel like a real place. Paint 2–3 separate layers that Claude Code will stack behind your tiles. Each layer scrolls at a different speed, which creates depth automatically.

Far back
Sky, stars, sun, moon, distant mountains. Scrolls slowest. Save as bg-sky.png
Middle
Distant hills, trees, buildings. Scrolls medium. Save as bg-mid.png
Canvas: 320 x 180 px ← same ratio as the game screen

art/bg-sky.png ← the farthest layer
art/bg-mid.png ← the middle layer
Only need one?

A single background is totally fine for your first world. One solid painted scene behind your tiles still looks great. Add more layers later.

3
Sketch your level on graph paper

Before Claude Code builds anything, sketch your first level on graph paper. Each square = one tile. Mark where the player starts, where enemies patrol, where the hard jumps are, and where the level ends. Claude Code needs this plan to build the actual layout.

Level 1-1 sketch — or use graph paper (each square = one 32px tile)
Level design tip

A good first level teaches you how to play without words. Put the first jump where you can't miss it. Put the first enemy where you can see it coming from far away. Let the player feel smart.

4
Plan your worlds

A world is a group of levels with the same visual theme. Each world gets its own tileset and background. Plan 2 worlds max for your first game. Three short levels each is plenty.

W1
World name
Setting / vibe
W2
World name
Setting / vibe
03
Give It to Claude Code
The magic step
What happens here

Claude Code reads your art files, sets up the entire Godot project, writes every script, wires up your animations, and builds your first level — all from a description you give it. You don't write a single line of code.

1
Set up your project folder

Before opening Claude Code, get your files organized. Create a folder on your Desktop and name it after your game. Inside it, create these folders:

YourGameName/
  art/ ← all your exported PNGs go here
  reference/ ← your paper sketches (take photos of them)
  audio/ ← sound effects and music (add later)

Copy all your exported sprite sheets and background PNGs into the art/ folder before you start.

2
Install Claude Code and open your project

Claude Code is an AI that works directly inside your game folder. You open it in your project folder and it can read your files, write code, and build the whole thing.

Two ways to use it

Easiest: Go to claude.ai/code in your browser. Sign in, then open your project folder when it asks.

Full power: Open Terminal (Mac: Spotlight → type Terminal). Type npm install -g @anthropic-ai/claude-code, then cd ~/Desktop/YourGameName, then claude.

Either way, once it's open inside your project folder, you're ready. You'll see a prompt where you can type to it.

3
Write your brief — the first message

The brief is the most important thing you'll write. It tells Claude Code exactly what your game is, what files you have, and what you want it to build. Copy this template and fill in the blanks with your actual game details:

Send this to Claude Code (fill in your details) I'm building a 2D side-scrolling platformer in Godot 4.

My character sprite sheets are in the art/ folder:
- art/char-idle.png — 4 frames, each frame is 48x48px
- art/char-run.png — 6 frames, each frame is 48x48px
- art/char-jump.png — 3 frames, each frame is 48x48px
- art/char-fall.png — 2 frames, each frame is 48x48px
- art/char-hurt.png — 3 frames, each frame is 48x48px

My world art is also in art/:
- art/tileset-world1.png — 192x192px total, tiles are 32x32px
- art/bg-sky.png — background layer (farthest back)
- art/bg-mid.png — background layer (middle)

Here's what I want for the first version:
1. My character moves left and right smoothly
2. Press B on a USB SNES controller to jump
3. Gravity pulls the character down
4. The right animation plays automatically (idle when still, run when moving, jump/fall in the air)
5. Character faces the right direction when running
6. A test level using my tileset so I can walk around
7. My background layers scroll behind the level

Please create the Godot 4 project and get it to a point where I can press Play and see my character running around.
More detail = better results

The more you describe, the closer it gets on the first try. If you want your character to be 3x the normal size on screen, say so. If your tileset uses different tile sizes, say so.

4
Ask for features one at a time

Once the basics are running, ask for one thing at a time. These are real prompts you can use — just copy and send them:

Jump feel
The jump feels too floaty. I want the character to hang in the air a bit but come down faster. Make it feel snappier and more responsive.
First enemy
Add a basic enemy that walks back and forth on a platform. When it touches my player, the player gets knocked back and loses a heart. The enemy uses a placeholder colored rectangle for now — I'll make the art later.
Collectible coin
Add a coin to collect. Use a yellow circle as a placeholder. When my player touches it, it disappears and adds 1 to a score counter in the top left of the screen.
Camera
The camera is stuck in place. Make it follow my character smoothly, with a little bit of lag so it doesn't snap instantly.
Next level
Add an exit point at the right edge of the level. When the player reaches it, load Level 2. Make Level 2 a new room with a different layout using the same tileset.
Title screen
Add a title screen. Show our game name in big text, a "Press Start" message that blinks, and use our sky background behind it. When they press Start or any button, load Level 1.
Spear combat (Final Fight style)
Add spear attack combat. Here's how it should work:

- Press Y to attack. Play the char-attack.png animation (3 frames at 48x48).
- The spear has a hitbox that's only active during the middle frame (the extended frame).
- Enemies have 3 hit points. Each spear hit does 1 damage.
- When an enemy is hit: play their hurt animation, flash them white for 0.2 seconds, and knock them back slightly. They can't be hit again for 0.5 seconds (so you can't spam through them instantly).
- When an enemy reaches 0 HP: play their death animation, then remove them from the scene.
- The player can't attack again until the attack animation finishes (no spamming).

Use art/enemy1-walk.png (4 frames), art/enemy1-hurt.png (2 frames), and art/enemy1-death.png (4 frames) for the first enemy type.
Second enemy type
Add a second enemy type using art/enemy2-walk.png and art/enemy2-death.png. This one takes 5 hits to kill instead of 3, moves faster, and charges at the player when they get within 3 tiles. Use it in Level 2 as a harder enemy.
5
When something looks wrong, just describe it

You don't need to understand error messages or code. Just tell Claude Code what you see and what you expected. These are real examples:

My character is falling through the floor. The level is there but the player just drops through it.
The animation isn't switching. My character is stuck in the idle pose even when I'm running.
Godot is showing a red error message. Here's what it says: [paste the error here]
My character sprite looks blurry and pixelated in the wrong way. I want the pixels to look crisp, not smoothed out.
Screenshot trick

In Claude Code's web version, you can paste a screenshot directly into the chat. Take a screenshot of your game, paste it in, and say "this is what I'm seeing, it should look like X instead."

04
Play and Tweak
Make it yours

Once Claude Code gets the project running, this is your job: play it, notice what feels off, and ask for changes. The best games get made in this back-and-forth loop. You don't need to know how it works — you just need to know how it feels.

1
Run your game in Godot

Claude Code will set up the Godot project for you. To play it, open Godot and click the project. Then press F5 or the Play button at the top right. Your game opens in a new window.

Keyboard shortcut

F5 = run the full game from the start. F6 = run just the current scene (good for testing one level). Esc = stop.

If Godot can't find the project, open Godot, click Import, and find your YourGameName/ folder.

2
Set up your SNES controller

Plug in your USB SNES controller before opening Godot. Claude Code will wire up the Input Map as part of building the project. The default button layout:

Movement
move left
move right
crouch
Actions
B
jump
Y
run / attack
A
interact
START
pause
Remap anything

Tell Claude Code "move jump to A instead of B" and it'll update the mapping instantly. No digging through menus required.

3
Ask for the juice

"Juice" is the layer of effects that makes a game feel alive — the screen shake, the sounds, the little flash when you get hit. None of it is required for the game to work. All of it is what makes it feel like a real game. Ask Claude Code for each one after your level is working:

Screen shake on land
Instant weight. The camera jolts when you hit the ground from a high jump.
Add a small screen shake when the player lands from a jump. Bigger shake if they fell from higher up.
Sound for every action
A game without sound feels dead. Jump, land, collect, hurt — each needs its own sound.
Add sound effects for jump, land, coin collect, and getting hurt. Use placeholder sounds from freesound.org for now.
Squash and stretch
When the character lands, they squash slightly then spring back up. Makes them feel like they have weight.
Add a squash and stretch effect when the player lands. Scale them to (1.2, 0.8) for a split second then back to normal.
Hurt flash on hit
The player flashes white when they take damage. Clear visual feedback — you always know you got hit.
When the player takes damage, flash the sprite white a few times quickly, then give them 1 second of invincibility before they can take damage again.
Particles on coin collect
Tiny stars or sparks burst out when you grab a coin. Even 5 pixels makes collecting feel great.
Add a small particle burst when the player collects a coin. Yellow sparkles, 8 particles, scatter outward and fade in 0.3 seconds.
Background music per world
Each world has its own looping track. Free music at opengameart.org, or make your own in GarageBand.
Add background music to World 1. Loop the file at audio/world1-music.ogg. Fade it out when the player dies.
HUD with health and score
Heart icons in the corner, score in the top right. Stays on screen as the camera moves.
Add a HUD overlay with heart icons showing current health (out of 3) in the top left, and a score counter in the top right. Use pixel art hearts — 3 filled, then they empty as I take damage.
Hit stop on spear connect
The game freezes for 3 frames when your spear hits an enemy. Classic Final Fight feel — makes every hit land with real weight.
Add hit stop when the spear connects with an enemy. Freeze the game for 0.05 seconds (3 frames at 60fps), then resume. Apply it to both the player animation and the enemy animation simultaneously.
Coyote time
A classic trick: you can still jump for a split second after walking off a ledge. Makes the game feel way more fair.
Add coyote time to the player jump. Give me about 0.1 seconds after walking off a platform where I can still jump. Also add jump buffering so if I press jump just before landing, it jumps immediately on contact.

Ready to put it on Steam?

Godot exports to Windows, Mac, Linux, and more.
Steam dev registration is $100 one-time. Worth it when you're ready.