Live examples

Many pages of these docs have a small game beside the code they explain. The source shown is the whole program, built for the web as it is, and it runs in the page. An example starts when you scroll to it and stops once it's well off screen, so only what you're looking at runs. Restart starts it over, and Stop ends it until you press Run again.

The page scrolls over an example: the wheel always does, and on a touchscreen so does a swipe that starts on one. Click or tap an example to play it. It then has the keyboard, and on a touchscreen your swipes too, until you click or tap the page somewhere else; its frame is outlined meanwhile.

Some examples put two players side by side. Each frame is a machine of its own, and the two meet in a room, as two browsers anywhere would.

Two machines

• Two players, in one match: the game from the first tutorial, hosted by one frame and joined by the other.
• Open a room, and join it: a lobby to work yourself. Start a match, open it, join it by its code, close it, kick, leave.
• Predicted, and confirmed by the server: what a machine predicts beside what the server has confirmed, with a slider for the second player's ping.
• Whose input a system reads: Owner, traded between two players, and a body nobody owns.
• A command, and a handler that says no: an action sent into the match, and the handler that checks who sent it.

Samples

• Samples: a gallery of complete games to open in your browser and play with friends.

The match

• Spawn, Add, Remove and Destroy: entities and their components, changed by taps.
• Component filters in motion: which entities a system runs for.
• Events, and what a machine shows of them: events sent to an entity and to the world, with the match's handlers and local ones.
• Rooms that load and unload: scenes, and the entities that go with them.
• A countdown, and a dash: async handlers that wait.
• An input, sampled and read: the devices, the input and the system that reads it.
• The pointer and individual fingers: held buttons, press edges, touch slots and screen coordinates.
• Heat that spreads: a grid, and a parallel loop over its cells.

Physics

• Crates, balls and a floor: Box2D's bodies as components, with crates to kick and balls to drop.
• A wall of crates, and balls to throw: the same with Box3D, through a 3D camera.
• Towers walkthrough: steering kinematic bricks, landing them as dynamic bodies, and building the input, lobby and views around a Box2D match.
• Sumo walkthrough: driving balls with impulses, replacing floor bodies as tiles fall, and drawing a large Box3D arena with instancing and shadows.

What a machine shows

• A view draws the world: cameras, and screen and world coordinates.
• Opacity in 2D and 3D: a shape and two translucent panes, with solid objects behind and in front.
• Five ticks a second, drawn every frame: what views see between ticks.
• Smooth shapes: round rects, ellipses, arcs, outlines and soft edges.
• A sprite from a file: a PNG packed with the game, drawn as a texture and read by the match.
• A model from a file: a glTF as one mesh of a vertex struct, lit by a frag.
• Anchors, sizes and weights: text, where it's placed and how big it is.
• A grid, drawn as a texture: a Grid2<Color> to paint on.
• A texture, past its edges: clamped, repeated and mirrored.
• A lens, cut out of a wall: a shape stored in stencil, and what's drawn inside it and outside it.
• Primitives through a 3D camera: cubes, a sphere, a cylinder and a plane.
• A scene through a frag: a render target, blitted to the window.
• A frag and a vert: code of the game's on the GPU.
• Lighting, in a frag: a vertex with a normal, lit pixel by pixel.
• A shadow map: what casts drawn into a target of depth alone, and a frag that compares.
• A sky, and a ball that reflects what's around it: a Cubemap of six files, and one drawn into a face at a time.
• Three images from one frag: a target of several colors, filled in one pass and lit in a second.
• A list of motes, in one draw: thousands of instances from a list.
• Grain and sparks, rolled by the GPU: a frag that rolls for each pixel, and a hash that holds still.
• Local entities, and no match: particles that are one machine's own.
• A small synthesizer: an audio source with frequency and volume knobs, and a waveform preview.

The GUI

• Try the controls: the widgets, and what they change.
• Layout and modal focus: rows, columns and a modal.
• A theme around a block: the GUI's colors and corners.
• Cards that are controls: widgets a view draws itself.

The language

• Curves from Math: a few of Math's functions, plotted.
• Noise, drawn by the GPU: Perlin, simplex and cellular noise, with octaves and a seed.
• The same seed, the same numbers: a Random and its seed.
• A list, changed and sorted: a list's members, a button each.
• Scores by name, and tags each once: map insertion and lookup, set deduplication, removal and insertion order.

Samples collects full games to play. The Duel code tour, Towers walkthrough and Sumo walkthrough explain how three of them are built.