The Last Redoubt

Objective

We are going to create a video game. Unusually, (a) we'll describe the process in detail, (b) we'll use everyday web development techniques.

What kind of game?

A top-down adventure game.

Where does it take place?

The Night Land - a futuristic Earth whose Sun has died. Humanity resides in a gigantic pyramid called The Last Redoubt.

OK, but how will you make the game?

Using standard web dev techniques, emphasizing the declarative nature of HTML and CSS rather than JavaScript driven game-loops. We shall avoid game-centric technology like WebGL and physics engines. Then our approach is relevant to a wide audience i.e. web developers.

What distinguishes it?

We'll build an adventure game on this website, step by step, blog by blog. We've already mentioned we'll use standard web development techniques. Additionally, we'll use a browser-based terminal, running our own interactive shell. We'll use it to spawn NPCs, request nav-paths, run scripts, and execute long-running processes. You can also use this CLI to run the demos, inspect internal state, and implement your own behaviours.

TODO a meaningful example 🚧

Let's spend some time providing the backdrop

FROM HERE would like

• TODO ideas about characters and storylines e.g. 64 floors, floor layout; protagonist; other characters; natural mental states are unskillful; watchers represent fetters e.g. worry, ill-will etc.
• TODO clearer ideas about gameplay e.g. exploration; procedural generation; time-limited navpath motion; mental weaponry related to mental training; travel within the Night Land; ultimate goal e.g. deathless

We'll use navigation meshes to simulate starship inhabitants, following the rules of Traveller. To makes things less abstract, here's a Traveller-based asset called a geomorph.

We've recreated Geomorph 301 (a.k.a. Bridge) from Robert Pearce's Starship Geomorphs 2.0, using 8 of his Starship Symbols. Obstacles you can see over are shaded grey e.g. chairs and beds. Walls and obstacles which cannot be seen over are darker grey and black. The underlying polygons of these obstacles, together with the white rectangular doors, induce the white triangulated navigable polygon shown above.

Check out this larger version.

TODO remove SvgVisibilityDemo and Css3d demo, replacing with NPC demo combined with terminal in some way.

Constraints

This project needs a backbone. We've chosen the underlying technology, low-level game mechanics, and where events take place.

Technology

Let us list our chosen tools.

• Use everyday web dev techniques (e.g. not WebGL).
• Use Boxy SVG to edit assets.
• Use NextJS as our dev env (we may switch to Gatsby though).
• Use React function components and CSS-in-JS.

  In particular, Preact (a React alternative) and Goober.

• Use CodeSandbox to share editable code.

In so far as modern web development goes,

we must support both mobile and desktop devices.

If you're unfamiliar with CodeSandbox (or similar), check this example. Perusing the files, you'll find e.g. the rectangle class Rect and a Geomorph PNG. Our CodeSandboxes use React, whereas this site uses Preact.

Game mechanics

Next, gameplay related constraints.

• Use Starship Geomorphs 2.0 for graphics.

  We saw an example previously; here's another.

• Use a realtime birdseye camera.

  Basically a pannable and zoomable SVG.

• Use the Web Animations API.

  This API provides access to the technology underlying CSS animations.

• Use navigation & raycasting algorithms.

  Involves a navmesh and computing ray/geometry collisions.

• Do not use a Physics engine.
• Use an in-browser terminal.

We'll develop complex Game AI with the aid of a terminal. Try entering or copy-pasting the commands below. Mobile users may find copy-pasting easier.

As usual, Ctrl+C terminates the "foreground process" e.g. try terminating sleep 5; echo rise and shine. Pipelines and background processes are also supported. We'll use terminals to monitor the current state of our Game AI, issue direct commands, and develop long-running behaviour.

Setting

Then it only remains to constrain the setting.

• Events take place in the Traveller Universe, onboard star ships, space ships and space stations.
• Bardo Thodol provides a source of inspiration,

  e.g. Ship AIs may recite it to dying Low Berth travellers.

• The Night Land provides a source of inspiration,

  e.g. Earth is generally assumed to be lost after a Karmic Loop was created, letting in the Watchers and other manifestations from Buddhist hells.

Traveller is a Futuristic pen-and-paper Role-playing Game, created in the late 70s. It permits faster than light travel bounded by 6 parsecs per week (but usually more like 2 parsecs per week). Learn more on the wiki, the official site or explore Traveller Map. It directly motivated Robert Pearce's Starship Geomorphs, and provides considerable depth.

We'll leverage two additional sources of inspiration i.e. Liberation Through Hearing in the Intermediate State (Bardo Thodol) and a famous Science Fiction story from 1912 (The Night Land).

Finishing

Over time we'll clarify the above constraints, but first we emphasise:

creating a video game is really fucking hard.

Spelunky's creator suggested three important requirements for finishing a game. We'll address them.

1. Fun to develop

Games I want to make. My underlying motivation is the lack of Game AI resources available on the web. It is hard to discuss the subject without actually building a game, so I chose a setting and game mechanics which felt fun for me. I am particularly interested in navigation i.e. combining the movement of many characters in a flexible manner.

2. The Result

Games I want to have made. As an end result I want a highly replayable tactical/action game sandbox. Procedurally generated missions will involve going from A to B and doing C (ever was it so). Monotony will be overcome via encountered NPC behaviours and e.g. ship building. Functionally, think Teleglitch with richer NPCs and the ability to place room modules when upgrading/docking. Graphically, see Starship Geomorphs 2.0.

The Last Redoubt will be easily extendable. We'll provide compositional code, escape hatches to CodeSandbox, clear explanations, and GitHub comments.

3. Experience

Games I’m good at making. I work as a web developer, using React and CSS-in-JS on a daily basis. I have a strong background in Theoretical Computer Science, so won't confuse Game AI with AI, nor fall prey to the Deep Learning hype. I have also created similar game mechanics many times over the years. Here's hoping my chain of unfinished projects is coming to a close!