Port: SimCity

capstone lesson Advanced ⏱ 20 min vgai 0.1.0

Prerequisites: Foundations (GameComponent update loop)

What you'll learn

• Run a ported city-builder (dgreenheck/simcity-threejs-clone) on vgai
• See the running top-down city grid and its in-game zoning HUD
• Understand how a per-tile sim maps to a BuildingController GameComponent that develops lots over time

What you'll build: A city-builder, ported from a three.js clone, where zoned lots develop into buildings.

Walkthrough — Port: SimCity · generated by site/media/lessons/ports-batch.lesson.ts (5 steps)

simcity (packages/editor/template/src/examples/simcity/) is a port of dgreenheck/simcity-threejs-clone. The original’s per-tile SimObject.simulate(dt) model becomes a BuildingController GameComponent whose update(dt) is ≈ 1:1 with the original, driven by a dependency-free sim-logic.ts.

Run it

1. Open the simcity scene. Load examples/scenes/simcity.vscn.json.

   

   The city grid of lots.

2. Enter play mode. Press Play — the top-down city view starts.

   

   Play mode, top-down camera.

3. The top-down city grid renders. Play mode shows the city grid from above.

   

   The running city grid.

4. The HUD shows the zoning controls. The in-game HUD lists the controls: left-click zones a lot residential, right-click zones it commercial.

   

   The zoning HUD (left = residential, right = commercial).

5. Stop play mode. Press Stop (or Escape).

Why this matters

SimCity shows a different port shape: a per-entity simulation. Each lot is an entity with a BuildingController GameComponent, and the whole city is just many of those ticking in the gameLogic phase — the original’s tile loop maps directly onto the component update model. When you zone a lot (left-click residential, right-click commercial), its BuildingController starts developing it — the building grows over a few seconds toward its target height, driven by the dependency-free sim-logic.ts.

update(dt) ≈ the original loop

Because vgai’s update(dt) matches the original’s simulate(dt) almost line-for-line, porting the sim was mostly moving code into a component.

Recap

New functionality

• Ran a ported city-builder on vgai
• Saw the running top-down city grid and its zoning HUD

New concepts & skills

• A per-tile sim maps to a per-entity BuildingController GameComponent
• Many components ticking in gameLogic = the city simulation
• Ports map structure onto vgai's model

Next lesson → Loading Existing Games

See also

• Entities & components — the update model the sim uses.
• Loading Existing Games — the porting/ingest story.