Share a link that plays the game without the editor (#266)

A project could only be played inside the editor, behind the login.
To show a game to someone else there was no way short of an account.
A release freezes the saved project under a random token and serves
it on a page that holds nothing but the game view.

- Menu -> Release... opens a dialog with the state of the release,
  the link with Copy link and Open, Publish or Update release, and
  Take down behind a confirmation.
- Publish saves first and refuses while anything is unsaved, like
  snapshots. Updating keeps the link. Take down kills it, and a new
  Publish hands out a new token.
- The link is play.html?game=<32 hex>. The page needs no session,
  paints Theme.colors.background, zooms with Auto and waits for
  "Click to play" so that sound and keyboard focus are allowed.
- The game always starts in the start scene. Persistent variables
  are stored per link in the browser. Plugins are not loaded, and the
  dialog warns about them and about a project without a scene.
- GET ?r=releases/{token} is the only route besides auth/* that works
  without a login. The public answer carries the token as project.id,
  so the project id stays hidden. Release files are written with 0640
  and nginx does not serve them directly (measured 403).
- Starting, the frame and Load scene moved into runtime/GameRun.ts.
  Play in the editor and the play page run through the same code.
- WorldViewport moved to src/viewport/ and no longer needs the
  EditorState. Pointer forwarding (gamePointer.ts) and setting up
  textures, fonts and sounds (projectFiles.ts) exist only once.
- Vite builds two pages. The play page loads 4 kB of its own code
  plus the shared chunk (Pixi, runtime, drawing, 653 kB) and Rapier,
  without the editor.

Found on the way, not fixed here: data/projects/<id>.json answers 200
without a login because the files are 0644.

Tests:
- ./check.sh: 194 files, 2808 tests, exit 0.
- tests/php/releases.test.php: 20 checks, also added to CI.
- New e2e module 60 with 10 checks, played in a browser without a
  session. Module 46 counts the menu entries and was updated.
- Full e2e run: 1572 checks passed.
- Counter-checks: 3 unit, 2 PHP and 3 browser mutations all fail.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/core/store/HttpReleaseStore.ts

@@ -0,0 +1,27 @@
+import { apiRequest } from './http';
+import type { ReleasedGame, ReleaseStore, ReleaseSummary } from './ReleaseStore';
+
+export class HttpReleaseStore implements ReleaseStore {
+  constructor(private readonly endpoint: string) {}
+
+  of(projectId: string): Promise<ReleaseSummary | null> {
+    return apiRequest(this.endpoint, 'GET', route(projectId));
+  }
+
+  publish(projectId: string): Promise<ReleaseSummary> {
+    return apiRequest(this.endpoint, 'POST', route(projectId));
+  }
+
+  takeDown(projectId: string): Promise<void> {
+    return apiRequest(this.endpoint, 'DELETE', route(projectId));
+  }
+}
+
+/** The one call that needs no sign-in (#266). */
+export function loadReleasedGame(endpoint: string, token: string): Promise<ReleasedGame> {
+  return apiRequest(endpoint, 'GET', `releases/${token}`);
+}
+
+function route(projectId: string): string {
+  return `projects/${encodeURIComponent(projectId)}/release`;
+}

src/core/store/ReleaseStore.ts

@@ -0,0 +1,40 @@
+/** A project's released copy as the release dialog shows it (#266). */
+export interface ReleaseSummary {
+  /** What the link carries: 32 hex digits, the same for as long as the project stays released. */
+  token: string;
+  /** The project revision the copy was taken from. */
+  revision: number;
+  /** ISO time, UTC. */
+  publishedAt: string;
+}
+
+/** What the play page loads: the copy alone, under the token rather than the project's own id. */
+export interface ReleasedGame {
+  name: string;
+  publishedAt: string;
+  project: unknown;
+}
+
+/**
+ * The released copy of a project. Publishing copies the project as the server stored it, so what a
+ * tab has not saved yet is not part of it; publishing again replaces the copy and keeps the link.
+ */
+export interface ReleaseStore {
+  /** null while the project is not released. */
+  of(projectId: string): Promise<ReleaseSummary | null>;
+  publish(projectId: string): Promise<ReleaseSummary>;
+  takeDown(projectId: string): Promise<void>;
+}
+
+/** The page a released game is played on, next to the editor's own. */
+export const PLAY_PAGE = '/game-maker/play.html';
+
+export function releaseUrl(origin: string, token: string): string {
+  return `${origin}${PLAY_PAGE}?game=${token}`;
+}
+
+/** The token a play page was opened with, or null when the address carries none that could be one. */
+export function releaseToken(search: string): string | null {
+  const token = new URLSearchParams(search).get('game') ?? '';
+  return /^[a-f0-9]{32}$/.test(token) ? token : null;
+}

src/editor/App.ts

@@ -1,21 +1,18 @@
 import type { Application } from 'pixi.js';
-import { projectFiles } from '../core/model/projectFiles';
 import type { AuthStore, SignedIn } from '../core/store/AuthStore';
 import { HttpAuthStore } from '../core/store/HttpAuthStore';
 import { HttpFileStore } from '../core/store/HttpFileStore';
 import { HttpProjectStore } from '../core/store/HttpProjectStore';
+import { HttpReleaseStore } from '../core/store/HttpReleaseStore';
 import { HttpSnapshotStore } from '../core/store/HttpSnapshotStore';
 import { HttpUsersStore } from '../core/store/HttpUsersStore';
 import type { StoredTexture, UploadedTexture } from '../core/store/TextureStore';
 import { loadPhysics } from '../runtime/physics/engine';
-import { requestRender, type VStack } from '../ui';
-import { fontLibrary } from '../viewport/FontLibrary';
-import { soundLibrary } from '../viewport/SoundLibrary';
 import { projectPictureFactory } from '../viewport/generatedPictures';
+import { preloadProjectFiles, setUpProjectFiles } from '../viewport/projectFiles';
 import { textureLibrary } from '../viewport/TextureLibrary';
-import { installPixelArtPictures } from '../viewport/pixelArtPicture';
+import type { VStack } from '../ui';
 import { pixelCels } from '../viewport/PixelCels';
-import { installVectorArtPictures } from '../viewport/vectorArtPicture';
 import { LoginScreen } from './auth/LoginScreen';
 import { installLoginHook } from './auth/loginHook';
 import { consoleLog } from './console/log';
@@ -27,22 +24,6 @@ import { EditorState } from './state';
 
 const API_ENDPOINT = '/game-maker/api/index.php';
 
-/**
- * Where uploaded images live: the API writes them, the browser reads them straight off disk as
- * static files named by their content hash. Fonts and sounds work the same way, one directory over.
- */
-const TEXTURE_BASE = '/game-maker/data/textures';
-const FONT_BASE = '/game-maker/data/fonts';
-const SOUND_BASE = '/game-maker/data/sounds';
-const PIXEL_BASE = '/game-maker/data/pixels';
-
-function preloadProjectFiles(state: EditorState): void {
-  const files = projectFiles(state.project);
-  textureLibrary.preload(files.textures);
-  fontLibrary.preload(files.fonts);
-  pixelCels.preload(files.cels);
-}
-
 /**
  * Shows the sign-in screen until somebody is signed in, and answers with their name. Returns
  * right away when the session from an earlier visit is still good – which is what lets a
@@ -82,19 +63,7 @@ async function signedInUser(app: Application, root: VStack, auth: AuthStore): Pr
  */
 export async function startEditor(app: Application, root: VStack): Promise<void> {
   const auth = new HttpAuthStore(API_ENDPOINT);
-  textureLibrary.configure(TEXTURE_BASE);
-  fontLibrary.configure(FONT_BASE);
-  soundLibrary.configure(SOUND_BASE);
-  pixelCels.configure(PIXEL_BASE);
-  // An image or a font arrives long after the click that asked for it, and the widget waiting for
-  // it repaints without telling anyone: both libraries are a wake-up of their own. Registered once
-  // for the page, not per session – the files they hold are shared by every account anyway.
-  textureLibrary.onChange(() => requestRender());
-  fontLibrary.onChange(() => requestRender());
-  // Vector art draws its own picture and needs the renderer to do it (#129). Registered once for
-  // the page like the libraries above: which project it is asked about comes from the factory below.
-  installVectorArtPictures(app.renderer);
-  installPixelArtPictures();
+  setUpProjectFiles(app.renderer);
 
   const openSession = async (): Promise<void> => {
     const { user, role } = await signedInUser(app, root, auth);
@@ -105,10 +74,8 @@ export async function startEditor(app: Application, root: VStack): Promise<void>
     // Drawn pictures (#185) are looked up in the project this session holds; the next session
     // installs its own, which is also what lets go of everything the old one had drawn.
     textureLibrary.setPictureFactory(projectPictureFactory(() => state.project));
-    // Everything the project names is fetched as soon as it is named, not when it is first drawn:
-    // an animation reaching a frame from another sheet would otherwise blink out once. Asked on
-    // every change, which is cheap – a file that is held or on its way is skipped.
-    state.on('project', () => preloadProjectFiles(state));
+    // Asked on every change, which is cheap – a file that is held or on its way is skipped.
+    state.on('project', () => preloadProjectFiles(state.project));
     const editor = new Editor(
       app,
       root,
@@ -122,6 +89,7 @@ export async function startEditor(app: Application, root: VStack): Promise<void>
       new HttpFileStore(API_ENDPOINT, 'fonts'),
       new HttpFileStore(API_ENDPOINT, 'sounds'),
       new HttpSnapshotStore(API_ENDPOINT),
+      new HttpReleaseStore(API_ENDPOINT),
       {
         user,
         role,

src/editor/Editor.ts

@@ -38,6 +38,8 @@ import { attachAutosave } from './autosave';
 import { PasswordDialog } from './auth/PasswordDialog';
 import type { OpenProjectDialog } from './OpenProjectDialog';
 import type { SnapshotsDialog } from './SnapshotsDialog';
+import type { ReleaseStore } from '../core/store/ReleaseStore';
+import type { ReleaseDialog } from './ReleaseDialog';
 import type { ProjectSettingsDialog } from './ProjectSettingsDialog';
 import { dialogSlot } from './FormDialog';
 import { ContainerEditor } from './container/ContainerEditor';
@@ -271,6 +273,7 @@ export class Editor implements PlayHost {
     fonts: FontStore,
     sounds: SoundStore,
     snapshots: SnapshotStore,
+    releases: ReleaseStore,
     account: EditorAccount,
   ) {
     this.viewport = new SceneViewport(state);
@@ -307,7 +310,7 @@ export class Editor implements PlayHost {
       () => {
         if (this.play.isPlaying) this.play.stop();
       },
-      { store: snapshots, flush: () => this.autosave.flush() },
+      { snapshots, releases, flush: () => this.autosave.flush() },
       // Every project brings its own plugins (#119); until `startPlugins` has run there is no
       // manager, and a project with plugins simply has none of them.
       async (raw) => void (await this.plugins?.syncTo(pluginsOf(raw))),
@@ -580,6 +583,11 @@ export class Editor implements PlayHost {
     return this.projects.snapshotList();
   }
 
+  /** The open "Release" dialog (#266), for the check scripts. */
+  releaseDialog(): ReleaseDialog | null {
+    return this.projects.releaseView();
+  }
+
   /** Whether `id` names a tab already – a built-in one by its own id, a plugin's by the id it gave. */
   hasTab(id: string): boolean {
     return Object.hasOwn(TAB_LABELS, id) || this.pluginPanes.has(`plugin:${id}`);

src/editor/PlaySession.ts

@@ -5,18 +5,14 @@
  */
 import { emptySharedState, type SharedState, worldPositionOf } from '../core/graph';
 import { namedValue } from '../core/graph/values';
-import {
-  addGameSystems,
-  type BehaviorSystem,
-  behaviorError,
-  type Trace,
-} from '../runtime/systems/BehaviorSystem';
+import { GameRun, type RunServices } from '../runtime/GameRun';
+import { type BehaviorSystem, behaviorError, type Trace } from '../runtime/systems/BehaviorSystem';
 import type { AnimationPlayer } from '../core/model/animation';
 import type { PropertyBag } from '../core/model/Properties';
 import { gameClock } from '../core/time';
 import { loadPhysics, readyPhysics } from '../runtime/physics/engine';
 import { Input } from '../runtime/systems/Input';
-import { World } from '../runtime/World';
+import type { World } from '../runtime/World';
 import { ui } from '../ui';
 import { soundLibrary } from '../viewport/SoundLibrary';
 import { saveArea } from './saves';
@@ -58,8 +54,7 @@ export interface PlayHost {
 }
 
 export class PlaySession {
-  private world: World | null = null;
-  private behaviors: BehaviorSystem | null = null;
+  private run: GameRun | null = null;
   private readonly input = new Input();
   /** Set while Play waits for the physics engine, so a second press does not queue a second run. */
   private waiting = false;
@@ -78,6 +73,14 @@ export class PlaySession {
     });
   }
 
+  private get world(): World | null {
+    return this.run?.world ?? null;
+  }
+
+  private get behaviors(): BehaviorSystem | null {
+    return this.run?.behaviors ?? null;
+  }
+
   get isPlaying(): boolean {
     return this.world !== null;
   }
@@ -146,47 +149,26 @@ export class PlaySession {
     // A run starts at second zero, whatever the editor's previews have been counting up to.
     gameClock.reset();
     const runtime = this.state.enterPlay();
-    const world = World.instantiate(runtime, scene.id);
-    this.world = world;
+    const services: RunServices = {
+      audio: soundLibrary,
+      physics,
+      clock: gameClock,
+      saves: saveArea(runtime.id, 'play'),
+    };
+    this.run = GameRun.start(runtime, scene.id, this.input, services);
     this.updates = { structure: 0, values: 0 };
     this.input.attach();
-    this.behaviors = addGameSystems(world, runtime, this.input, {
-      audio: soundLibrary,
-      physics,
-      clock: gameClock,
-      saves: saveArea(runtime.id, 'play'),
-    });
-    this.host.gameView.setWorld(world);
+    this.host.gameView.setWorld(this.run.world);
     this.host.showGame();
     this.state.setNotice(this.playNotice(), 'quiet');
-    if (world.stopRequested) this.stop();
+    if (this.run.world.stopRequested) this.stop();
   }
 
-  /**
-   * Swaps the running scene for another one, inside the same run: the world is torn down and built
-   * again, while what belongs to the run – the clock, the shared variables, the global machines –
-   * carries on. The sounds of the old scene end with it, because the behaviors playing them are
-   * destroyed; a voice that was started detached is nobody's and plays on.
-   */
-  private loadScene(sceneId: string): void {
-    const old = this.world;
-    const runtime = this.state.runtimeProject;
-    if (!old || !runtime) return;
-    const carried = this.behaviors?.shared ?? null;
-    const physics = readyPhysics();
-    old.destroy();
-    const world = World.instantiate(runtime, sceneId);
-    this.world = world;
-    this.behaviors = addGameSystems(world, runtime, this.input, {
-      audio: soundLibrary,
-      carried,
-      physics,
-      clock: gameClock,
-      saves: saveArea(runtime.id, 'play'),
-    });
-    this.host.gameView.setWorld(world);
+  /** A `Load scene` swapped the world (see `GameRun.loadScene`). */
+  private sceneLoaded(run: GameRun): void {
+    this.host.gameView.setWorld(run.world);
     this.state.setNotice(this.playNotice(), 'quiet');
-    if (world.stopRequested) this.stop();
+    if (run.world.stopRequested) this.stop();
   }
 
   private waitForPhysics(): void {
@@ -222,8 +204,7 @@ export class PlaySession {
     soundLibrary.setSuspended(false);
     soundLibrary.stopAll();
     const world = this.world;
-    this.world = null;
-    this.behaviors = null;
+    this.run = null;
     this.input.detach();
     ui().focus.blur();
     world?.destroy();
@@ -240,8 +221,9 @@ export class PlaySession {
    * behaviors that run while paused.
    */
   tick(step: number, awake: number): void {
-    const world = this.world;
-    if (!world) return;
+    const run = this.run;
+    if (!run) return;
+    const world = run.world;
     if (this.state.paused) {
       // Keys and clicks that happen while paused are dropped instead of piling up – otherwise
       // resuming would deliver every one of them in a single frame.
@@ -251,20 +233,19 @@ export class PlaySession {
     }
     const wasPaused = world.paused;
     world.held = this.state.heldObjectIds;
-    world.tick(world.paused ? awake : step);
-    this.input.endFrame();
+    const request = run.tick(step, awake);
     if (world.paused !== wasPaused) this.state.setNotice(this.playNotice(), 'quiet');
-    if (world.stopRequested) {
+    if (request === 'stop') {
       this.stop();
       return;
     }
-    if (world.restartRequested) {
+    if (request === 'restart') {
       this.stop();
       this.play();
       return;
     }
-    if (world.loadSceneRequested) {
-      this.loadScene(world.loadSceneRequested);
+    if (request === 'scene') {
+      this.sceneLoaded(run);
       return;
     }
     // Mirror what the systems did into the runtime copy every frame, even while the panels wait: an

src/editor/ProjectSession.ts

@@ -9,10 +9,13 @@ import {
   SetWhilePlayingCommand,
 } from '../core/commands/projectCommands';
 import { type ProjectStore, StaleRevisionError } from '../core/store/ProjectStore';
+import { releaseUrl, type ReleaseStore } from '../core/store/ReleaseStore';
 import type { SnapshotStore, SnapshotSummary } from '../core/store/SnapshotStore';
 import { Dialog, Menu, type MenuEntry, type Widget } from '../ui';
 import { dialogSlot } from './FormDialog';
 import { OpenProjectDialog } from './OpenProjectDialog';
+import { ReleaseDialog } from './ReleaseDialog';
+import { releaseState, releaseWarnings } from './releases';
 import { ProjectSettingsDialog, settingsChanges } from './ProjectSettingsDialog';
 import { clearSaved, hasSaved } from './saves';
 import { snapshotBlocker, snapshotTime } from './snapshots';
@@ -23,6 +26,7 @@ export class ProjectSession {
   private readonly settingsDialog = dialogSlot<ProjectSettingsDialog>();
   private readonly pickerDialog = dialogSlot<OpenProjectDialog>();
   private readonly snapshotsDialog = dialogSlot<SnapshotsDialog>();
+  private readonly releaseDialog = dialogSlot<ReleaseDialog>();
 
   /**
    * `beforeSwitch` runs before a different project is loaded or the current one is deleted: a
@@ -32,8 +36,11 @@ export class ProjectSession {
     private readonly state: EditorState,
     private readonly store: ProjectStore,
     private readonly beforeSwitch: () => void,
-    /** `flush` writes what the autosave still holds, so a snapshot copies the stand on screen (#231). */
-    private readonly snapshots: { store: SnapshotStore; flush: () => Promise<void> },
+    /**
+     * What the server copies of the project: snapshots (#231) and the release (#266). `flush` writes
+     * what the autosave still holds, so a copy is of the stand on screen.
+     */
+    private readonly copies: { snapshots: SnapshotStore; releases: ReleaseStore; flush: () => Promise<void> },
     /**
      * Runs on the project as it came off the server, before it is read into the model: the plugins
      * this project switches on are loaded there (#119), so that what they register is in place
@@ -102,6 +109,7 @@ export class ProjectSession {
       { label: 'Open project…', onSelect: () => this.openProjectPicker() },
       { separator: true },
       { label: 'Snapshots…', onSelect: () => this.openSnapshots() },
+      { label: 'Release…', onSelect: () => this.openRelease() },
       { label: 'Project settings…', onSelect: () => this.openProjectSettings() },
       { label: 'Clear saved data', onSelect: () => this.clearSavedData() },
       ...more,
@@ -154,7 +162,7 @@ export class ProjectSession {
     const projectId = this.state.project.id;
     void this.run(
       (async () => {
-        const list = await this.snapshots.store.list(projectId);
+        const list = await this.copies.snapshots.list(projectId);
         this.snapshotsDialog.open(
           new SnapshotsDialog(list, {
             onCreate: (name) => void this.run(this.createSnapshot(projectId, name)),
@@ -171,14 +179,80 @@ export class ProjectSession {
     return this.snapshotsDialog.current();
   }
 
+  /** The link that plays only the game (#266). */
+  openRelease(): void {
+    const projectId = this.state.project.id;
+    void this.run(
+      (async () => {
+        const release = await this.copies.releases.of(projectId);
+        const link = release && releaseUrl(location.origin, release.token);
+        this.releaseDialog.open(
+          new ReleaseDialog(
+            release,
+            link,
+            releaseState(release, this.state.revision),
+            releaseWarnings(this.state.project),
+            {
+              onPublish: () => void this.run(this.publish(projectId, release !== null)),
+              onTakeDown: () => this.confirmTakeDown(projectId),
+              onCopy: (url) => void this.run(this.copyLink(url)),
+              onOpen: (url) => window.open(url, '_blank', 'noopener'),
+            },
+          ),
+        );
+      })(),
+    );
+  }
+
+  /** The open release dialog, for the check scripts. */
+  releaseView(): ReleaseDialog | null {
+    return this.releaseDialog.current();
+  }
+
+  /** Publishing copies what the server has stored, so everything on screen is saved first. */
+  private async publish(projectId: string, again: boolean): Promise<void> {
+    await this.copies.flush();
+    const blocker = snapshotBlocker(this.state.saveStatus, 'release');
+    if (blocker) {
+      this.state.setNotice(blocker, 'error');
+      return;
+    }
+    await this.copies.releases.publish(projectId);
+    this.state.setNotice(again ? 'Release updated' : 'Released – the link plays the game');
+    this.openRelease();
+  }
+
+  private confirmTakeDown(projectId: string): void {
+    new Dialog('Take the release down?', 'The link stops working. Publishing again makes a new one.', [
+      { label: 'Cancel', onClick: () => this.openRelease() },
+      {
+        label: 'Take down',
+        danger: true,
+        onClick: () =>
+          void this.run(
+            (async () => {
+              await this.copies.releases.takeDown(projectId);
+              this.state.setNotice('Release taken down');
+              this.openRelease();
+            })(),
+          ),
+      },
+    ]).openCentered();
+  }
+
+  private async copyLink(url: string): Promise<void> {
+    await navigator.clipboard.writeText(url);
+    this.state.setNotice('Link copied');
+  }
+
   private async createSnapshot(projectId: string, name: string): Promise<void> {
-    await this.snapshots.flush();
+    await this.copies.flush();
     const blocker = snapshotBlocker(this.state.saveStatus);
     if (blocker) {
       this.state.setNotice(blocker, 'error');
       return;
     }
-    const made = await this.snapshots.store.create(projectId, name || snapshotTime(new Date()));
+    const made = await this.copies.snapshots.create(projectId, name || snapshotTime(new Date()));
     this.state.setNotice(`Snapshot "${made.name}" created`);
     this.openSnapshots();
   }
@@ -201,14 +275,14 @@ export class ProjectSession {
   /** Writes the snapshot back on the server, then loads the project again: the undo history starts over. */
   private async restoreSnapshot(projectId: string, snapshot: SnapshotSummary): Promise<void> {
     this.beforeSwitch();
-    await this.snapshots.flush();
+    await this.copies.flush();
     const blocker = snapshotBlocker(this.state.saveStatus);
     if (blocker) {
       this.state.setNotice(blocker, 'error');
       return;
     }
     try {
-      const { before } = await this.snapshots.store.restore(projectId, snapshot.id, this.state.revision);
+      const { before } = await this.copies.snapshots.restore(projectId, snapshot.id, this.state.revision);
       await this.open(projectId);
       this.state.setNotice(`Restored "${snapshot.name}" – the previous stand is kept as "${before.name}"`);
     } catch (error) {
@@ -227,7 +301,7 @@ export class ProjectSession {
         onClick: () =>
           void this.run(
             (async () => {
-              await this.snapshots.store.delete(projectId, snapshot.id);
+              await this.copies.snapshots.delete(projectId, snapshot.id);
               this.openSnapshots();
             })(),
           ),

src/editor/ReleaseDialog.ts

@@ -0,0 +1,58 @@
+import type { ReleaseSummary } from '../core/store/ReleaseStore';
+import { Button, HStack, Label, Popup, TextField, Theme } from '../ui';
+import { dialogButtons } from './FormDialog';
+
+const LINK_WIDTH = 420;
+
+/**
+ * "Release…" (#266): the link that plays only the game, with Copy and Open, and Publish – or Update
+ * release and Take down once there is one. Every action closes the dialog and hands the choice on;
+ * the caller opens it again on the new state.
+ */
+export class ReleaseDialog extends Popup {
+  private readonly linkField: TextField | null = null;
+  private readonly shown: { state: string; warnings: string[] };
+
+  constructor(
+    release: ReleaseSummary | null,
+    link: string | null,
+    state: string,
+    warnings: readonly string[],
+    actions: {
+      onPublish(): void;
+      onTakeDown(): void;
+      onCopy(link: string): void;
+      onOpen(link: string): void;
+    },
+  ) {
+    super({ modal: true, padding: Theme.padding * 2, gap: Theme.gap });
+    this.minWidth = LINK_WIDTH;
+    this.shown = { state, warnings: [...warnings] };
+    this.content.add(new Label('Release', { style: 'bodyBold' }));
+    this.content.add(new Label(state, { style: 'muted' }));
+
+    if (link) {
+      this.linkField = new TextField(link, { readOnly: true, width: LINK_WIDTH });
+      const row = new HStack({ gap: Theme.gap, align: 'center' });
+      row.add(this.linkField, 1);
+      row.add(new Button('Copy link', { onClick: () => actions.onCopy(link) }));
+      row.add(new Button('Open', { onClick: () => actions.onOpen(link) }));
+      this.content.add(row);
+    }
+    for (const warning of warnings) this.content.add(new Label(warning, { style: 'warning' }));
+
+    const publish = new Button(release ? 'Update release' : 'Publish', {
+      variant: 'primary',
+      onClick: this.closeThen(() => actions.onPublish()),
+    });
+    const takeDown = release
+      ? new Button('Take down', { variant: 'danger', onClick: this.closeThen(() => actions.onTakeDown()) })
+      : undefined;
+    this.content.add(dialogButtons(this.closeThen(), publish, takeDown));
+  }
+
+  /** The link as shown – null while there is none – the state line and the warnings (test hook). */
+  info(): { link: string | null; state: string; warnings: string[] } {
+    return { link: this.linkField?.value ?? null, ...this.shown, warnings: [...this.shown.warnings] };
+  }
+}

src/editor/animation/PreviewCanvas.ts

@@ -6,7 +6,7 @@ import type { EditorState } from '../state';
 import { Theme } from '../../ui';
 import { collectHolderItems } from '../../viewport/items';
 import { FreeViewport } from '../viewport/FreeViewport';
-import type { Frame } from '../viewport/WorldViewport';
+import type { Frame } from '../../viewport/WorldViewport';
 
 /**
  * The picture above the timeline (#99): the animation's root with every row's value at the

src/editor/debug/renderHooks.ts

@@ -1,24 +1,16 @@
 import { type FrameRect, isTextureFile, resolvePicture } from '../../core/model/texture';
 import { effectiveScale, gameClock } from '../../core/time';
-import { afterFrames, isRendering, renderCount, requestRender } from '../../ui';
+import { afterFrames, isRendering, renderCount, requestRender, stagePixel } from '../../ui';
 import { particleLibrary } from '../../viewport/ParticleLibrary';
 import { shaderLibrary } from '../../viewport/ShaderLibrary';
 import { textureLibrary } from '../../viewport/TextureLibrary';
-import { type Container, Mesh, Rectangle } from 'pixi.js';
+import { type Container, Mesh } from 'pixi.js';
 import type { HookContext } from './hookHelpers';
 
 /** What was really drawn, and the clocks behind it: pixels, textures, frames, shaders and particles. */
 export function renderHooks({ app, state, editor }: HookContext) {
   const { viewport, gameView } = editor;
-  /** The colour actually on screen at a point, as `#rrggbb` – what was drawn, not what the model says. */
-  const pixelAt = (x: number, y: number): string => {
-    const { pixels } = app.renderer.extract.pixels({
-      target: app.stage,
-      frame: new Rectangle(x, y, 1, 1),
-    });
-    const hex = (value: number | undefined) => (value ?? 0).toString(16).padStart(2, '0');
-    return `#${hex(pixels[0])}${hex(pixels[1])}${hex(pixels[2])}`;
-  };
+  const pixelAt = (x: number, y: number): string => stagePixel(app, x, y);
   return {
     pixelAt,
     /**

src/editor/debug/uiHooks.ts

@@ -255,6 +255,8 @@ export function uiHooks({ app, state, editor }: HookContext) {
       const dialog = editor.snapshotsDialog();
       return dialog ? { ...dialog.info(), nameAt: centreOf(dialog.nameControl) } : null;
     },
+    /** The "Release" dialog (#266): the link, the state line and the warnings. */
+    release: () => editor.releaseDialog()?.info() ?? null,
     /** The dividers left and right of the centre column – dragging them narrows the tab row. */
     panelSplitters: () => ({ left: centreOf(editor.leftSplitter), right: centreOf(editor.rightSplitter) }),
     /** The left column: asset panel on top, scene objects below, and the divider between them. */

src/editor/releases.ts

@@ -0,0 +1,24 @@
+import { type Project, startScene } from '../core/model/Project';
+import type { ReleaseSummary } from '../core/store/ReleaseStore';
+import { snapshotTime } from './snapshots';
+
+/** What the release dialog warns about (#266): what a player would miss, before it is published. */
+export function releaseWarnings(project: Project): string[] {
+  const warnings: string[] = [];
+  if (!startScene(project)) warnings.push('The project has no scene, so there is nothing to play.');
+  if (project.plugins.length > 0)
+    warnings.push('Plugins are not loaded in a released game. Behaviors that need them will not work.');
+  return warnings;
+}
+
+/**
+ * The line under the dialog's title: not released, or when the copy was taken and whether the saved
+ * project has moved on since. `revision` is the saved one, which is what publishing copies.
+ */
+export function releaseState(release: ReleaseSummary | null, revision: number): string {
+  if (!release) return 'Not released. Publishing makes a link that plays only the game.';
+  const when = `Released ${snapshotTime(new Date(release.publishedAt))}`;
+  return release.revision === revision
+    ? `${when} · the link plays the project as saved`
+    : `${when} · the project has changed since`;
+}

src/editor/saves.ts

@@ -1,14 +1,16 @@
 /**
  * The saves of persistent Variables assets (#166), kept in this browser per project. Played and
  * editor runs write to separate areas, so trying a behavior in the editor leaves the player's save
- * alone. Storage is best effort: a browser that refuses `localStorage` plays every run from the
+ * alone. A released game keeps its own, under the token of its link. Storage is best effort: a browser that refuses `localStorage` plays every run from the
  * declared values.
  */
 import type { SaveArea, SavedValues } from '../core/graph';
 import type { PropertyBag } from '../core/model/Properties';
 
-export type SaveAreaName = 'play' | 'editor';
+/** `release` is a released game's (#266), kept per link rather than per project. */
+export type SaveAreaName = 'play' | 'editor' | 'release';
 
+/** The areas a project's own saves are kept in – what the editor shows and clears. */
 const AREAS: readonly SaveAreaName[] = ['play', 'editor'];
 
 type Store = Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>;

src/editor/snapshots.ts

@@ -9,16 +9,19 @@ export function snapshotTime(at: Date): string {
 /**
  * Why a snapshot cannot be made or restored right now, or null when it can (#231). The server copies
  * what it has stored, so the editor has to have saved everything first: a snapshot without the
- * last edits would be a stand nobody ever saw.
+ * last edits would be a stand nobody ever saw. A release is a copy as well (#266) and asks the same.
  */
-export function snapshotBlocker(status: SaveStatus): string | null {
+export function snapshotBlocker(
+  status: SaveStatus,
+  copy: 'snapshot' | 'release' = 'snapshot',
+): string | null {
   switch (status) {
     case 'saved':
       return null;
     case 'conflict':
       return 'This project was changed elsewhere. Reload to continue.';
     case 'error':
-      return 'The project could not be saved, so there is nothing current to take a snapshot of';
+      return `The project could not be saved, so there is nothing current to ${copy === 'release' ? 'release' : 'take a snapshot of'}`;
     default:
       return 'The latest changes are not saved yet – stop the game or wait a moment';
   }

src/editor/viewport/FreeViewport.ts

@@ -12,7 +12,7 @@ import {
   wheelSteps,
   zoomStepBelow,
 } from '../../viewport/view';
-import { WorldViewport } from './WorldViewport';
+import { WorldViewport } from '../../viewport/WorldViewport';
 
 /** Breathing room left around the content by `fit()`, in screen pixels. */
 const FIT_MARGIN = 40;
@@ -22,7 +22,7 @@ const FIT_MARGIN = 40;
  * preview: the wheel zooms about the pointer, a pan drags the world along, `fit()` frames the content.
  * The zoom only takes whole steps in device pixels (`FREE_ZOOM_STEPS`), so pixel art stays even.
  */
-export abstract class FreeViewport extends WorldViewport {
+export abstract class FreeViewport extends WorldViewport<EditorState> {
   /** World point at the viewport centre, and zoom in device pixels per world unit. */
   protected view = { x: 0, y: 0, zoom: 1 };
   private panning: { startX: number; startY: number; viewX: number; viewY: number } | null = null;

src/editor/viewport/GameViewport.ts

@@ -2,30 +2,18 @@
  * The scene seen through its active camera at the chosen scale, letterboxed: the running world while
  * playing, the model as a still preview otherwise.
  */
-import {
-  type FederatedMouseEvent,
-  type FederatedPointerEvent,
-  type FederatedWheelEvent,
-  Text,
-} from 'pixi.js';
+import { Text } from 'pixi.js';
 import { isSymbolType } from '../../core/model/AssetTypes';
 import type { EditorState } from '../state';
 import type { World } from '../../runtime/World';
 import { Theme, textStyle, ui } from '../../ui';
 import { type ActiveCamera, cameraOfItems, cameraOfWorld } from '../../viewport/activeCamera';
 import { collectHolderItems, collectWorldItems } from '../../viewport/items';
-import {
-  cameraFactor,
-  cameraView,
-  type GameScale,
-  isInside,
-  screenToWorld,
-  type View,
-  wheelNotches,
-} from '../../viewport/view';
-import { type Frame, WorldViewport } from './WorldViewport';
+import { routePointer } from '../../viewport/gamePointer';
+import { cameraFactor, cameraView, type GameScale, type View } from '../../viewport/view';
+import { type Frame, WorldViewport } from '../../viewport/WorldViewport';
 
-export class GameViewport extends WorldViewport {
+export class GameViewport extends WorldViewport<EditorState> {
   private readonly hint = new Text({ text: 'No active camera', style: textStyle('muted') });
   private readonly editorRunCaption = new Text({
     text: 'Behaviors run here · keys and clicks go to the game',
@@ -46,19 +34,11 @@ export class GameViewport extends WorldViewport {
     this.addChild(this.hint);
     this.editorRunCaption.eventMode = 'none';
     this.addChild(this.editorRunCaption);
-
-    this.on('pointerdown', (e: FederatedPointerEvent) => {
-      if (e.button !== 0) return;
-      this.reportPointer(e);
-      this.pointerWorld()?.setPointerDown(true);
-    });
-    this.on('globalpointermove', (e: FederatedPointerEvent) => this.reportPointer(e));
-    this.on('pointerup', () => this.pointerWorld()?.setPointerDown(false));
-    this.on('pointerupoutside', () => this.pointerWorld()?.setPointerDown(false));
-    this.on('wheel', (e: FederatedWheelEvent) => {
-      this.reportPointer(e);
-      this.pointerWorld()?.turnWheel(wheelNotches(e.deltaY, e.deltaMode));
-    });
+    routePointer(
+      this,
+      () => this.pointerWorld(),
+      () => this.currentView(),
+    );
   }
 
   /** null = not playing. */
@@ -155,14 +135,4 @@ export class GameViewport extends WorldViewport {
     this.editorRunCaption.visible = this.editorWorld !== null && !this.playWorld;
     this.editorRunCaption.position.set(8, 6);
   }
-
-  /** Outside the camera frame counts as "not in view": that region is letterbox, not game. */
-  private reportPointer(e: FederatedMouseEvent): void {
-    const world = this.pointerWorld();
-    const view = this.currentView();
-    if (!world || !view) return;
-    const local = this.toLocal(e.global);
-    const point = screenToWorld(view, local.x, local.y);
-    world.movePointer(point.x, point.y, isInside(view, local.x, local.y));
-  }
 }

src/editor/viewport/SceneViewport.ts

@@ -49,7 +49,7 @@ import { SizeGizmoEditor, type SizeGizmoInfo } from './sizeGizmoEditor';
 import { MIN_GRID_STEP, SCENE_GRID_STEP, type SceneViewHost } from './sceneViewHost';
 import { type PaintTarget, TilemapPainter } from './tilemapPainting';
 import { TilemapSolidOutlines } from './tilemapSolids';
-import type { Frame } from './WorldViewport';
+import type { Frame } from '../../viewport/WorldViewport';
 
 /** Pixels of travel before a press turns into a drag. */
 const MARQUEE_THRESHOLD = 3;

src/main.ts

@@ -1,62 +1,20 @@
-import { Application, Container } from 'pixi.js';
 // Static imports on purpose: Pixi registers render pipes (graphics, text, sprite) as a
 // module side effect, and a renderer only knows the pipes that exist when it is created.
 // Lazy chunks loaded after `app.init()` would therefore fail with "unknown render pipe".
 import { captureConsole } from './editor/console/log';
 import { startEditor } from './editor/App';
 import { mountPlayground } from './playground';
-import { initRenderLoop, initUI, loadEditorFonts, Theme, VStack } from './ui';
+import { createPage, showFailure } from './page';
 
 // Before anything else: a renderer warns while it is being created, and those warnings are
 // exactly the ones worth having in the panel.
 captureConsole();
 
-// `desynchronized` bypasses the compositor queue (headless click-to-paint 72 → 16 ms) but may
-// tear; `?vsync` opts out. Pixi has no option for it, hence our own context.
-function lowLatencyContext(): { canvas?: HTMLCanvasElement; context?: WebGL2RenderingContext } {
-  const canvas = document.createElement('canvas');
-  const context = canvas.getContext('webgl2', {
-    alpha: false,
-    antialias: true,
-    premultipliedAlpha: true,
-    stencil: true,
-    desynchronized: true,
-  });
-  return context ? { canvas, context } : {};
-}
-
 async function main(): Promise<void> {
   const params = new URLSearchParams(location.search);
-  const fonts = loadEditorFonts();
-  const app = new Application();
-  await app.init({
-    resizeTo: window,
-    background: Theme.colors.background,
-    antialias: true,
-    resolution: Math.min(2, window.devicePixelRatio || 1),
-    autoDensity: true,
-    preference: 'webgl',
-    ...(params.has('vsync') ? {} : lowLatencyContext()),
-  });
-  document.body.appendChild(app.canvas);
-  await fonts;
-
-  const root = new VStack();
-  const overlay = new Container();
-  app.stage.addChild(root, overlay);
-  app.stage.eventMode = 'static';
-  app.stage.hitArea = app.screen;
-  initUI(app, root, overlay);
-  // From here on the picture is drawn when something changes, not sixty times a second.
-  initRenderLoop(app);
-
+  const { app, root } = await createPage(params);
   if (params.has('playground')) mountPlayground(app, root);
   else await startEditor(app, root);
-
-  app.renderer.on('resize', () => {
-    app.stage.hitArea = app.screen;
-    root.resize(app.screen.width, app.screen.height);
-  });
 }
 
 window.addEventListener('error', (event) => {
@@ -64,7 +22,4 @@ window.addEventListener('error', (event) => {
   console.error('[uncaught]', error instanceof Error ? error.stack : event.message);
 });
 
-main().catch((error) => {
-  console.error(error);
-  document.body.innerHTML = `<pre style="color:#e0553f;padding:16px;font:13px monospace">${String(error)}</pre>`;
-});
+main().catch(showFailure);

src/page.ts

@@ -0,0 +1,56 @@
+import { Application, Container } from 'pixi.js';
+import { initRenderLoop, initUI, loadEditorFonts, Theme, VStack } from './ui';
+
+// `desynchronized` bypasses the compositor queue (headless click-to-paint 72 → 16 ms) but may
+// tear; `?vsync` opts out. Pixi has no option for it, hence our own context.
+function lowLatencyContext(): { canvas?: HTMLCanvasElement; context?: WebGL2RenderingContext } {
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('webgl2', {
+    alpha: false,
+    antialias: true,
+    premultipliedAlpha: true,
+    stencil: true,
+    desynchronized: true,
+  });
+  return context ? { canvas, context } : {};
+}
+
+/**
+ * The one canvas a page is: the editor's and a released game's alike (#266). `root` fills the
+ * window and follows it when it is resized.
+ */
+export async function createPage(params: URLSearchParams): Promise<{ app: Application; root: VStack }> {
+  const fonts = loadEditorFonts();
+  const app = new Application();
+  await app.init({
+    resizeTo: window,
+    background: Theme.colors.background,
+    antialias: true,
+    resolution: Math.min(2, window.devicePixelRatio || 1),
+    autoDensity: true,
+    preference: 'webgl',
+    ...(params.has('vsync') ? {} : lowLatencyContext()),
+  });
+  document.body.appendChild(app.canvas);
+  await fonts;
+
+  const root = new VStack();
+  const overlay = new Container();
+  app.stage.addChild(root, overlay);
+  app.stage.eventMode = 'static';
+  app.stage.hitArea = app.screen;
+  initUI(app, root, overlay);
+  // From here on the picture is drawn when something changes, not sixty times a second.
+  initRenderLoop(app);
+
+  app.renderer.on('resize', () => {
+    app.stage.hitArea = app.screen;
+    root.resize(app.screen.width, app.screen.height);
+  });
+  return { app, root };
+}
+
+export function showFailure(error: unknown): void {
+  console.error(error);
+  document.body.innerHTML = `<pre style="color:#e0553f;padding:16px;font:13px monospace">${String(error)}</pre>`;
+}

src/play.ts

@@ -0,0 +1,65 @@
+// The page of a released game (#266): the game view and nothing else, no editor and no sign-in.
+// Static imports for the same reason as in `main.ts`: Pixi only knows the render pipes that exist
+// when the renderer is created.
+import type { Ticker } from 'pixi.js';
+import { deserializeProject } from './core/store/serialize';
+import { loadReleasedGame } from './core/store/HttpReleaseStore';
+import { releaseToken } from './core/store/ReleaseStore';
+import { saveArea } from './editor/saves';
+import { createPage, showFailure } from './page';
+import { GameScreen } from './player/GameScreen';
+import { installPlayerHook } from './player/playerHook';
+import { Player } from './player/Player';
+import { ui } from './ui';
+import { projectPictureFactory } from './viewport/generatedPictures';
+import { preloadProjectFiles, setUpProjectFiles } from './viewport/projectFiles';
+import { textureLibrary } from './viewport/TextureLibrary';
+import { createEmptyProject } from './core/model/Project';
+
+const API_ENDPOINT = '/game-maker/api/index.php';
+
+async function main(): Promise<void> {
+  const params = new URLSearchParams(location.search);
+  const { app, root } = await createPage(params);
+  // Every key belongs to the game, Tab included: there is nothing else on the page to move to.
+  ui().focus.tabBelongsElsewhere = () => true;
+  setUpProjectFiles(app.renderer);
+
+  const source = { project: createEmptyProject('', ''), on: () => {} };
+  const screen = new GameScreen(source);
+  root.add(screen, 1);
+  root.resize(app.screen.width, app.screen.height);
+  let player: Player | null = null;
+  installPlayerHook(screen, () => player);
+
+  const token = releaseToken(location.search);
+  if (!token) {
+    screen.say('This link does not lead to a game.');
+    return;
+  }
+  screen.say('Loading…');
+  let game;
+  try {
+    game = await loadReleasedGame(API_ENDPOINT, token);
+  } catch (error) {
+    console.error('[release]', error);
+    screen.say('This game is not available.');
+    return;
+  }
+  const project = deserializeProject(game.project, token);
+  source.project = project;
+  document.title = project.name || 'Game';
+  textureLibrary.setPictureFactory(projectPictureFactory(() => project));
+  preloadProjectFiles(project);
+
+  const loaded = new Player(project, screen, saveArea(token, 'release'));
+  player = loaded;
+  app.ticker.add((ticker: Ticker) => loaded.tick(ticker.deltaMS / 1000));
+  // A key starts the game as well as a click does: both count as the gesture sound waits for.
+  window.addEventListener('keydown', (e) => {
+    if ((e.key === 'Enter' || e.key === ' ') && screen.canStart) loaded.start();
+  });
+  await loaded.prepare();
+}
+
+main().catch(showFailure);

src/player/GameScreen.ts

@@ -0,0 +1,95 @@
+import { Text } from 'pixi.js';
+import type { World } from '../runtime/World';
+import { Theme, textStyle, ui } from '../ui';
+import { cameraOfWorld } from '../viewport/activeCamera';
+import { routePointer } from '../viewport/gamePointer';
+import { collectWorldItems } from '../viewport/items';
+import { cameraView, type View } from '../viewport/view';
+import { type Frame, type ViewSource, WorldViewport } from '../viewport/WorldViewport';
+
+/**
+ * A released game on screen (#266): the running world through its active camera, at the largest
+ * zoom step that fits (Auto), letterboxed in the page colour. Before the game runs, and after it
+ * stopped itself, it shows a line of text instead – "Click to play", or why there is nothing to play.
+ */
+export class GameScreen extends WorldViewport {
+  private readonly caption = new Text({ text: '', style: textStyle('title') });
+  private readonly hint = new Text({ text: 'No active camera', style: textStyle('muted') });
+  private running: World | null = null;
+  /** Asked when the caption is clicked while it offers to start. */
+  onStart: (() => void) | null = null;
+  private startable = false;
+
+  constructor(source: ViewSource) {
+    super(source);
+    for (const text of [this.caption, this.hint]) {
+      text.eventMode = 'none';
+      text.anchor.set(0.5);
+      this.addChild(text);
+    }
+    routePointer(
+      this,
+      () => this.running,
+      () => this.currentView(),
+    );
+    this.on('pointerdown', (e) => {
+      if (e.button === 0 && !this.running && this.startable) this.onStart?.();
+    });
+  }
+
+  /** What the screen says while no game runs; `startable` makes a click on it start one. */
+  say(text: string, startable = false): void {
+    this.caption.text = text;
+    this.startable = startable;
+    this.cursor = startable ? 'pointer' : 'default';
+    this.redraw();
+  }
+
+  get canStart(): boolean {
+    return this.startable && !this.running;
+  }
+
+  /** null = not running. */
+  setWorld(world: World | null): void {
+    this.running = world;
+    this.redraw();
+  }
+
+  /**
+   * What the screen shows, for the check scripts: the caption while no game runs, and the camera's
+   * picture as it lies on screen – world units per CSS pixel and the frame in global CSS pixels.
+   */
+  info(): {
+    caption: string | null;
+    scale: number | null;
+    frame: { x: number; y: number; w: number; h: number } | null;
+  } {
+    const view = this.currentView();
+    const origin = this.getGlobalPosition();
+    return {
+      caption: this.running ? null : this.caption.text,
+      scale: view?.scale ?? null,
+      frame: view ? { ...view.rect, x: origin.x + view.rect.x, y: origin.y + view.rect.y } : null,
+    };
+  }
+
+  protected override currentView(): View | null {
+    const camera = this.running ? cameraOfWorld(this.running) : null;
+    return camera ? cameraView(camera, this.w, this.h, 'auto', ui().app.renderer.resolution) : null;
+  }
+
+  protected override collectFrame(): Frame {
+    return this.running ? collectWorldItems(this.running) : { items: [], background: this.baseColor };
+  }
+
+  protected override get baseColor(): number {
+    return Theme.colors.background;
+  }
+
+  protected override beforeItems(view: View | null): void {
+    this.caption.visible = this.running === null;
+    this.caption.position.set(this.w / 2, this.h / 2);
+    this.hint.visible = this.running !== null && view === null;
+    this.hint.position.set(this.w / 2, this.h / 2);
+  }
+}

src/player/Player.ts

@@ -0,0 +1,95 @@
+import type { SaveArea } from '../core/graph/savedValues';
+import { type Project, startScene } from '../core/model/Project';
+import { gameClock, timeStep } from '../core/time';
+import { GameRun } from '../runtime/GameRun';
+import { loadPhysics, readyPhysics } from '../runtime/physics/engine';
+import { behaviorError } from '../runtime/systems/BehaviorSystem';
+import { Input } from '../runtime/systems/Input';
+import { requestRender } from '../ui';
+import { soundLibrary } from '../viewport/SoundLibrary';
+import type { GameScreen } from './GameScreen';
+
+/**
+ * Plays a released game (#266): from the project's start scene, on a click, until the game stops
+ * itself – then the screen offers to play again. What the editor's Play adds on top (panels, pause
+ * from a toolbar, the scene the editor has open) has no place here.
+ */
+export class Player {
+  private run: GameRun | null = null;
+  private readonly input = new Input();
+
+  constructor(
+    private readonly project: Project,
+    private readonly screen: GameScreen,
+    private readonly saves: SaveArea,
+  ) {
+    screen.onStart = () => this.start();
+  }
+
+  get isRunning(): boolean {
+    return this.run !== null;
+  }
+
+  /** What `Log` wrote this run, oldest first; empty while none runs. */
+  log(): string[] {
+    return [...(this.run?.world.log ?? [])];
+  }
+
+  /** Loads what a run needs, then offers to start one. */
+  async prepare(): Promise<void> {
+    if (!startScene(this.project)) {
+      this.screen.say('This game has no scene to play.');
+      return;
+    }
+    this.screen.say('Loading…');
+    await loadPhysics();
+    this.screen.say('Click to play', true);
+  }
+
+  start(): void {
+    const scene = startScene(this.project);
+    const physics = readyPhysics();
+    if (this.run || !scene || !physics) return;
+    gameClock.reset();
+    this.run = GameRun.start(this.project, scene.id, this.input, {
+      audio: soundLibrary,
+      physics,
+      clock: gameClock,
+      saves: this.saves,
+    });
+    this.input.attach();
+    this.screen.setWorld(this.run.world);
+    if (this.run.world.stopRequested) this.stop();
+  }
+
+  stop(): void {
+    const run = this.run;
+    if (!run) return;
+    this.run = null;
+    this.input.detach();
+    soundLibrary.stopAll();
+    gameClock.reset();
+    const error = behaviorError(run.world);
+    if (error) console.error('[game]', error);
+    run.world.destroy();
+    this.screen.setWorld(null);
+    this.screen.say('Click to play again', true);
+  }
+
+  tick(dt: number): void {
+    const run = this.run;
+    if (!run) return;
+    const step = gameClock.advance(dt, run.world.paused);
+    const request = run.tick(step, timeStep(dt, gameClock.scale, false));
+    if (request === 'stop') this.stop();
+    else if (request === 'restart') {
+      this.stop();
+      this.start();
+    } else if (request === 'scene') {
+      this.screen.setWorld(run.world);
+      if (run.world.stopRequested) this.stop();
+    }
+    if (this.run) this.screen.redraw();
+    requestRender();
+  }
+}

src/player/playerHook.ts

@@ -0,0 +1,17 @@
+import { stagePixel, ui } from '../ui';
+import type { GameScreen } from './GameScreen';
+import type { Player } from './Player';
+
+/**
+ * `window.__gameMakerPlay`: what the check scripts read off a released game (#266). The editor's
+ * `__gm` is not on this page, and neither is anything it would have to reach into. Installed before
+ * the game is loaded, so a link that leads nowhere can be read as well: `player` is null until then.
+ */
+export function installPlayerHook(screen: GameScreen, player: () => Player | null): void {
+  (window as unknown as { __gameMakerPlay: unknown }).__gameMakerPlay = {
+    running: () => player()?.isRunning ?? false,
+    screen: () => screen.info(),
+    log: () => player()?.log() ?? [],
+    pixelAt: (x: number, y: number) => stagePixel(ui().app, x, y),
+  };
+}

src/runtime/GameRun.ts

@@ -0,0 +1,62 @@
+/**
+ * One run of a game: the world of the scene it is in and the systems that play it. Shared by the
+ * editor's Play and a released game (#266), so both build, swap and end a scene the same way.
+ */
+import type { SaveArea } from '../core/graph/savedValues';
+import type { Project } from '../core/model/Project';
+import type { AudioSink } from './systems/Audio';
+import { addGameSystems, type BehaviorSystem, type TimeScaled } from './systems/BehaviorSystem';
+import type { Input } from './systems/Input';
+import type { Rapier } from './physics/engine';
+import { World } from './World';
+
+export interface RunServices {
+  audio: AudioSink;
+  physics: Rapier;
+  clock: TimeScaled;
+  saves: SaveArea;
+}
+
+export class GameRun {
+  private constructor(
+    private readonly project: Project,
+    private readonly input: Input,
+    private readonly services: RunServices,
+    public world: World,
+    public behaviors: BehaviorSystem,
+  ) {}
+
+  static start(project: Project, sceneId: string, input: Input, services: RunServices): GameRun {
+    const world = World.instantiate(project, sceneId);
+    return new GameRun(project, input, services, world, addGameSystems(world, project, input, services));
+  }
+
+  /**
+   * One frame. `awake` is the step the clock would have moved without the game's own pause, which
+   * stops the clock but not the behaviors that run while paused. A `Load scene` is carried out here;
+   * stopping and restarting are the host's business, so they are only reported.
+   */
+  tick(step: number, awake: number): 'stop' | 'restart' | 'scene' | null {
+    const world = this.world;
+    world.tick(world.paused ? awake : step);
+    this.input.endFrame();
+    if (world.stopRequested) return 'stop';
+    if (world.restartRequested) return 'restart';
+    if (!world.loadSceneRequested) return null;
+    this.loadScene(world.loadSceneRequested);
+    return 'scene';
+  }
+
+  /**
+   * Swaps the running scene for another one, inside the same run: the world is torn down and built
+   * again, while what belongs to the run – the clock, the shared variables, the global machines –
+   * carries on. The sounds of the old scene end with it, because the behaviors playing them are
+   * destroyed; a voice that was started detached is nobody's and plays on.
+   */
+  loadScene(sceneId: string): void {
+    const carried = this.behaviors.shared;
+    this.world.destroy();
+    this.world = World.instantiate(this.project, sceneId);
+    this.behaviors = addGameSystems(this.world, this.project, this.input, { ...this.services, carried });
+  }
+}

src/ui/index.ts

@@ -12,6 +12,7 @@ export {
   renderCount,
   requestRender,
   resetRenderLoop,
+  stagePixel,
 } from './render';
 export {
   drawBand,

src/ui/render.ts

@@ -1,4 +1,4 @@
-import { type Application, UPDATE_PRIORITY } from 'pixi.js';
+import { type Application, Rectangle, UPDATE_PRIORITY } from 'pixi.js';
 
 /**
  * Drives the renderer from changes instead of from the clock.
@@ -128,3 +128,10 @@ export function resetRenderLoop(): void {
   frameWaiters = [];
   frameWork = new Map();
 }
+
+/** The colour actually on screen at a point, as `#rrggbb` – what was drawn, not what the model says. */
+export function stagePixel(app: Application, x: number, y: number): string {
+  const { pixels } = app.renderer.extract.pixels({ target: app.stage, frame: new Rectangle(x, y, 1, 1) });
+  const hex = (value: number | undefined) => (value ?? 0).toString(16).padStart(2, '0');
+  return `#${hex(pixels[0])}${hex(pixels[1])}${hex(pixels[2])}`;
+}

src/viewport/WorldViewport.ts

@@ -1,37 +1,46 @@
 import { Container, type FederatedPointerEvent, Graphics, type Mesh, Texture } from 'pixi.js';
-import { isSymbolType } from '../../core/model/AssetTypes';
-import { type Extent, scaleOf } from '../../core/model/matrix';
-import type { Vec2 } from '../../core/model/Properties';
-import { footprintExtent, footprintOf, placementOf } from '../../core/properties/bounds';
-import { rectsIntersect } from '../../core/properties/camera';
-import type { ClipRegion } from '../../core/properties/clip';
-import type { EditorState } from '../state';
-import { type Size, Widget } from '../../ui';
-import { fontLibrary } from '../../viewport/FontLibrary';
-import { drawSlots } from '../../viewport/drawOrder';
-import type { DrawItem } from '../../viewport/items';
-import { hashId } from '../../core/particles/nodes';
-import { ParticleField } from '../../viewport/particles';
-import { particleLibrary } from '../../viewport/ParticleLibrary';
-import { SHEET_EDGE } from '../../core/shader/nodes';
-import { shaderLibrary } from '../../viewport/ShaderLibrary';
-import { type ShaderSource, wornShader } from '../../viewport/shaders';
-import { disposeSpriteMesh, drawItem, newSpriteMesh, syncSpriteMesh } from '../../viewport/symbols';
-import { TextPicture } from '../../viewport/textPicture';
-import { cellCentre, type LayerFocus, TilemapField } from '../../viewport/tilemap';
-import { textureLibrary } from '../../viewport/TextureLibrary';
-import { gameClock } from '../../core/time';
-import { type View, worldBounds, worldToScreen } from '../../viewport/view';
+import { isSymbolType } from '../core/model/AssetTypes';
+import { type Extent, scaleOf } from '../core/model/matrix';
+import type { Vec2 } from '../core/model/Properties';
+import { footprintExtent, footprintOf, placementOf } from '../core/properties/bounds';
+import { rectsIntersect } from '../core/properties/camera';
+import type { ClipRegion } from '../core/properties/clip';
+import type { Project } from '../core/model/Project';
+import { type Size, Widget } from '../ui';
+import { fontLibrary } from './FontLibrary';
+import { drawSlots } from './drawOrder';
+import type { DrawItem } from './items';
+import { hashId } from '../core/particles/nodes';
+import { ParticleField } from './particles';
+import { particleLibrary } from './ParticleLibrary';
+import { SHEET_EDGE } from '../core/shader/nodes';
+import { shaderLibrary } from './ShaderLibrary';
+import { type ShaderSource, wornShader } from './shaders';
+import { disposeSpriteMesh, drawItem, newSpriteMesh, syncSpriteMesh } from './symbols';
+import { TextPicture } from './textPicture';
+import { cellCentre, type LayerFocus, TilemapField } from './tilemap';
+import { textureLibrary } from './TextureLibrary';
+import { gameClock } from '../core/time';
+import { type View, worldBounds, worldToScreen } from './view';
 
 /** How strongly the cut-off part of an object shows while the scene view opens its clip area (#260). */
 export const CLIP_GHOST_ALPHA = 0.3;
 
+/**
+ * What a view draws from: the project and word of when it changed. The editor's state is one; a
+ * released game (#266), which has no editor, hands over its own.
+ */
+export interface ViewSource {
+  readonly project: Project;
+  on(event: 'project' | 'selection' | 'mode' | 'runtime', listener: () => void): unknown;
+}
+
 export interface Frame {
   items: DrawItem[];
   background: number;
 }
 
-export abstract class WorldViewport extends Widget {
+export abstract class WorldViewport<S extends ViewSource = ViewSource> extends Widget {
   protected readonly bg = new Graphics();
   protected readonly content = new Container();
   protected readonly world = new Container();
@@ -77,7 +86,7 @@ export abstract class WorldViewport extends Widget {
   private cameraMoves = 0;
   private readonly stopFiles: (() => void)[];
 
-  protected constructor(protected readonly state: EditorState) {
+  protected constructor(protected readonly state: S) {
     super();
     this.world.addChild(this.masks, this.objects, this.overlay);
     this.content.addChild(this.world);

src/viewport/gamePointer.ts

@@ -0,0 +1,31 @@
+import type { Container, FederatedMouseEvent, FederatedPointerEvent, FederatedWheelEvent } from 'pixi.js';
+import type { World } from '../runtime/World';
+import { isInside, screenToWorld, type View, wheelNotches } from './view';
+
+/**
+ * Hands the mouse over `target` to a running world: position, left button and wheel. Shared by the
+ * editor's game view and a released game (#266). Outside the camera frame counts as "not in view":
+ * that region is letterbox, not game.
+ */
+export function routePointer(target: Container, world: () => World | null, view: () => View | null): void {
+  const report = (e: FederatedMouseEvent): void => {
+    const w = world();
+    const v = view();
+    if (!w || !v) return;
+    const local = target.toLocal(e.global);
+    const point = screenToWorld(v, local.x, local.y);
+    w.movePointer(point.x, point.y, isInside(v, local.x, local.y));
+  };
+  target.on('pointerdown', (e: FederatedPointerEvent) => {
+    if (e.button !== 0) return;
+    report(e);
+    world()?.setPointerDown(true);
+  });
+  target.on('globalpointermove', (e: FederatedPointerEvent) => report(e));
+  target.on('pointerup', () => world()?.setPointerDown(false));
+  target.on('pointerupoutside', () => world()?.setPointerDown(false));
+  target.on('wheel', (e: FederatedWheelEvent) => {
+    report(e);
+    world()?.turnWheel(wheelNotches(e.deltaY, e.deltaMode));
+  });
+}

src/viewport/projectFiles.ts

@@ -0,0 +1,49 @@
+import type { Renderer } from 'pixi.js';
+import type { Project } from '../core/model/Project';
+import { projectFiles } from '../core/model/projectFiles';
+import { requestRender } from '../ui';
+import { fontLibrary } from './FontLibrary';
+import { installPixelArtPictures } from './pixelArtPicture';
+import { pixelCels } from './PixelCels';
+import { soundLibrary } from './SoundLibrary';
+import { textureLibrary } from './TextureLibrary';
+import { installVectorArtPictures } from './vectorArtPicture';
+
+/**
+ * Where uploaded images live: the API writes them, the browser reads them straight off disk as
+ * static files named by their content hash. Fonts and sounds work the same way, one directory over.
+ */
+const TEXTURE_BASE = '/game-maker/data/textures';
+const FONT_BASE = '/game-maker/data/fonts';
+const SOUND_BASE = '/game-maker/data/sounds';
+const PIXEL_BASE = '/game-maker/data/pixels';
+
+/**
+ * Points the file libraries at the server, once per page: the editor's and a released game's (#266).
+ */
+export function setUpProjectFiles(renderer: Renderer): void {
+  textureLibrary.configure(TEXTURE_BASE);
+  fontLibrary.configure(FONT_BASE);
+  soundLibrary.configure(SOUND_BASE);
+  pixelCels.configure(PIXEL_BASE);
+  // An image or a font arrives long after the click that asked for it, and the widget waiting for
+  // it repaints without telling anyone: both libraries are a wake-up of their own. Registered once
+  // for the page, not per session – the files they hold are shared by every account anyway.
+  textureLibrary.onChange(() => requestRender());
+  fontLibrary.onChange(() => requestRender());
+  // Vector art draws its own picture and needs the renderer to do it (#129). Registered once for
+  // the page like the libraries above: which project it is asked about comes from the factory.
+  installVectorArtPictures(renderer);
+  installPixelArtPictures();
+}
+
+/**
+ * Everything the project names is fetched as soon as it is named, not when it is first drawn: an
+ * animation reaching a frame from another sheet would otherwise blink out once.
+ */
+export function preloadProjectFiles(project: Project): void {
+  const files = projectFiles(project);
+  textureLibrary.preload(files.textures);
+  fontLibrary.preload(files.fonts);
+  pixelCels.preload(files.cels);
+}