castle-web-cli 0.4.128 → 0.4.130

package/kits/basic-2d/behaviors/Sprite.jsx

@@ -1,357 +0,0 @@
-import { resolveDeckFile } from 'castle-web-sdk';
-import React from 'react';
-import { frameCount, renderSpriteFrame } from '../engine/pxart';
-import { renderSmoothSpriteFrame } from '../engine/pxartSmooth';
-import { spriteDestRect } from '../engine/spriteGeometry';
-import { Panel, SelectField } from '../engine/ui';
-import { AutoFields, overrideProps } from '../engine/autoInspector';
-import { parseTint, tintImageData } from './tint';
-
-// Runtime behavior for the pixel-art Sprite format (.pxart). It looks up the
-// parsed Sprite from the scene's sprite map, composites the current animation
-// frame into a cached offscreen canvas (tinted), and blits it into the actor's
-// Layout box with smoothing disabled — unless the FILE itself opts into a
-// `cornerRadius` (a property of the .pxart asset, not a Sprite prop) greater
-// than 0, in which case the cached canvas holds a corner-rounded vector
-// render instead and gets blitted with smoothing on.
-//
-// Animation plays in `update` and is stored on `actor.runtime.spriteAnim` (the
-// behavior instance is recreated every frame, but the actor object persists in
-// the runtime). In edit-mode previews `update` never runs, so the actor holds
-// frame 0.
-const FALLBACK_FILE = 'drawings/cauldron.pxart';
-
-export class Sprite {
-  static behaviorName = 'Sprite';
-
-  static defaultProps = {
-    file: FALLBACK_FILE,
-    tint: '#ffffffff',
-    playing: true,
-    tag: '',
-    mode: 'cover',
-    tileSize: 50,
-  };
-
-  constructor(props) {
-    this.props = props;
-  }
-
-  resolveSprite(scene) {
-    // `drawings/x.pxart` is this deck's; `@imports/<alias>/drawings/x.pxart` is
-    // an import's. (A value inherited from an imported blueprint arrives already
-    // resolved against that blueprint's deck -- see engine/blueprint.js.)
-    const file = resolveDeckFile(this.props.file);
-    return scene.sprites?.[file] ?? scene.sprites?.[FALLBACK_FILE] ?? null;
-  }
-
-  update(actor, scene, dt) {
-    if (!actor.runtime || actor.runtime.collected) return;
-    const sprite = this.resolveSprite(scene);
-    if (!sprite) return;
-    const tag = resolveTag(sprite, this.props.tag);
-    const sequence = frameSequence(sprite, tag);
-    const state = ensureAnimState(actor, sprite, this.props, sequence);
-    if (!this.props.playing) {
-      resetAnimState(state, sequence);
-      state.frameIndex = 0;
-      return;
-    }
-    advanceAnim(state, sprite, sequence, tag, dt);
-  }
-
-  draw(actor, scene, ctx) {
-    if (actor.runtime?.collected) return;
-    const layout = actor.components.Layout;
-    if (!layout) return;
-    const sprite = this.resolveSprite(scene);
-    if (!sprite) return;
-    const total = frameCount(sprite);
-    const frameIndex = Math.min(Math.max(actor.runtime?.spriteAnim?.frameIndex ?? 0, 0), total - 1);
-    const canvas = getSpriteCanvas(sprite, frameIndex, this.props.tint);
-    const prevSmoothing = ctx.imageSmoothingEnabled;
-    // File-level `cornerRadius > 0` sprites are pre-rendered as supersampled,
-    // corner-rounded vector fills (see engine/pxartSmooth.js); blit those with
-    // smoothing on so downscaling to the Layout box stays antialiased. Plain
-    // pixel sprites (`cornerRadius === 0`) keep nearest-neighbor blitting.
-    const smoothing = sprite.cornerRadius > 0;
-
-    // Snap the destination rect to whole device pixels so tiles that abut
-    // exactly in card units (e.g. adjacent 100-unit-wide tiles) land on the
-    // same device-pixel edge instead of each getting its own antialiased
-    // partial-coverage edge, which otherwise leaves faint hairline seams
-    // between them. Rounding each of the four device-space coordinates
-    // independently (rather than rounding position+size) is what makes two
-    // neighbors sharing a card-unit edge compute and round to the identical
-    // device pixel. Skipped when the ctx is rotated/skewed (nonzero b or c,
-    // set by the runtime for `Layout.rotation`), since a rotated rect has no
-    // axis-aligned device edges to snap to.
-    const transform = ctx.getTransform();
-    const tiling = this.props.mode === 'tile';
-    // `cover` scales the art to fill the box preserving aspect ratio, so `dest`
-    // overflows the Layout box and the overflow must be clipped to the box.
-    const covering = this.props.mode === 'cover';
-    // Everything downstream (snapping, tiling's clip box) works off `dest`: the
-    // Layout box itself for every mode except `fit`/`cover`, which resize to the
-    // art's own aspect ratio (see `spriteDestRect`).
-    const dest = spriteDestRect(this.props.mode, layout, canvas);
-    if (transform.b === 0 && transform.c === 0) {
-      const x0 = dest.x * transform.a + transform.e;
-      const y0 = dest.y * transform.d + transform.f;
-      const x1 = (dest.x + dest.width) * transform.a + transform.e;
-      const y1 = (dest.y + dest.height) * transform.d + transform.f;
-      const rx0 = Math.round(x0);
-      const ry0 = Math.round(y0);
-      const rx1 = Math.round(x1);
-      const ry1 = Math.round(y1);
-      ctx.save();
-      ctx.setTransform(1, 0, 0, 1, 0, 0);
-      ctx.imageSmoothingEnabled = smoothing;
-      if (tiling) {
-        drawTilesSnapped(ctx, canvas, this.props.tileSize, dest, transform, x0, y0, rx0, ry0, rx1, ry1);
-      } else {
-        // Clip cover's overflow to the snapped Layout box (undone by restore).
-        if (covering) {
-          const lx0 = Math.round(layout.x * transform.a + transform.e);
-          const ly0 = Math.round(layout.y * transform.d + transform.f);
-          const lx1 = Math.round((layout.x + layout.width) * transform.a + transform.e);
-          const ly1 = Math.round((layout.y + layout.height) * transform.d + transform.f);
-          ctx.beginPath();
-          ctx.rect(lx0, ly0, lx1 - lx0, ly1 - ly0);
-          ctx.clip();
-        }
-        ctx.drawImage(canvas, rx0, ry0, rx1 - rx0, ry1 - ry0);
-      }
-      ctx.restore();
-    } else {
-      ctx.imageSmoothingEnabled = smoothing;
-      if (tiling) {
-        drawTilesUnsnapped(ctx, canvas, this.props.tileSize, dest);
-      } else if (covering) {
-        // Rotated: clip cover's overflow to the Layout box in card units.
-        ctx.save();
-        ctx.beginPath();
-        ctx.rect(layout.x, layout.y, layout.width, layout.height);
-        ctx.clip();
-        ctx.drawImage(canvas, dest.x, dest.y, dest.width, dest.height);
-        ctx.restore();
-      } else {
-        ctx.drawImage(canvas, dest.x, dest.y, dest.width, dest.height);
-      }
-      ctx.imageSmoothingEnabled = prevSmoothing;
-    }
-  }
-
-  static Inspector({ component, setComponent, files, override }) {
-    const spriteFiles = getSpriteFiles(files);
-    return (
-      <Panel title="Sprite" overridden={override?.anyOverridden()}>
-        <SelectField
-          label="File"
-          value={component.file}
-          onChange={(file) => setComponent({ file })}
-          options={spriteFiles}
-          {...overrideProps(override, 'file')}
-        />
-        <SelectField
-          label="Mode"
-          value={component.mode}
-          onChange={(mode) => setComponent({ mode })}
-          options={['stretch', 'fit', 'cover', 'tile']}
-          {...overrideProps(override, 'mode')}
-        />
-        <AutoFields
-          defaultProps={Sprite.defaultProps}
-          component={component}
-          setComponent={setComponent}
-          only={['playing', 'tint', 'tileSize']}
-          override={override}
-        />
-      </Panel>
-    );
-  }
-}
-
-// Guard against non-finite or non-positive tileSize props (e.g. cleared
-// inspector fields), falling back to one 50-unit grid cell.
-function validTileSize(value) {
-  return Number.isFinite(value) && value > 0 ? value : 50;
-}
-
-// Repeat the sprite in device space, clipped to the snapped box. Tile edges
-// are rounded independently from the box's unrounded device origin (x0/y0)
-// using the same per-edge-rounding discipline as the box snap in `draw`, so
-// neighboring tiles within this actor land on identical device pixels with
-// no hairline seams.
-function drawTilesSnapped(ctx, canvas, tileSize, layout, transform, x0, y0, rx0, ry0, rx1, ry1) {
-  const cellHeight = validTileSize(tileSize);
-  const cellWidth = cellHeight * (canvas.width / canvas.height);
-  const cellDeviceWidth = cellWidth * transform.a;
-  const cellDeviceHeight = cellHeight * transform.d;
-  const cols = Math.ceil(layout.width / cellWidth);
-  const rows = Math.ceil(layout.height / cellHeight);
-  ctx.save();
-  ctx.beginPath();
-  ctx.rect(rx0, ry0, rx1 - rx0, ry1 - ry0);
-  ctx.clip();
-  for (let row = 0; row < rows; row++) {
-    const edgeY0 = Math.round(y0 + row * cellDeviceHeight);
-    const edgeY1 = Math.round(y0 + (row + 1) * cellDeviceHeight);
-    for (let col = 0; col < cols; col++) {
-      const edgeX0 = Math.round(x0 + col * cellDeviceWidth);
-      const edgeX1 = Math.round(x0 + (col + 1) * cellDeviceWidth);
-      ctx.drawImage(canvas, edgeX0, edgeY0, edgeX1 - edgeX0, edgeY1 - edgeY0);
-    }
-  }
-  ctx.restore();
-}
-
-// Rotated actors have no axis-aligned device edges to snap to, so tile
-// unsnapped in card units, matching the unsnapped stretch fallback in `draw`.
-function drawTilesUnsnapped(ctx, canvas, tileSize, layout) {
-  const cellHeight = validTileSize(tileSize);
-  const cellWidth = cellHeight * (canvas.width / canvas.height);
-  const cols = Math.ceil(layout.width / cellWidth);
-  const rows = Math.ceil(layout.height / cellHeight);
-  ctx.save();
-  ctx.beginPath();
-  ctx.rect(layout.x, layout.y, layout.width, layout.height);
-  ctx.clip();
-  for (let row = 0; row < rows; row++) {
-    const ty = layout.y + row * cellHeight;
-    for (let col = 0; col < cols; col++) {
-      const tx = layout.x + col * cellWidth;
-      ctx.drawImage(canvas, tx, ty, cellWidth, cellHeight);
-    }
-  }
-  ctx.restore();
-}
-
-// Cache of native-resolution offscreen canvases keyed by sprite, then by
-// `${frameIndex}|${tint}`. A sprite edit produces a fresh Sprite object, so a
-// new object naturally misses the WeakMap and rebuilds.
-const spriteCanvasCache = new WeakMap();
-
-function getSpriteCanvas(sprite, frameIndex, tint) {
-  const key = `${frameIndex}|${tint ?? ''}`;
-  let byKey = spriteCanvasCache.get(sprite);
-  if (!byKey) {
-    byKey = new Map();
-    spriteCanvasCache.set(sprite, byKey);
-  }
-  const cached = byKey.get(key);
-  if (cached) return cached;
-
-  const canvas = document.createElement('canvas');
-  if (sprite.cornerRadius > 0) {
-    renderSmoothSpriteFrame(sprite, frameIndex, canvas, { cornerRadius: sprite.cornerRadius });
-  } else {
-    renderSpriteFrame(sprite, frameIndex, canvas);
-  }
-  const tintRgba = parseTint(tint);
-  if (tintRgba) {
-    const octx = canvas.getContext('2d');
-    if (octx && canvas.width > 0 && canvas.height > 0) {
-      const image = octx.getImageData(0, 0, canvas.width, canvas.height);
-      tintImageData(image.data, tintRgba);
-      octx.putImageData(image, 0, 0);
-    }
-  }
-  byKey.set(key, canvas);
-  return canvas;
-}
-
-// Resolve the active tag: the `tag` prop when it names an existing tag,
-// otherwise the sprite's defaultTag, otherwise null (whole-timeline loop).
-function resolveTag(sprite, tagProp) {
-  const name = tagProp || sprite.defaultTag;
-  if (!name) return null;
-  return sprite.tags.find((candidate) => candidate.name === name) ?? null;
-}
-
-// The ordered list of frame indices to step through, honoring the tag range and
-// direction. No tag => the whole timeline, forward.
-function frameSequence(sprite, tag) {
-  const total = Math.max(frameCount(sprite), 1);
-  let from = 0;
-  let to = total - 1;
-  let direction = 'forward';
-  if (tag) {
-    from = clampIndex(tag.from, total);
-    to = clampIndex(tag.to, total);
-    if (from > to) [from, to] = [to, from];
-    direction = tag.direction;
-  }
-  if (from === to) return [from];
-  const forward = [];
-  for (let i = from; i <= to; i++) forward.push(i);
-  if (direction === 'reverse') return forward.slice().reverse();
-  if (direction === 'pingpong') {
-    const back = [];
-    for (let i = to - 1; i > from; i--) back.push(i);
-    return [...forward, ...back];
-  }
-  return forward;
-}
-
-function clampIndex(value, total) {
-  if (!Number.isInteger(value)) return 0;
-  return Math.min(Math.max(value, 0), total - 1);
-}
-
-function animKey(props) {
-  return `${props.file}|${props.tag ?? ''}`;
-}
-
-// Reset playback state when the sprite identity or active tag changes.
-function ensureAnimState(actor, sprite, props, sequence) {
-  const key = animKey(props);
-  let state = actor.runtime.spriteAnim;
-  if (!state || state.sprite !== sprite || state.key !== key) {
-    state = { sprite, key, pos: 0, elapsedMs: 0, loops: 0, done: false, frameIndex: sequence[0] };
-    actor.runtime.spriteAnim = state;
-  }
-  return state;
-}
-
-function resetAnimState(state, sequence) {
-  state.pos = 0;
-  state.elapsedMs = 0;
-  state.loops = 0;
-  state.done = false;
-  state.frameIndex = sequence[0];
-}
-
-// Advance the playhead by `dt` seconds, stepping frames by their durationMs and
-// honoring `repeat` (0 = loop forever; otherwise hold the last frame when done).
-function advanceAnim(state, sprite, sequence, tag, dt) {
-  if (state.done) {
-    state.frameIndex = sequence[state.pos];
-    return;
-  }
-  const repeat = tag ? tag.repeat : 0;
-  state.elapsedMs += dt * 1000;
-  let guard = 0;
-  while (guard++ < 1000) {
-    const frame = sequence[state.pos];
-    const duration = sprite.frames[frame]?.durationMs ?? sprite.defaultDurationMs;
-    if (!(duration > 0) || state.elapsedMs < duration) break;
-    state.elapsedMs -= duration;
-    state.pos += 1;
-    if (state.pos >= sequence.length) {
-      state.loops += 1;
-      if (repeat !== 0 && state.loops >= repeat) {
-        state.pos = sequence.length - 1;
-        state.done = true;
-        state.elapsedMs = 0;
-        break;
-      }
-      state.pos = 0;
-    }
-  }
-  state.frameIndex = sequence[state.pos];
-}
-
-function getSpriteFiles(files) {
-  return Object.keys(files).filter((path) => path.endsWith('.pxart'));
-}

