morecontextpleaseSend an idea

Challenge 022 builds

Build a free-roam game

Idea from Chris

We kept seeing posts on X showing free-roam worlds that people built using Opus 5.5 + Unity or Unreal. This is what a first pass actually gets you.

Two of us, two builds.

Chris's build: trade, dive, and fight pirates

Approach

It all started with a question: Unreal or Three.js? (I have seen a lot of people posting about Opus 5.5 + Unity or Unreal). Turns out Unreal Engine can't publish directly to the web anymore, so that made Three.js the default option.

The idea was a free-roam archipelago where you sail between island ports and trade, with pirates and ship upgrades (I played a lot of Anno 1800 during Covid). Before building, Claude asked how wind, diving, the pirate base, and sinking should work. I'm not the type of person who likes to sit and wait for wind - so I went with no wind. To make gameplay simple, we have auto-firing cannons, and to make things more interesting, the pirate base functions as a black market where you can sell stolen treasure. If you earn enough pirate reputation there, you can get a black flag and the other pirates won't attack you.

How it went

Claude built it in five steps: sailing and islands, docking and trading, pirates and diving, ship upgrades, then the pirate flag. The weak point was the look and style. The first ship Claude generated had no deck or hull, meaning you could see the ocean through it. Because I didn't want to wait for hours and have Claude burn through tokens butchering models in Blender, I dropped a free Kenney pirate kit into the project and Claude rebuilt the ships, islands and docks with it.

  1. Asked whether to use Unreal or Three.js. Settled the design, then built sailing and the islands, then docking and trading.

  2. Added pirates, combat, dive spots and saving, then ship upgrades and the pirate flag.

  3. Patched the see-through ships, then swapped the ships, wrecks and islands to the Kenney Pirate Kit. Raised the ships, which were sitting too low in the water.

  4. Deployed it to Vercel.

The prompts

Our prompts, lightly trimmed, with a one-line summary of what the AI did with each. Copy them and try your own version.

If I wanted to make a playable free-roam world with a bunch of game mechanics, is there a benefit of using Unreal Engine as opposed to just having you do it all using Three.js? Launching with Vercel of course.

Unreal can't export to the web anymore, and most of its work happens in an editor Claude can't use. For a browser game on Vercel, Three.js was the realistic path.

I was hoping to create a free-roam archipelago style boat game where you can go to different island ports and trade. There would also be pirates that attack you and you would be able to upgrade your boat.

Laid out why a boat game suits Three.js: no walking characters, the ocean is a shader, and pirate AI is just steering. Then proposed building it in five steps.

Can we make it so that the boats are wooden sailboats? Like era appropriate for classic pirate ships. For combat, I think we can keep it simple right now and just have it auto engage. I think the world should be fixed. Do 8-10 islands. Can we also have areas in the ocean that can be dive spots for sunken treasure. One of the islands should also be a pirate base. One is your home base.

Turned it into a spec: sloop to brigantine to frigate, auto-firing broadsides, nine fixed islands, and anchor-and-wait dives. Then asked about wind, diving, the pirate base and sinking before writing code.

Why does my boat look like sh*t? I can see through it.

Patched the hole in the stern, then laid out three ways to make the ships look properly good. Or you could provide a low-poly kit for better lightweight assets.

Is that actually where my boat is meant to sit in the water? It looks like it is low. Like it is ready to sink.

It was. Claude had guessed the waterline from one screenshot. This time it measured the hull and raised every ship class to match.

Can you launch this on Vercel?

Built it, deployed it, and checked the live site loads. It used the Vercel CLI rather than the connector, because the 30 model files would otherwise have gone up one at a time.

What the AI got wrong

  • You could see through the ship.

    The first code-built ships had a gap in the stern, and even fixed they looked like toys. I haven't quite figured out how to make Claude provide reasonable lightweight models.

  • The ship sat too low.

    After the switch to the kit models, Claude sank the hull to hide a flat strip underneath and overdid it. By using some of the ship's features and maybe not completely understanding what they were, Claude sat the boat low enough in the water to make it look like it was on the verge of sinking.

What I'd do next

Adding sound, as well as a day/night cycle. I would probably also introduce non-pirate ships that also conduct trade, and have the pirate ships get stronger as you get further into your upgrades.

Side by side

ChrisRahul
The takeTrade, dive, and fight piratesPeaceful river ride turns into chaotic race
Main toolsClaude Code, Three.jsT3 Code, ThreeJS
Time3 sessions, about 1 hour 20 minutes3 sessions, 1 hour 25 minutes
Best AI momentTurning a one-paragraph idea into a full trading loopArt style from prompt 1
Worst AI momentShips you could see throughFirst attempt to model a character