Melvin Debot

Available for selected collaborations

Paris

Lost in Châtelet — Find your way out of Europe’s largest underground station

05Game

Lost in Châtelet

Find your way out of Europe’s largest underground station

ClientHETIC
Year2018
RoleDevelopment · Game design · Motion
Play it

The challenge

A school brief with one rule: JavaScript only. No framework, no game engine, no canvas library. The subject we chose was Châtelet–Les Halles, the largest underground station in Europe and a place everyone in Paris has been lost in at least once.

The response

A first-person maze rendered from the station’s real signage language — direction plates, line colours, corridor numbering. You navigate the way you actually navigate a metro: by reading signs and guessing.

The Lost in Châtelet title screen
The title screen — a CRT frame, and the only chrome the game allows itself.

01Approach

Signage as the entire game mechanic.

We did not build a map view. The only information you get is what a real corridor gives you: a plate on the wall, a line colour, an arrow. Getting lost is the content, so every wayfinding decision had to be authentic to the station.

  • Real RATP signage grammar as the interface
  • No map, no minimap, no compass
  • Three difficulty levels tuned by corridor density
  • A ticket hall inside Châtelet–Les Halles station
    Châtelet–Les Halles for real: the corridors the maze is traced from.

    02Design system

    Underground palette, surface typography.

    Line colours are the only chroma in the game and they carry meaning exclusively. Everything else is tunnel: sodium light, concrete, and the cold blue of platform lighting.

  • Line colours used only as information
  • Sodium and platform-blue lighting model
  • Plate typography rebuilt from reference photography
  • The game's player character sprite
    The player. Vanilla JavaScript, sprite by sprite, no engine underneath.
    The concourse of Châtelet–Les Halles station
    The station's own signage language became the game's navigation system.

    03Development

    Vanilla JavaScript, all the way down.

    Corridor generation, collision, the render loop, the animation system and the audio cues are all hand-written. Writing a tween function from scratch is the fastest way to understand what a library like GSAP is actually doing for you.

  • Hand-rolled render loop, easing and collision
  • Procedural corridor generation with seeded layouts
  • Zero dependencies
  • 04Outcome

    The project that made the toolbox make sense.

    Building the primitives by hand — timing, interpolation, state — is the reason the motion work in everything since has been deliberate rather than borrowed.

    0Dependencies
    3Difficulty levels
    1Station, fully mapped

    Stack

    • Vanilla JavaScript
    • DOM rendering
    • Procedural generation

    Services

    • Development
    • Game design
    • UI / UX design
    • Optimisation

    Images

    • Station photography — Patteloup, CC BY-SA 4.0; Valjo29, CC BY-SA 4.0; poudou99, CC BY-SA 3.0, via Wikimedia Commons

    Next project — 06

    Histocom

    An interactive history of communication technology, told through the objects themselves.

    Start something

    Let’s make the web feel alive.