@diffenderfer-games/hub 2.0.0-next.7 → 2.0.0-next.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diffenderfer-games/hub",
-  "version": "2.0.0-next.7",
+  "version": "2.0.0-next.9",
   "description": "The diffenderfer.games hub client for games: accounts, saves, stats, leaderboards, inventory, daily challenges, the input system and the social/multiplayer forwarders, typed from the hub contract.",
   "license": "MIT",
   "type": "module",
@@ -64,6 +64,11 @@
       "types": "./dist/turns.d.ts",
       "default": "./dist/turns.js"
     },
+    "./turns-rules": {
+      "source": "./src/turns-rules.ts",
+      "types": "./dist/turns-rules.d.ts",
+      "default": "./dist/turns-rules.js"
+    },
     "./types": {
       "source": "./src/types.ts",
       "types": "./dist/types.d.ts",
@@ -106,7 +111,8 @@
   },
   "dependencies": {
     "@ayepi/core": "0.4.1",
-    "@diffenderfer-games/hub-contract": "2.0.0-next.7"
+    "@diffenderfer-games/hub-contract": "2.0.0-next.9",
+    "@diffenderfer-games/world": "2.0.0-next.9"
   },
   "publishConfig": {
     "access": "public"

package/src/avatar/adapters/pixi-crowd.ts

@@ -15,7 +15,8 @@ import { toCode } from '../look-like';
 import { defaultLayer } from '../outputs/canvas';
 import { paintNodes } from '../outputs/canvas-paint';
 import { overlays, type Overlay, type ReactionGlyph } from '../overlays';
-import type { BodyPose, Facing, LookLike, StatusProp } from '../render/types';
+import { frameBox } from '../render/frame';
+import type { BodyPose, Facing, Figure, LookLike, StatusProp } from '../render/types';
 import { pixiAvatar, type PixiAvatar } from './pixi-avatar';
 import { refresh, type PixiContainer, type PixiNs, type PixiRectangle, type PixiSprite, type PixiTexture } from './pixi-types';
 
@@ -40,6 +41,8 @@ export interface CrowdMember {
   readonly live?: boolean;
   /** Hide the tag (the world fades tags by distance and hides them when crowded). */
   readonly tagHidden?: boolean;
+  /** Moves the tag and bubble up by this much (container units), so a world can stack tags that would overlap. */
+  readonly tagLift?: number;
 }
 
 /** Crowd options; `container` is the game's own pixi `Container`. */
@@ -51,6 +54,22 @@ export interface CrowdOptions<TSprite extends PixiSprite = PixiSprite> {
   readonly liveMax?: number;
   /** Atlas baking budget per update, ms (default 4). */
   readonly bakeMs?: number;
+  /**
+   * Where name tags and bubbles go (default `container`). A world puts them in
+   * a container above its lighting so tags stay readable at night.
+   */
+  readonly overlays?: PixiContainer<TSprite>;
+  /**
+   * Draws atlas avatars at this scale (default 1). Bake the atlas at
+   * `scale × devicePixelRatio` and pass `1 / devicePixelRatio` for crisp
+   * avatars on high-density screens; positions stay in the container's units.
+   */
+  readonly displayScale?: number;
+  /**
+   * The figure the atlas draws (default `blob`). Pass the atlas's own
+   * figure, so name tags sit on the right heads and walks step in time.
+   */
+  readonly figure?: Figure;
 }
 
 /** The crowd. */
@@ -74,6 +93,8 @@ interface Entry<TSprite extends PixiSprite> {
   readonly tag: OverlaySlot<TSprite>;
   readonly bubble: OverlaySlot<TSprite>;
   emoteAt: number;
+  /** A baked frame has been shown (while a new look bakes, the old one stays instead of the silhouette). */
+  hasFrame: boolean;
   live: PixiAvatar<TSprite> | null;
   body: BodyPose | null;
   readonly anim: Animator;
@@ -81,6 +102,8 @@ interface Entry<TSprite extends PixiSprite> {
 
 const EMOTE_MS = 2500;
 const CYCLE: Readonly<Partial<Record<BodyPose, number>>> = { walk: 520, run: 320, dance: 900, jump: 700, cheer: 600, idle: 2400 };
+/** The walker's shorter legs step quicker. */
+const WALKER_CYCLE: Readonly<Partial<Record<BodyPose, number>>> = { ...CYCLE, walk: 440, run: 300, idle: 2800 };
 
 /** A crowd over an atlas: `createCrowd(pixi, { atlas, container })`. */
 export function createCrowd<TTexture extends PixiTexture, TSprite extends PixiSprite<TTexture>, TRectangle extends PixiRectangle>(
@@ -88,8 +111,14 @@ export function createCrowd<TTexture extends PixiTexture, TSprite extends PixiSp
   opts: CrowdOptions<NoInfer<TSprite>>,
 ): AvatarCrowd {
   const { atlas, container } = opts;
+  const overlayLayer = opts.overlays ?? container;
+  const displayScale = opts.displayScale ?? 1;
   container.sortableChildren = true;
+  overlayLayer.sortableChildren = true;
   const liveMax = opts.liveMax ?? 6;
+  const figure = opts.figure ?? 'blob';
+  const cycles = figure === 'walker' ? WALKER_CYCLE : CYCLE;
+  const [, liveTop, , liveHeight] = frameBox({ frame: 'full', figure });
   const entries = new Map<string, Entry<TSprite>>();
   const pageTextures: TTexture[] = [];
   const frameTextures = new Map<string, TTexture>();
@@ -101,7 +130,7 @@ export function createCrowd<TTexture extends PixiTexture, TSprite extends PixiSp
     const key = `${toCode(look)}|${body}|${status ?? ''}`;
     let plateY = nameplates.get(key);
     if (plateY === undefined) {
-      plateY = layout(look, { pose: { body, status } }).nameplate.y;
+      plateY = layout(look, { figure, pose: { body, status } }).nameplate.y;
       nameplates.set(key, plateY);
     }
     return plateY;
@@ -126,11 +155,6 @@ export function createCrowd<TTexture extends PixiTexture, TSprite extends PixiSp
     return out;
   };
 
-  const silhouette = (): TTexture | null => {
-    const frame = atlas.frame({ look: null });
-    return frame ? textureFor(frame.page, frame.x, frame.y, frame.w, frame.h) : null;
-  };
-
   const textureFor = (page: number, left: number, top: number, w: number, h: number): TTexture | null => {
     const sources = atlas.sources;
     while (pageTextures.length < sources.length) {
@@ -169,7 +193,7 @@ export function createCrowd<TTexture extends PixiTexture, TSprite extends PixiSp
       }
       if (!sprite) {
         sprite = new pixi.Sprite(made.texture);
-        container.addChild(sprite);
+        overlayLayer.addChild(sprite);
       }
       slot.sprite = sprite;
       sprite.texture = made.texture;
@@ -204,7 +228,7 @@ export function createCrowd<TTexture extends PixiTexture, TSprite extends PixiSp
       const sprite = new pixi.Sprite();
       container.addChild(sprite);
       entries.set(key, {
-        member, sprite, tag: { sprite: null, key: '' }, bubble: { sprite: null, key: '' }, emoteAt: member.emote ? -1 : 0, live: null, body: null,
+        member, sprite, tag: { sprite: null, key: '' }, bubble: { sprite: null, key: '' }, emoteAt: member.emote ? -1 : 0, hasFrame: false, live: null, body: null,
         anim: animator(member.look, { seed: key }),
       });
     },
@@ -234,7 +258,7 @@ export function createCrowd<TTexture extends PixiTexture, TSprite extends PixiSp
         const isEmoting = m.emote !== undefined && t - entry.emoteAt < EMOTE_MS;
         if (liveSet.has(entry)) {
           if (!entry.live) {
-            entry.live = pixiAvatar(pixi, m.look, { frame: 'full', size: 64, rim: true, shadow: false, animator: entry.anim });
+            entry.live = pixiAvatar(pixi, m.look, { frame: 'full', figure, size: 64, rim: true, shadow: false, animator: entry.anim });
             container.addChild(entry.live.view);
           }
           entry.sprite.visible = false;
@@ -243,9 +267,9 @@ export function createCrowd<TTexture extends PixiTexture, TSprite extends PixiSp
             entry.body = body;
             entry.anim.setBody(body, { at: t });
           }
-          entry.live.update({ ...entry.anim.pose(t), body, status: m.status ?? null, phase: (t / (CYCLE[body] ?? 600)) % 1 });
+          entry.live.update({ ...entry.anim.pose(t), body, status: m.status ?? null, phase: (t / (cycles[body] ?? 600)) % 1 });
           view.x = m.x;
-          view.y = m.y - 32;
+          view.y = m.y + (figure === 'walker' ? (liveTop + liveHeight / 2) * (64 / liveHeight) : -32);
           view.zIndex = m.y;
           view.visible = true;
         } else {
@@ -254,22 +278,25 @@ export function createCrowd<TTexture extends PixiTexture, TSprite extends PixiSp
           }
           const frame = atlas.frame({
             look: m.look, facing: m.facing ?? 'S', body, status: m.status ?? null,
-            phase: (t / (CYCLE[body] ?? 600)) % 1, face: isEmoting ? 'happy' : 'neutral',
+            phase: (t / (cycles[body] ?? 600)) % 1, face: isEmoting ? 'happy' : 'neutral',
           });
-          const tex = frame ? textureFor(frame.page, frame.x, frame.y, frame.w, frame.h) : silhouette();
+          // Until its first frame bakes, a member shows the silhouette, anchored and scaled like a frame.
+          const shown = frame ?? (entry.hasFrame ? null : atlas.frame({ look: null }));
+          entry.hasFrame ||= frame !== null;
+          const tex = shown ? textureFor(shown.page, shown.x, shown.y, shown.w, shown.h) : null;
           if (tex) {
             entry.sprite.texture = tex;
             entry.sprite.visible = true;
           }
-          if (frame) {
-            entry.sprite.anchor.set(frame.footX / frame.w, frame.footY / frame.h);
-            entry.sprite.scale.x = frame.mirror ? -1 : 1;
+          if (shown) {
+            entry.sprite.anchor.set(shown.footX / shown.w, shown.footY / shown.h);
+            entry.sprite.scale.set(shown.mirror ? -displayScale : displayScale, displayScale);
           }
           entry.sprite.x = m.x;
           entry.sprite.y = m.y;
           entry.sprite.zIndex = m.y;
         }
-        const top = m.y + nameplateY(m.look, body, m.status ?? null) * (entry.live?.view.visible === true ? 64 / 206 : atlas.scale);
+        const top = m.y - (m.tagLift ?? 0) + nameplateY(m.look, body, m.status ?? null) * (entry.live?.view.visible === true ? 64 / liveHeight : atlas.scale * displayScale);
         const tagKey = m.name && !m.tagHidden ? `tag:${m.name}:${m.friend ? 1 : 0}:${m.you ? 1 : 0}` : '';
         placeOverlay(entry.tag, tagKey, () => (m.name ? overlays.nameTag({ name: m.name, friend: m.friend === true, you: m.you === true }) : null), m.x, top);
         const bubbleKey = isEmoting && m.emote ? `emote:${m.emote}` : m.reaction ? `react:${m.reaction}` : m.activity ? `act:${m.activity}` : '';

package/src/avatar/atlas.ts

@@ -11,7 +11,8 @@ import { toCode, toLook } from './look-like';
 import { defaultLayer } from './outputs/canvas';
 import { paintNodes, type Ctx2D } from './outputs/canvas-paint';
 import { composeAvatar } from './render/compose';
-import type { BodyPose, Facing, LookLike, StatusProp } from './render/types';
+import { WALKER_FULL } from './render/frame';
+import type { BodyPose, Facing, Figure, LookLike, StatusProp } from './render/types';
 
 /** What to bake. */
 export interface AtlasKey {
@@ -52,6 +53,8 @@ export interface AtlasOptions {
   readonly scale?: number;
   /** The light rim for dark floors (default on). */
   readonly rim?: boolean;
+  /** The figure every frame draws (default `blob`); worlds use `walker`. */
+  readonly figure?: Figure;
   /** Makes page canvases (tests, workers); default an `OffscreenCanvas` or DOM canvas. */
   readonly makeCanvas?: (size: number) => { readonly canvas: CanvasImageSource; readonly ctx: Ctx2D } | null;
 }
@@ -70,6 +73,8 @@ const MIRRORED: Readonly<Partial<Record<Facing, Facing>>> = { W: 'E', SW: 'SE',
 const STEPS: Readonly<Partial<Record<BodyPose, number>>> = { walk: 8, run: 8, idle: 4, dance: 8, jump: 6, cheer: 6 };
 /** The rig box every frame bakes: wide enough for hats, props and the rim. */
 const BOX = { x: -90, y: -210, w: 180, h: 226 };
+/** The walker's box: its full frame plus a margin for the rim. */
+const WALKER_BOX = { x: WALKER_FULL[0] + 4, y: WALKER_FULL[1] - 2, w: WALKER_FULL[2] - 8, h: WALKER_FULL[3] + 2 };
 
 /** The atlas. */
 export class AvatarAtlas {
@@ -77,6 +82,8 @@ export class AvatarAtlas {
   readonly scale: number;
   private readonly maxPages: number;
   private readonly rim: boolean;
+  private readonly figure: Figure;
+  private readonly box: typeof BOX;
   private readonly makeCanvas: NonNullable<AtlasOptions['makeCanvas']>;
   private readonly pages: Page[] = [];
   private readonly frames = new Map<string, AtlasFrame & { readonly version: number }>();
@@ -90,6 +97,8 @@ export class AvatarAtlas {
     this.maxPages = opts.maxPages ?? 4;
     this.scale = opts.scale ?? 0.32;
     this.rim = opts.rim ?? true;
+    this.figure = opts.figure ?? 'blob';
+    this.box = this.figure === 'walker' ? WALKER_BOX : BOX;
     this.makeCanvas = opts.makeCanvas ?? ((size) => defaultLayer(size, size));
   }
 
@@ -195,8 +204,9 @@ export class AvatarAtlas {
 
   private bakeOne(id: string, key: AtlasKey): boolean {
     const scale = key.scale ?? this.scale;
-    const w = Math.ceil(BOX.w * scale) + 2;
-    const h = Math.ceil(BOX.h * scale) + 2;
+    const box = this.box;
+    const w = Math.ceil(box.w * scale) + 2;
+    const h = Math.ceil(box.h * scale) + 2;
     const spot = this.place(w, h);
     const page = spot ? this.pages[spot.page] : undefined;
     if (!spot || !page) {
@@ -208,14 +218,14 @@ export class AvatarAtlas {
     const phase = (Math.floor(((key.phase ?? 0) % 1) * steps) + 0.5) / steps;
     const face: Expression = key.face ?? 'neutral';
     const { nodes } = composeAvatar(toLook(key.look), {
-      frame: 'full', facing, rim: this.rim, shadow: false, pose: { expression: face, body, phase, status: key.status ?? null },
+      frame: 'full', figure: this.figure, facing, rim: this.rim, shadow: false, pose: { expression: face, body, phase, status: key.status ?? null },
     });
     // Paint into a frame-sized scratch canvas (so the rim's layer is small too), then stamp it on the page.
     const scratch = defaultLayer(w, h);
     if (!scratch) {
       return false;
     }
-    scratch.ctx.translate(1 - BOX.x * scale, 1 - BOX.y * scale);
+    scratch.ctx.translate(1 - box.x * scale, 1 - box.y * scale);
     scratch.ctx.scale(scale, scale);
     paintNodes(scratch.ctx, nodes, defaultLayer);
     page.ctx.clearRect(spot.x, spot.y, w, h);
@@ -224,7 +234,7 @@ export class AvatarAtlas {
     this.latestByLook.set(toCode(key.look), id);
     this.frames.set(id, {
       page: spot.page, source: page.canvas, x: spot.x, y: spot.y, w, h,
-      footX: 1 - BOX.x * scale, footY: 1 - BOX.y * scale, mirror: false, version: page.version,
+      footX: 1 - box.x * scale, footY: 1 - box.y * scale, mirror: false, version: page.version,
     });
     return true;
   }

package/src/avatar/layout.ts

@@ -8,7 +8,7 @@ import type { Anchor, Facing, LookDir, LookLike, Point, Pose, RenderOptions } fr
  * bubbles, props and world objects with these, never with magic numbers.
  * Rig units (a 100-unit head), feet at (0, 0), y down.
  */
-export function layout(like: LookLike, opts: Pick<RenderOptions, 'facing' | 'view' | 'pose'> = {}): Readonly<Record<Anchor, Point>> {
+export function layout(like: LookLike, opts: Pick<RenderOptions, 'facing' | 'view' | 'pose' | 'figure'> = {}): Readonly<Record<Anchor, Point>> {
   return composeAvatar(toLook(like), { frame: 'full', ...opts }).anchors;
 }
 

package/src/avatar/outputs/canvas.ts

@@ -6,7 +6,7 @@
  */
 import { toLook } from '../look-like';
 import { composeAvatar } from '../render/compose';
-import { FRAMES, frameOf, framed, pixelSize } from '../render/frame';
+import { frameBox, framed, pixelSize } from '../render/frame';
 import type { LookLike, RenderOptions } from '../render/types';
 import type { SceneNode } from '../scene';
 import { paintNodes, type Ctx2D, type LayerFactory } from './canvas-paint';
@@ -36,7 +36,7 @@ export interface CanvasPlacement extends RenderOptions {
 
 /** Paints scene nodes with rig space mapped to the frame box at (x, y). */
 export function paintFramed(ctx: Ctx2D, nodes: readonly SceneNode[], opts: CanvasPlacement): void {
-  const [fx, fy] = FRAMES[frameOf(opts)];
+  const [fx, fy] = frameBox(opts);
   const { scale } = pixelSize(opts);
   ctx.save();
   ctx.translate(opts.x, opts.y);

package/src/avatar/outputs/svg.ts

@@ -8,7 +8,7 @@ import type { AvatarLook } from '@diffenderfer-games/hub-contract/avatar';
 import { n } from '../geom';
 import { toLook } from '../look-like';
 import { composeAvatar, type Composed } from '../render/compose';
-import { FRAMES, frameOf, framed, pixelSize } from '../render/frame';
+import { frameBox, framed, pixelSize } from '../render/frame';
 import type { LookLike, RenderOptions } from '../render/types';
 import { escapeXml, sceneToSvg } from './svg-markup';
 
@@ -25,7 +25,7 @@ export function nextPrefix(opts: RenderOptions): string {
 
 /** The `<svg>` for an already composed avatar. */
 export function svgFromComposed(composed: Composed, look: AvatarLook | null, opts: RenderOptions): string {
-  const [left, top, w, h] = FRAMES[frameOf(opts)];
+  const [left, top, w, h] = frameBox(opts);
   const { width, height } = pixelSize(opts);
   const { body, defs } = sceneToSvg(framed(composed.nodes, look, opts), nextPrefix(opts));
   const a11y = opts.title ? ` role="img" aria-label="${escapeXml(opts.title)}"` : ' aria-hidden="true"';

package/src/avatar/render/body.ts

@@ -109,8 +109,8 @@ export function bodyLayout(c: Colours, pose: BodyPose, phi: number, phase: numbe
 }
 
 /** The soft ground shadow at the feet (shrinks while lifted). */
-export function groundShadow(lift: number): SceneNode {
+export function groundShadow(lift: number, width = 36): SceneNode {
   const k = Math.max(0.5, 1 - lift / 40);
-  return ellipse(0, 0, 36 * k, 8 * k, { fill: '#000000', opacity: 0.3 });
+  return ellipse(0, 0, width * k, (width / 4.5) * k, { fill: '#000000', opacity: 0.3 });
 }
 

package/src/avatar/render/compose.ts

@@ -10,15 +10,17 @@ import { currentArt } from '../art-store';
 import { EXPRESSIONS } from '../face';
 import { n, type Warp } from '../geom';
 import { g, path, rect, rot, sc, tr, type Clip, type SceneNode } from '../scene';
-import { bodyLayout, groundShadow } from './body';
+import { bodyLayout, groundShadow, type BodyLayout } from './body';
 import { accessoryColour, lookColours, tones, type Colours } from './colours';
 import { HEAD_PATH, LINE, paintShapes, SKULL_R, turnWarp, type Ctx } from './context';
 import { FRAME_BLACK, glasses, goggles, gogglesStrapBack, type LensGlass } from './eyewear';
 import { brow, eye } from './eyes';
 import { cheeks, ears, head, type EarExtra } from './head';
 import { extras, mouth, nose } from './mouth';
+import { isWalker } from './frame';
 import { crown, handProp, headset } from './props';
-import type { Anchor, Facing, Point, Pose, RenderOptions } from './types';
+import type { Anchor, BodyPose, Facing, Point, Pose, RenderOptions } from './types';
+import { walkerLayout, walkerSilhouette } from './walker';
 
 /** The lens tint drawn with a mirror finish. */
 const MIRROR_TINT = 'p:lens-mirror';
@@ -249,6 +251,16 @@ function anchorsFor(headX: number, headY: number, top: number, prop: Point, mirr
   };
 }
 
+/** The body for a figure: its layout, where the head centre goes, and the head's scale. */
+function figureLayout(c: Colours, opts: RenderOptions, pose: BodyPose, phi: number, angle: number, phase: number): { readonly b: BodyLayout; readonly headY: number; readonly headScale: number } {
+  if (isWalker(opts)) {
+    const walker = walkerLayout(c, pose, angle, phase);
+    return { b: walker, headY: walker.headY, headScale: walker.headScale };
+  }
+  const b = bodyLayout(c, pose, phi, phase, opts.stool === true);
+  return { b, headY: HEAD_Y + b.headDy, headScale: 1 };
+}
+
 /** Composes a look (or `null` for the silhouette) with a pose. */
 export function composeAvatar(look: AvatarLook | null, opts: RenderOptions = {}): Composed {
   const art = currentArt();
@@ -257,6 +269,10 @@ export function composeAvatar(look: AvatarLook | null, opts: RenderOptions = {})
   const facing: Drawn = MIRROR[facingIn] ?? (facingIn === 'S' || facingIn === 'SE' || facingIn === 'E' || facingIn === 'NE' ? facingIn : 'N');
   const hasShadow = opts.shadow ?? opts.frame === 'full';
   if (!look || !art) {
+    if (isWalker(opts)) {
+      const shape = walkerSilhouette();
+      return { nodes: [...(hasShadow ? [groundShadow(0, 18)] : []), ...shape.nodes], anchors: anchorsFor(0, shape.headY, shape.top, { x: 0, y: -40 }, 1) };
+    }
     return { nodes: silhouette(hasShadow), anchors: anchorsFor(0, HEAD_Y, HEAD_Y - 60, { x: 0, y: -30 }, 1) };
   }
   const pose = opts.pose ?? {};
@@ -272,19 +288,20 @@ export function composeAvatar(look: AvatarLook | null, opts: RenderOptions = {})
     c: parts.c, face, gaze, phi: (angle + gaze.x * 11) * DEG, dy: gaze.y * 3,
     blink: pose.blink ?? 0, talk: pose.talk ?? 0,
   };
-  const b = bodyLayout(parts.c, bodyPose, ctx.phi, pose.phase ?? 0.25, opts.stool === true);
+  const { b, headY: bodyHeadY, headScale } = figureLayout(parts.c, opts, bodyPose, ctx.phi, angle, pose.phase ?? 0.25);
   const headX = b.headDx + (pose.bob?.x ?? 0);
-  const headY = HEAD_Y + b.headDy + (pose.bob?.y ?? 0);
+  const headY = bodyHeadY + (pose.bob?.y ?? 0);
   const tilt = face.headTilt + b.tilt + (pose.tilt ?? 0);
   const sq = face.squash + (pose.squash ?? 0);
   const drawn = isBack ? backHead(ctx, parts, isPlaying, status, angle) : frontHead(ctx, parts, isPlaying, status, angle, gaze.x);
   const headNodes = drawn.head;
-  const top = headY - 50 - Math.max(parts.hair?.top ?? 0, parts.hat?.top ?? 0);
+  const top = headY - (50 + Math.max(parts.hair?.top ?? 0, parts.hat?.top ?? 0)) * headScale;
   if (status === 'crown') {
     headNodes.push(...crown(Math.max(parts.hair?.top ?? 0, parts.hat?.top ?? 0)));
   }
-  const handProps = status && !isBack ? handProp(status, b.prop.x, b.prop.y, parts.c.body, parts.c.bodyInk) : [];
-  const headTf = [tr(headX, headY), rot(tilt), sc(1 + sq, 1 - sq)];
+  const props = status && !isBack ? handProp(status, b.prop.x, b.prop.y, parts.c.body, parts.c.bodyInk) : [];
+  const handProps = headScale === 1 || props.length === 0 ? props : [g(props, { tf: [tr(b.prop.x, b.prop.y), sc(headScale * 1.1), tr(-b.prop.x, -b.prop.y)] })];
+  const headTf = [tr(headX, headY), rot(tilt), sc((1 + sq) * headScale, (1 - sq) * headScale)];
   const character: SceneNode[] = [
     ...b.behind,
     ...(drawn.behindBody.length > 0 ? [g(drawn.behindBody, { tf: headTf })] : []),
@@ -294,7 +311,7 @@ export function composeAvatar(look: AvatarLook | null, opts: RenderOptions = {})
   ];
   const lifted = b.lift > 0 ? [g(character, { tf: [tr(0, -b.lift)] })] : character;
   const rimmed = opts.rim ? [g(lifted, { rim: true })] : lifted;
-  const all: SceneNode[] = [...(hasShadow ? [groundShadow(b.lift)] : []), ...rimmed];
+  const all: SceneNode[] = [...(hasShadow ? [groundShadow(b.lift, headScale === 1 ? 36 : 18)] : []), ...rimmed];
   const mirror = isMirrored ? -1 : 1;
   return {
     nodes: isMirrored ? [g(all, { tf: [sc(-1, 1)] })] : all,

package/src/avatar/render/frame.ts

@@ -18,6 +18,19 @@ export const FRAMES: Readonly<Record<Frame, Box>> = {
   full: [-86, -196, 172, 206],
 };
 
+/** The walker's full frame: a smaller head, and room for feet hanging below a seat. */
+export const WALKER_FULL: Box = [-60, -176, 120, 214];
+
+/** True when options draw the walker figure (full frames only). */
+export function isWalker(opts: RenderOptions): boolean {
+  return opts.figure === 'walker' && frameOf(opts) === 'full';
+}
+
+/** The box options draw, in rig units. */
+export function frameBox(opts: RenderOptions): Box {
+  return isWalker(opts) ? WALKER_FULL : FRAMES[frameOf(opts)];
+}
+
 /** The site panel colour behind badges. */
 export const PANEL = '#11141c';
 
@@ -28,7 +41,7 @@ export function frameOf(opts: RenderOptions): Frame {
 
 /** Output pixel size for a frame (the longer edge is `size`). */
 export function pixelSize(opts: RenderOptions): { readonly width: number; readonly height: number; readonly scale: number } {
-  const [, , w, h] = FRAMES[frameOf(opts)];
+  const [, , w, h] = frameBox(opts);
   const size = opts.size ?? 48;
   const scale = size / Math.max(w, h);
   return { width: w * scale, height: h * scale, scale };
@@ -41,7 +54,7 @@ export function ringColour(look: AvatarLook | null): string {
 
 /** Wraps the avatar's nodes in the frame's background (a badge clips to the rounded panel). */
 export function framed(nodes: readonly SceneNode[], look: AvatarLook | null, opts: RenderOptions): SceneNode[] {
-  const [left, top, w, h] = FRAMES[frameOf(opts)];
+  const [left, top, w, h] = frameBox(opts);
   const background = opts.background ?? (frameOf(opts) === 'head' ? 'badge' : 'none');
   if (background === 'badge') {
     const r = w * 0.24;

package/src/avatar/render/types.ts

@@ -17,6 +17,13 @@ export type StatusProp = 'goggles' | 'headset' | 'cards' | 'controller' | 'troph
 /** How much of the character a frame shows. */
 export type Frame = 'head' | 'bust' | 'full';
 
+/**
+ * The full-body figure: `blob` (the default, a big head on a gumdrop) or
+ * `walker` (a small full-body character with legs and arms, for worlds and
+ * crowds). Head and bust frames always draw the blob.
+ */
+export type Figure = 'blob' | 'walker';
+
 /** A point in rig units. */
 export interface Point {
   readonly x: number;
@@ -73,6 +80,8 @@ export interface RenderOptions {
   readonly shadow?: boolean;
   /** Draws a stool under `sit` and `play` (pose sheets and previews). */
   readonly stool?: boolean;
+  /** The full frame's figure (default `blob`). */
+  readonly figure?: Figure;
 }
 
 /** Anything a render accepts: a look, an `AV1…` code, or an object carrying a code. */

package/src/avatar/render/walker-parts.ts

@@ -0,0 +1,121 @@
+/**
+ * The walker's drawing parts (`figure: 'walker'`): limbs as outlined round
+ * strokes, the shirt, trousers and shoes. Colours come from the look: the
+ * shirt is the body colour, the trousers and shoes are picked from the body
+ * colour so they always stand apart from the shirt.
+ */
+import { lightness, outline, shade } from '../colour';
+import { Path } from '../geom';
+import { ellipse, g, path, sc, tr, type SceneNode } from '../scene';
+import type { Colours } from './colours';
+import { LINE } from './context';
+
+/** A point in rig units. */
+export type Vec = readonly [number, number];
+
+/** The walker's clothes, derived from a look's colours. */
+export interface Outfit {
+  readonly trousers: string;
+  readonly trousersInk: string;
+  readonly shoes: string;
+  readonly shoesInk: string;
+}
+
+const TROUSERS = ['#34466e', '#2e323f', '#6a5642', '#4a3a60', '#3c5a4c', '#5a3a3a'] as const;
+const SHOES = ['#2c2430', '#f1ece2', '#5a3a2a', '#2c2430'] as const;
+
+/** A small stable hash of a colour string. */
+function hashOf(text: string): number {
+  let hash = 7;
+  for (let i = 0; i < text.length; i++) {
+    hash = (hash * 31 + text.charCodeAt(i)) >>> 0;
+  }
+  return hash;
+}
+
+/** Trousers and shoes for a shirt colour: a trouser tone at least a little lighter or darker than the shirt. */
+export function outfitFor(c: Colours): Outfit {
+  const hash = hashOf(c.body);
+  const shirt = lightness(c.body);
+  let trousers: string = TROUSERS[hash % TROUSERS.length] ?? TROUSERS[0];
+  for (let i = 1; i < TROUSERS.length && Math.abs(lightness(trousers) - shirt) < 0.12; i++) {
+    trousers = TROUSERS[(hash + i) % TROUSERS.length] ?? trousers;
+  }
+  const shoes: string = SHOES[(hash >>> 4) % SHOES.length] ?? SHOES[0];
+  return { trousers, trousersInk: outline(trousers), shoes, shoesInk: outline(shoes) };
+}
+
+/** A polyline as a path `d`. */
+function polyline(points: readonly Vec[]): string {
+  const line = new Path();
+  points.forEach(([px, py], i) => (i === 0 ? line.m(px, py) : line.l(px, py)));
+  return line.d();
+}
+
+/** A limb: a round stroke with a tonal outline under it. */
+export function limb(points: readonly Vec[], width: number, fill: string, ink: string): SceneNode[] {
+  const d = polyline(points);
+  return [
+    path(d, { fill: 'none', stroke: ink, sw: width + LINE * 1.3, cap: 'round' }),
+    path(d, { fill: 'none', stroke: fill, sw: width, cap: 'round' }),
+  ];
+}
+
+/** A shoe at a foot point, nudged along the facing. */
+export function shoe(at: Vec, forward: Vec, o: Outfit): SceneNode {
+  return ellipse(at[0] + forward[0] * 2.4, at[1] + forward[1] * 1.6 - 1.5, 6.2 + Math.abs(forward[0]) * 1.4, 3.8, { fill: o.shoes, stroke: o.shoesInk, sw: LINE * 0.8 });
+}
+
+/** A hand. */
+export function hand(c: Colours, at: Vec): SceneNode {
+  return ellipse(at[0], at[1], 4.3, 4.3, { fill: c.skin, stroke: c.skinInk, sw: LINE * 0.8 });
+}
+
+/** The torso's outline: shoulders at `top`, the hem at `hem`, `w` its width factor (narrower when turned). */
+export function torsoPath(w: number, top: number, hem: number): string {
+  const shoulder = 17.5 * w;
+  const waist = 14.5 * w;
+  const hip = 15.5 * w;
+  const mid = (top + hem) / 2 + 4;
+  return new Path()
+    .m(-shoulder, top + 6)
+    .c(-shoulder, top - 1, -shoulder + 5, top - 3, -shoulder * 0.35, top - 3)
+    .l(shoulder * 0.35, top - 3)
+    .c(shoulder - 5, top - 3, shoulder, top - 1, shoulder, top + 6)
+    .l(waist, mid)
+    .l(hip, hem)
+    .q(0, hem + 3, -hip, hem)
+    .l(-waist, mid)
+    .z()
+    .d();
+}
+
+/** The shirt: a shade base, the lit front, the outline, and the neckline (front) or collar (back). */
+export function shirt(c: Colours, w: number, top: number, hem: number, lean: number, isBack: boolean): SceneNode[] {
+  const d = torsoPath(w, top, hem);
+  const cy = (top + hem) / 2;
+  const nodes: SceneNode[] = [
+    path(d, { fill: c.bodyShade }),
+    g([path(d, { fill: c.body })], { tf: [tr(-1.5 - lean * 2, cy - 1.5), sc(0.9, 0.94), tr(0, -cy)] }),
+    path(`M${String(-15 * w)} ${String(hem - 2.5)}Q0 ${String(hem + 0.5)} ${String(15 * w)} ${String(hem - 2.5)}`, { fill: 'none', stroke: shade(c.bodyShade), sw: 2.2, opacity: 0.7 }),
+    path(d, { fill: 'none', stroke: c.bodyInk, sw: LINE }),
+  ];
+  const neckX = lean * 7;
+  if (isBack) {
+    nodes.push(path(`M${String(neckX - 6)} ${String(top - 2)}Q${String(neckX)} ${String(top + 1.5)} ${String(neckX + 6)} ${String(top - 2)}`, { fill: 'none', stroke: c.bodyShade, sw: 3 }));
+  } else {
+    nodes.push(path(`M${String(neckX - 6 * w)} ${String(top - 2.6)}Q${String(neckX)} ${String(top + 6)} ${String(neckX + 6 * w)} ${String(top - 2.6)}Z`, { fill: c.skin, stroke: c.bodyInk, sw: LINE * 0.8 }));
+  }
+  return nodes;
+}
+
+/** The seat of the trousers joining the legs under the hem. */
+export function hips(o: Outfit, w: number, hipY: number): SceneNode {
+  const half = 12 * w;
+  return path(new Path().m(-half, hipY - 4).l(half, hipY - 4).l(half, hipY + 4).q(0, hipY + 9, -half, hipY + 4).z().d(), { fill: o.trousers, stroke: o.trousersInk, sw: LINE * 0.8 });
+}
+
+/** The neck under the head. */
+export function neck(c: Colours, top: number, dx: number): SceneNode {
+  return path(new Path().m(dx - 4.5, top - 10).l(dx + 4.5, top - 10).l(dx + 4.5, top).l(dx - 4.5, top).z().d(), { fill: c.skinShade, stroke: c.skinInk, sw: LINE * 0.6 });
+}