Animated sprite atlas

Generate a two-frame atlas, animate a shared sheet, and dispose it after unmounting.

APIs demonstrated

Sprite from @pibbl/core/sprites
SpriteFrame from @pibbl/core/sprites
loadSpriteSheet from @pibbl/core/sprites
defineSpriteAnimation from @pibbl/core/sprites
SpriteGrid from @pibbl/core/sprites
SpriteSheet from @pibbl/core/sprites
SpriteProps from @pibbl/core/sprites
SpriteStyle from @pibbl/core/sprites

Complete example

Plain source. Run as a browser module after the document body exists. TSX uses jsx: "react-jsx" and jsxImportSource: "@pibbl/core".

import { pibbl, signal, usePlayback, drive, repeat } from "@pibbl/core";
import {
  Sprite,
  type SpriteFrame,
  loadSpriteSheet,
  defineSpriteAnimation,
  type SpriteGrid,
  type SpriteSheet,
  type SpriteProps,
  type SpriteStyle,
} from "@pibbl/core/sprites";
const atlas = document.createElement("canvas");
atlas.width = 32;
atlas.height = 16;
const context = atlas.getContext("2d")!;
context.fillStyle = "#087e8b";
context.fillRect(0, 0, 16, 16);
context.fillStyle = "#f2a65a";
context.fillRect(16, 0, 16, 16);
const grid: SpriteGrid = { frameWidth: 16, frameHeight: 16 };
const canvas = document.createElement("canvas");
canvas.width = 160;
canvas.height = 120;
document.body.append(canvas);
let disposed = false;
let release = () => {};
window.addEventListener(
  "pagehide",
  () => {
    disposed = true;
    release();
  },
  { once: true },
);
async function mount() {
  const sheet: SpriteSheet = await loadSpriteSheet(atlas.toDataURL(), { grid });
  if (disposed) {
    sheet.dispose();
    return;
  }
  const first: SpriteFrame = sheet.frames[0];
  const frame = signal(first);
  const animation = defineSpriteAnimation({
    frames: [first, sheet.frames[1]],
    fps: 2,
  });
  const style: SpriteStyle = { width: 64, height: 64 };
  const props: SpriteProps = { frame: first, sampling: "nearest" };
  function Scene() {
    usePlayback(repeat(drive(frame, animation), { iterations: Infinity }));
    return <Sprite {...props} frame={frame} style={style} />;
  }
  const app = pibbl(canvas, <Scene />);
  release = () => {
    app.dispose();
    sheet.dispose();
  };
}
mount().catch((error) => {
  const message = document.createElement("p");
  message.textContent = String(error);
  document.body.append(message);
});

Usage notes

Uses public package imports. Browser resources are released on pagehide.

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.