How AJ Cities was made: building a Lagos open world for the browser

People ask how AJ Cities works: how a 3D open world set on the edge of Ajegunle, Lagos, runs in a phone’s browser with nothing to install. This is the behind-the-scenes version. No secrets, just the choices that shaped the game and why we made them.

The idea: a Lagos you can walk into from a link

We wanted a game about a real corner of Lagos that anyone could open from a link in a group chat. No app store, no gigabyte download, no console. That one decision, the browser first, shaped everything else. It meant the game had to be light, it had to run on the phones people actually own, and it had to be fast on slow connections.

The tools

AJ Cities is written in TypeScript, a version of JavaScript that checks your code as you write it, and drawn with Three.js, the JavaScript 3D library that puts real-time 3D graphics in a web page. Vite builds it. There is no big game engine and no app framework on top: plain TypeScript and Three.js, so we control every byte that reaches your phone. Every change has to pass type checks, a linter and an automated test suite before it goes in, and the rules of play, like ticket prices and where shooting is allowed, each have a test of their own.

An estate that does not exist, by places that do

The map is not a copy of real streets. Abraham Adesyan Estate is an original, fictional layout, measured out in metres, set where Navy Town meets Kirikiri on the edge of Ajegunle. Real places around it, the prison wall across the road, the port cranes on the skyline, are setting only. Every character and every business in the estate is invented, with one exception: the artist Joe-Izzy, who appears as himself with his permission.

Inventing the estate let us build it to fit the story. June 12 Street has exactly the houses AJ’s story needs: a face-me-I-face-you rooming house, a free clinic, a family with a home gym and three dogs, a restaurant, and Prizm, the club. To the south is the bush, with a football pitch and the beach beyond.

Plaster, zinc and laterite, made by code

Most of what you see is not downloaded at all. The plaster, zinc, laterite, asphalt, wood and tile surfaces are generated by the game’s own code when it starts, and the buildings, furniture and plants are built from procedural geometry, shapes described in code rather than shipped as heavy model files. That keeps the download small and lets every wall look a little different.

The real Lagos sun

The sky in AJ Cities follows the actual sun over the estate. The game works out the sun’s direction from the estate’s position on the map and the real time in Lagos, then lights the world with it: a gradient sky, soft shadows by day and lights coming on at night. If it is dusk in Lagos, it is dusk on June 12 Street. People keep their own routines around it: Funke leaves for the hospital on weekday mornings, and the music at Prizm starts at 9 pm.

Realistic people, never toys

We set one rule early: the people should look real, never cartoonish. Every person in the game, from AJ and Chuks to the officers at the gate, is built from the Microsoft Rocketbox Avatar Library, a set of realistic, rigged 3D people with animations that Microsoft released under the open MIT licence. We convert and compress each one for the web, give them their own outfits and props, and write their identities and dialogue ourselves.

Realistic people are heavy, so they arrive carefully. While AJ’s model loads, a simple stand-in figure built in code walks in his place, so the game is playable from the first second. Other people load only when you get close to where they are, and the club’s guests and staff only when you step inside the club. Every model’s textures are compressed, and phones, or anyone with the data saver on, get a lighter version with smaller textures, which roughly halves what the people cost to download.

Phones first, and slow data first

Every screen in AJ Cities is designed and checked at phone width before desktop. On a touch screen, your left thumb makes a floating joystick, dragging on the right looks around, and pinching zooms. The controls are touch-friendly and the page never zooms in on you by surprise.

Data matters just as much. Frame rate, download size and network traffic are weighed in every change. New parts of the world are built so that a player who never leaves the estate downloads nothing new, and anything new loads only when it is about to be needed, reusing bodies, outfits, textures and animations the game already has. Each new piece of work reports what it costs to download, and is checked on a small touch phone.

One radio, one clock, one estate

The live side of the game, the virtual estate party, adds some shared rules. Every radio in the game plays the same song at the same moment for every player, so when a track starts, it starts for everybody. Each party world is always day, always night or real Lagos time, and every player in a world sees the same time. Up to 60 players share each estate, and when one fills up another opens. How party mode works.

Original, all the way down

Everything in AJ Cities is original: the art, the interface, the code, the writing and the name. The story is told mostly in conversation rather than cutscenes, because that is how you learn anything on a Lagos street: somebody tells you, usually with a joke. Read AJ’s story to see the voice.

Built to change safely

Most of our work is improving what is already there, not starting again. Each change is made so it can be undone easily, often behind a switch that turns a new behaviour off and puts the game back exactly as it was. It is a slow way to build, and it means the game you play today keeps working while tomorrow’s is being made.

Curious about the wider scene? Read about Nigerian game developers and free Nigerian browser games.

What is AJ Cities built with?

TypeScript and Three.js, the JavaScript 3D library, built with Vite. It runs in the web browser on phones and computers.

Is the estate in AJ Cities a real place?

No. Abraham Adesyan Estate is an original, fictional layout on the edge of Ajegunle, Lagos. The real places around it are setting only.

Where do the characters’ 3D models come from?

Every person is built from the Microsoft Rocketbox Avatar Library, released under the MIT licence, then converted, compressed and dressed for the game. Their names, stories and dialogue are original.

Does AJ Cities work on a slow connection?

It is built for phones and slow, low-data connections first: parts of the world load only when they are needed, and phones get lighter models.