package/kits/basic-2d/behaviors/tint.js

@@ -1,47 +0,0 @@
-// Tint helpers for the pixel-art Sprite behavior. A tint is a hex color
-// (#rrggbb / #rrggbbaa) multiplied channel-wise into each source pixel. White
-// (#ffffffff) means "no change".
-
-// Parse a hex color into [r, g, b, a] channels (0-255). Returns null when the
-// string is not a hex color so callers can fall back to the raw color.
-export function parseHexColor(color) {
-  const hex = String(color).trim().replace(/^#/, '');
-  if (hex.length !== 6 && hex.length !== 8) return null;
-  if (!/^[0-9a-fA-F]+$/.test(hex)) return null;
-  const r = parseInt(hex.slice(0, 2), 16);
-  const g = parseInt(hex.slice(2, 4), 16);
-  const b = parseInt(hex.slice(4, 6), 16);
-  const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) : 255;
-  return [r, g, b, a];
-}
-
-// Returns the tint as [r, g, b, a] channels, or null when there is no tint or
-// the tint is white (#ffffffff) -- both meaning "no change".
-export function parseTint(tint) {
-  if (!tint) return null;
-  const rgba = parseHexColor(tint);
-  if (!rgba) return null;
-  if (rgba[0] === 255 && rgba[1] === 255 && rgba[2] === 255 && rgba[3] === 255) {
-    return null;
-  }
-  return rgba;
-}
-
-// Multiply each channel of a pixel color (hex string) by the tint (0-255).
-export function applyTint(color, tint) {
-  const rgba = parseHexColor(color);
-  if (!rgba) return color;
-  const out = rgba.map((channel, i) => Math.round((channel * tint[i]) / 255));
-  return '#' + out.map((channel) => channel.toString(16).padStart(2, '0')).join('');
-}
-
-// Multiply an ImageData buffer's RGBA channels in place by the tint (0-255).
-// Used to tint an already-rendered offscreen canvas (the Sprite path).
-export function tintImageData(data, tint) {
-  for (let i = 0; i < data.length; i += 4) {
-    data[i] = Math.round((data[i] * tint[0]) / 255);
-    data[i + 1] = Math.round((data[i + 1] * tint[1]) / 255);
-    data[i + 2] = Math.round((data[i + 2] * tint[2]) / 255);
-    data[i + 3] = Math.round((data[i + 3] * tint[3]) / 255);
-  }
-}

package/kits/basic-2d/blueprints/cauldron.scene

@@ -1,20 +0,0 @@
-{
-  "name": "Cauldron",
-  "actors": [
-    {
-      "components": {
-        "Layout": {
-          "width": 100,
-          "height": 100,
-          "z": 1
-        },
-        "Sprite": {
-          "file": "drawings/cauldron.pxart"
-        },
-        "Collider": {
-          "kind": "solid"
-        }
-      }
-    }
-  ]
-}