Define world zones using simple geometry. Divide space before adding systems.

Every game world is designed on purpose. The streets of GTA, the kingdoms of Mario, the zones in Minecraft — they all started as rough layouts before becoming detailed worlds. Today you'll design YOUR world layout.

Video: The Design Behind Super Mario Odyssey — GMTK (11 min)

Mark Brown analyzes how Nintendo designed Super Mario Odyssey's kingdoms — how each area has distinct zones with different purposes, and how the layout guides the player. Watch for how space is divided into meaningful areas.

Discussion after watching: How does Mario Odyssey use different areas within a single kingdom? Why does it matter that the "safe" area and the "challenge" area are separate? How is this similar to your game — where danger zones and safe zones need to be distinct?

The world is spatial state. Before we add encounters, battles, or stores, we define WHERE things happen. Space comes before mechanics.

You need: Graph paper (or print some from incompetech.com/graphpaper), colored pencils or markers, and a ruler.

Instructions:

  1. Each square on the graph paper = 5 units in your 3D world.
  2. Draw the OUTLINE of your game world. How big is it? Where are the edges?
  3. Color-code your zones:
    • Ami: Gray for Manhattan (danger zone), blue-green for Camp (safe zone). Mark where the player starts.
    • Ida: Green for each of the 14 buildable lots, arranged in a grid. Number each lot 1-14.
  4. Write the coordinates of each zone's corners (top-left x,y and bottom-right x,y).
  5. Draw the player's starting position with a red X.

This drawing IS your blueprint. When you write code next, you'll literally type these coordinates into your program. The graph paper is not just a planning exercise — it's a direct translation guide from paper to code. Keep it next to your computer.

Ami — Combat Risk Engine

Create Manhattan Zone (large area, gray plane) and Camp Zone (smaller safe area, blue/green plane). Two distinct colored areas that represent danger and safety.

Ida — Economic Growth Engine

Create 14 rectangular lots in a grid layout. Each lot is a visible colored block representing a buildable plot of land.

Ami: Create two distinct zones with different colors:

// Manhattan zone — large, gray, dangerous const manhattan = new THREE.Mesh( new THREE.PlaneGeometry(80, 80), new THREE.MeshStandardMaterial({ color: 0x666666 }) ); manhattan.rotation.x = -Math.PI / 2; scene.add(manhattan); // Camp zone — small, safe, blue-green const camp = new THREE.Mesh( new THREE.PlaneGeometry(15, 15), new THREE.MeshStandardMaterial({ color: 0x44aa88 }) ); camp.rotation.x = -Math.PI / 2; camp.position.set(-30, 0.01, -30); scene.add(camp);

Ida: Create 14 lots in a grid using a loop:

for (let i = 0; i < 14; i++) { let lot = new THREE.Mesh( new THREE.BoxGeometry(5, 0.1, 5), new THREE.MeshStandardMaterial({ color: 0x00ff00 }) ); lot.position.set((i % 7) * 6, 0, Math.floor(i / 7) * 6); scene.add(lot); }
  • Create clearly visible spatial zones with different colors
  • Position zones in logical layout
  • Walk between all zones to test visibility
  • Verify zones are distinguishable from each other
  • Document zone coordinates for next lesson
  • Compare graph paper blueprint to the 3D result — do they match?
  • Walk from one end of the world to the other — does the scale feel right?
  • Checkpoint

    You can walk between zones/lots. Each zone is visually distinct.

    No buildings. No detailed streets. No textures. Just colored blocks defining space.

    Zones too small — hard to walk to and easy to miss.

    Zones overlapping — makes detection impossible later.

    Not keeping track of zone coordinates — you'll need exact boundary values for Day 10's zone detection.

    The graph paper activity is essential — don't skip it. Drawing on paper before coding prevents the common mistake of "just placing things randomly." When zones have coordinates written on paper first, the code becomes a simple translation exercise.

    Ask "Why define space before mechanics?" Answer: because WHERE something happens determines WHAT can happen. Manhattan vs Camp. On-lot vs off-lot. Space is state.

    Watch for scale problems. Kids often make zones too small (hard to walk into) or too big (boring empty space). Have them test by actually walking the player through the world. If it takes 2 seconds to cross a zone, it might be too small. If it takes 30 seconds of empty walking, it's too big.

    Keep the graph paper! Tomorrow's zone detection lesson will directly reference the coordinates they wrote down today. Having the physical map next to the screen makes debugging much easier — "Is my player at x=35? The graph paper says that's Manhattan. Does the code agree?"

    Tomorrow: The game knows WHERE you are — zone detection connects space to state. Walking into Manhattan will trigger "DANGER ZONE" in the console. Your world becomes reactive.