Load every picture of a project ahead so animated tiles don't flicker

A texture was fetched only when it was drawn for the first time. Until
the file arrived, the tilemap skipped the cell for that frame. An
animated tile whose next step sat in another picture therefore blinked
away once on its first cycle, and sprite animations did the same.

- FileLibrary gets preload(files). It requests every file that is not
  held, loading or known to have failed. Each library reports what it
  holds through holds().
- src/core/model/projectFiles.ts lists the files a project names per
  library: uploaded textures, fonts and pixel art cels.
- App.ts runs the preload on every project event. That covers opening
  a project, new assets and edits from a collaborator.
- A new test hook __gm.heldPictures() reports which textures of the
  project are in memory.

Not done on purpose:
- The tilemap keeps no fallback frame while a step is still loading.
- Sounds still load on first play.

Not checked: the flicker itself was not reproduced in the browser, the
e2e check measures "held in memory". Modules 42, 44 and 47 read
textures from the project and were not run locally.

Tests:
- ./check.sh: 174 files, 2518 tests, CHECK EXIT 0
- e2e 39 + 40: ALL PASSED, 96 checks
- 3 new unit tests for preload and the project file list
- New e2e check 40k-ii: an unplaced picture is held after a reload
- Counter-probe: without the preload 40k-ii fails with
  "Autotiles: held false, unworn: held false"

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

src/core/model/projectFiles.ts

@@ -0,0 +1,26 @@
+import { isFontFile } from './font';
+import { celFilesOf } from './pixelart';
+import type { Project } from './Project';
+import { isTextureFile } from './texture';
+
+/** The stored files a project draws with, per library – what is loaded before anything asks. */
+export interface ProjectFiles {
+  textures: string[];
+  fonts: string[];
+  cels: string[];
+}
+
+/**
+ * Every file an asset names, used or not: which frame an animation or a tile reaches next is only
+ * known while it plays, and a file fetched then shows as a gap. A name that is no stored file –
+ * an upload that failed – is left out, as the libraries would never get it anyway.
+ */
+export function projectFiles(project: Project): ProjectFiles {
+  const files: ProjectFiles = { textures: [], fonts: [], cels: [] };
+  for (const asset of project.assets) {
+    if (asset.type === 'texture' && isTextureFile(asset.file)) files.textures.push(asset.file);
+    else if (asset.type === 'font' && isFontFile(asset.file)) files.fonts.push(asset.file);
+    else if (asset.type === 'pixelart') files.cels.push(...celFilesOf(asset));
+  }
+  return files;
+}

src/editor/App.ts

@@ -1,4 +1,5 @@
 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';
@@ -35,6 +36,13 @@ 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
@@ -97,6 +105,10 @@ 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));
     const editor = new Editor(
       app,
       root,

src/editor/debug/renderHooks.ts

@@ -1,4 +1,4 @@
-import { type FrameRect, resolvePicture } from '../../core/model/texture';
+import { type FrameRect, isTextureFile, resolvePicture } from '../../core/model/texture';
 import { effectiveScale, gameClock } from '../../core/time';
 import { afterFrames, isRendering, renderCount, requestRender } from '../../ui';
 import { particleLibrary } from '../../viewport/ParticleLibrary';
@@ -34,6 +34,13 @@ export function renderHooks({ app, state, editor }: HookContext) {
       for (let i = 0; i < width; i++) row.push(pixelAt(x + i, y));
       return row;
     },
+    /** Every uploaded picture the project names and whether it is in memory, drawn anywhere or not. */
+    heldPictures: () =>
+      state.project.assets.flatMap((asset) =>
+        asset.type === 'texture' && isTextureFile(asset.file)
+          ? [{ name: asset.name, held: textureLibrary.peek(asset.file) !== null }]
+          : [],
+      ),
     /** The filter and wrap the GPU sampler actually got, next to the model's – only the driver knows the former. */
     textureFilter: (file: string, rect: FrameRect | null = null) => {
       const texture = textureLibrary.peek(file, rect);

src/viewport/FileLibrary.ts

@@ -39,11 +39,23 @@ export abstract class FileLibrary<T> {
       }
   }
 
+  /**
+   * Starts loading every file not held yet. Waiting for the first draw left a gap of a frame or
+   * more where the picture should be – an animated tile blinked out the first time it reached a
+   * step from a sheet of its own.
+   */
+  preload(files: Iterable<string>): void {
+    for (const file of files) if (file && !this.holds(file)) this.startLoading(file);
+  }
+
   protected abstract fetchFile(url: string, file: string): Promise<T>;
 
   /** Keeps what arrived; the listeners run right after. */
   protected abstract keep(file: string, loaded: T): void;
 
+  /** True once the file is in memory, whether it came from the server or was made here. */
+  protected abstract holds(file: string): boolean;
+
   /** A file that could not be loaded; it is not asked for again. */
   protected hasFailed(file: string): boolean {
     return this.failed.has(file);

src/viewport/FontLibrary.ts

@@ -33,6 +33,10 @@ export class FontLibrary extends FileLibrary<FontFace> {
     document.fonts.add(loaded);
     this.ready.add(file);
   }
+
+  protected holds(file: string): boolean {
+    return this.ready.has(file);
+  }
 }
 
 export const fontLibrary = new FontLibrary();

src/viewport/PixelCels.ts

@@ -83,6 +83,10 @@ export class PixelCels extends FileLibrary<CelPixels> {
   protected keep(file: string, cel: CelPixels): void {
     this.cels.set(file, cel);
   }
+
+  protected holds(file: string): boolean {
+    return this.cels.has(file);
+  }
 }
 
 export const pixelCels = new PixelCels();

src/viewport/TextureLibrary.ts

@@ -154,6 +154,10 @@ export class TextureLibrary extends FileLibrary<Texture> {
     texture.source.style.update();
     this.loaded.set(file, texture);
   }
+
+  protected holds(file: string): boolean {
+    return this.loaded.has(file);
+  }
 }
 
 function cropKey(file: string, rect: FrameRect): string {