Sprite

Read as Markdown

Sprite from @pibbl/core/sprites draws an immutable frame returned by loadSpriteSheet. frame accepts a literal or signal. Its source sheet must remain alive until all consumers unmount.

import { Sprite, type SpriteFrame } from "@pibbl/core/sprites";
function Avatar({
  frame,
  facingLeft,
}: {
  frame: SpriteFrame;
  facingLeft: boolean;
}) {
  return (
    <Sprite
      frame={frame}
      sampling="nearest"
      flipX={facingLeft}
      anchor={{ x: 0.5, y: 1 }}
      style={{ width: 48, height: 64 }}
    />
  );
}

sampling defaults to linear. anchor defaults to top-left and uses normalized original frame dimensions. flipX and flipY default to false. Width/height default to the original untrimmed frame dimensions. Packing rotation and trim offsets are handled by drawing; hit bounds stay logical. Use explicit physics colliders.

See the sprite guide and sprite types.

Related types: SpriteProps, SpriteStyle, SpriteFrame.

API details from source

Draw a shared atlas frame, preserving its logical geometry across frame changes. See SpriteFrame.

Sprite: PibblPrimitiveComponent<SpriteProps, PrimitiveInput<SpriteProps, SpriteStyle>>

Related API: Sprite, PibblPrimitiveComponent, SpriteProps, PrimitiveInput, SpriteStyle.

View source — packages/core/src/features/sprites/sprite.ts:18

Implementation guidance for agents

Read the Authoring, signals, and lifecycle companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal examples

• Animated sprite atlas: Generate a two-frame atlas, animate a shared sheet, and dispose it after unmounting. Plain source

Documentation version

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