Animate a sprite from an atlas

import { Camera2D, SpriteAnimator, SpriteRenderer, twoD } from "@ignifx/2d";import { Script, createApp, f32 } from "@ignifx/core";import type { SpriteAnimationAsset, SpriteAtlasAsset } from "@ignifx/2d";import type { ScriptCallbacks } from "@ignifx/core";/** Chooses the clip and the facing from the entity's own movement. */class HeroAnimation extends Script.define({ speed: f32(3) }) implements ScriptCallbacks {  static typeId = "recipes/HeroAnimation";  #animator: SpriteAnimator | null = null;  #renderer: SpriteRenderer | null = null;  #clip = "";  awake(): void {    this.#animator = this.entity.requireComponent(SpriteAnimator);    this.#renderer = this.entity.requireComponent(SpriteRenderer);    this.#animator.onEvent.connect(      (name: string): void => {        this.app.log.info("animation event:", name);      },      { owner: this },    );  }  // `direction` is -1, 0 or 1 — whatever the game's input or AI decided for this frame.  drive(direction: number, dt: number): void {    this.transform.translate({ x: direction * this.speed * dt, y: 0, z: 0 });    if (direction !== 0 && this.#renderer !== null) {      this.#renderer.flipX = direction < 0;    }    const wanted = direction === 0 ? "idle" : "run";    if (wanted !== this.#clip) {      this.#clip = wanted;      // Guarded, because playing the clip that is already running would restart it.      this.#animator?.play(wanted);    }  }}const canvas = document.querySelector("canvas");if (!(canvas instanceof HTMLCanvasElement)) {  throw new Error("ignifx renders into a <canvas> element.");}const app = await createApp({  canvas,  settings: { assets: { root: "assets" }, sortingLayers: { sortingLayers: ["Background", "Default"] } },  extensions: [twoD({ pixelsPerUnit: 16 })],});app.registerComponents([HeroAnimation]);// Awaited before `app.start()`, where a completed load settles at once instead of waiting a frame.const atlas = await app.assets.loadAsync<SpriteAtlasAsset>("2d/hero.atlas.json");const clips = await app.assets.loadAsync<SpriteAnimationAsset>("2d/hero.spriteanim.json");app.world.createEntity("Camera").addComponent(Camera2D, { orthographicSize: 5 });const hero = app.world.createEntity("Hero");const renderer = hero.addComponent(SpriteRenderer, { sortingLayer: "Default", orderInLayer: 10 });renderer.sprite = atlas;const animator = hero.addComponent(SpriteAnimator, { defaultClip: "idle", playOnAwake: true, speed: 1 });animator.animations = clips;const animation = hero.addComponent(HeroAnimation, { speed: 3 });await app.start();// Runs left: the same frames, mirrored.animation.drive(-1, app.time.deltaTime);window.addEventListener("pagehide", () => {  atlas.release();  clips.release();  app.dispose();});