@v12-engine/create 0.1.0 → 0.4.0

package/starters/examples/src/examples/construction/looks.ts

@@ -0,0 +1,275 @@
+/**
+ * The construction examples on the client's side: how each building looks as it goes up (`UnitLook.construction`:
+ * `motion`, `stages`, `working`, `done`, `cancelled`, `upgrade`), smoke and fire on a hurt one, the workers, and the
+ * buttons
+ */
+import type { ConstructionLook, GameClientApi, ModelDef, UnitLook } from '@v12-engine/client'
+import { presetFx } from '@v12-engine/client'
+import { builtSoFar } from '@v12-engine/engine'
+import { button, type CategoryLooks, type ExampleLook, readout, slider } from '../../shell/look'
+import { character, hold, ONE_HANDED, person } from '../common/looks'
+import { buildTown, C, callOff, hurtAll, progressAll, relay, repairAll, sendWorkers, setSpeed, stopWork, upgrade } from './index'
+
+/** A model of the shared art made `width` across: its size at scale 1 (across, up, deep) is in the assets' `manifest.json` */
+const sized = (src: string, size: [number, number, number], width: number, own: Partial<ModelDef> = {}): ModelDef => ({
+	src,
+	scale: width / Math.max(size[0], size[2]),
+	...own
+})
+
+const WOOD: [number, number, number] = [0.5, 0.36, 0.22]
+
+/** At each blow of a worker's axe: sparks off it, and a puff of sawdust */
+const WORKING: ConstructionLook['working'] = { fx: 'spark-burst', at: 'handslot.r', params: { count: 8, size: 0.5 } }
+/** Finished: a cloud of dust, sparkles over it */
+const DONE: ConstructionLook['done'] = { fx: 'dust' }
+/** Called off: dust, and it folds back into the ground */
+const CANCELLED: ConstructionLook['cancelled'] = { fx: 'dust', look: 'fold' }
+
+/** Scaffolding of the shared art (`dungeon-kit`), 4 across at scale 1, made `width` across */
+const scaffold = (name: string, width: number): ModelDef => ({ src: `dungeon-kit/${name}.glb`, scale: width / 4 })
+
+/** Going up in scaffolding: dug earth, low then high scaffolding, then the building itself rising inside the last of it */
+const staged = (width: number): ConstructionLook => ({
+	stages: [
+		{ at: 0, model: sized('rts/farm_dirt.glb', [5.4, 0.2, 4.3], width), fx: 'dust' },
+		{ at: 0.15, model: scaffold('scaffold_low_railing', width), fx: 'dust' },
+		{ at: 0.35, model: scaffold('scaffold_medium_railing', width), fx: 'dust' },
+		{ at: 0.6, model: scaffold('scaffold_high_railing', width), fx: 'dust' },
+		// a stage with no model is the building itself: from 80% on, the scaffolding gone
+		{ at: 0.8, fx: 'rubble-fall' }
+	],
+	motion: 'grow',
+	working: WORKING,
+	done: DONE,
+	cancelled: CANCELLED
+})
+
+/** A building of the shared art: its model, a box while it loads, smoke and fire as it is hurt, and how it goes up */
+const building = (height: number, model: ModelDef, box: [number, number, number], construction: ConstructionLook): UnitLook => ({
+	height,
+	model,
+	shapes: [{ shape: 'box', size: box, offset: [0, box[1] / 2, 0], color: WOOD }],
+	construction: { working: WORKING, done: DONE, cancelled: CANCELLED, ...construction },
+	damaged: [
+		{ below: 0.5, fx: 'smoke', params: { size: 1.2 } },
+		{ below: 0.25, fx: 'fire', params: { size: 1.3 } }
+	],
+	death: { collapse: { look: 'crumble', pieces: 24, dust: true } }
+})
+
+const looks: Record<string, UnitLook> = {
+	[C.worker]: {
+		height: 1.6,
+		model: character('barbarian', 0.6, { hold: [hold('axe_1handed')] }),
+		attacks: [ONE_HANDED],
+		shapes: person(1.6)
+	},
+	// grows up out of the ground, from a fifth of its height
+	[C.barracks]: building(2.6, sized('rts/barracks.glb', [3, 2.2, 3.2], 3), [2.6, 2, 2.6], { motion: 'grow' }),
+	// rises out of the ground whole, as if pushed up
+	[C.tower]: building(4.6, sized('rts/watch_tower.glb', [1.5, 4.4, 1.6], 1.9), [1.4, 4, 1.4], { motion: 'rise' }),
+	// fades in, from nearly see-through
+	[C.house]: building(2.6, sized('rts/house_3.glb', [2.7, 2.8, 2.4], 2.1), [1.8, 1.8, 1.8], { motion: 'fade' }),
+	// revealed from the ground up by a cut with a glowing edge, a cold blue
+	[C.temple]: building(5, sized('rts/temple_3.glb', [5.4, 5.4, 5.4], 3), [2.6, 3, 2.6], {
+		motion: 'reveal',
+		revealColor: [0.4, 0.75, 1],
+		revealEdge: 0.4,
+		done: { fx: 'sparkle' }
+	}),
+	// in scaffolding until near the end
+	[C.fortress]: building(4, sized('rts/wooden_fortress.glb', [6.6, 4.1, 5.9], 4), [3.6, 3, 3.6], staged(4)),
+	[C.farm]: building(2.6, sized('rts/farm.glb', [5.5, 3.9, 4.3], 3), [2.6, 1.6, 2.6], { motion: 'grow' }),
+	[C.mill]: building(4.5, sized('rts/windmill.glb', [4, 4.8, 2.8], 3), [2.4, 3.5, 2.4], { motion: 'rise' }),
+	[C.hall]: {
+		...building(3.6, sized('rts/town_center_2.glb', [3.8, 3.8, 3.7], 4), [3.6, 2.8, 3.6], staged(4)),
+		// upgraded: scaffolding round it by the upgrade's progress, the keep from 90%
+		construction: {
+			...staged(4),
+			upgrade: {
+				stages: [
+					{ at: 0, model: scaffold('scaffold_high_railing', 4.4), fx: 'dust' },
+					{ at: 0.9, fx: 'rubble-fall' }
+				]
+			}
+		}
+	},
+	[C.keep]: {
+		...building(3.4, sized('rts/castle.glb', [6.3, 2.8, 5.9], 4.2), [3.6, 2.8, 3.6], { motion: 'rise' }),
+		construction: {
+			upgrade: {
+				stages: [
+					{ at: 0, model: scaffold('scaffold_high_railing', 4.6), fx: 'dust' },
+					{ at: 0.9, fx: 'rubble-fall' }
+				]
+			}
+		}
+	},
+	[C.castle]: building(4.6, sized('rts/castle_fortress.glb', [6.4, 4.1, 5.9], 4.4), [3.8, 3.6, 3.8], { motion: 'rise' })
+}
+
+/**
+ * The camera over a point: how far back and how steeply, turned as it is. Farther than the player may zoom out (48
+ * cells), the limit is let out for this example: what it gives back puts it back
+ */
+function look(client: GameClientApi, x: number, z: number, distance: number, pitch = 50): () => void {
+	if (distance > client.camera.farthest) client.camera.setLimits({ max: distance })
+	client.camera.setPose({ x, z, distance, yaw: client.camera.pose().yaw, pitch: (pitch * Math.PI) / 180 })
+	return () => client.camera.setLimits({ max: 48 })
+}
+
+/** The buildings of the player's in the snapshot: each with how far it is built (1 for one that stands) */
+const buildings = (client: GameClientApi) =>
+	client.session
+		.snapshot()
+		.entities.filter((each) => each.type !== C.worker && each.health > 0 && each.owner === 1)
+		.map((each) => ({ ...each, built: builtSoFar(each) ?? 1 }))
+
+const percent = (share: number) => `${Math.round(share * 100)}%`
+
+const speedSlider = slider(
+	'Build speed',
+	{ min: 0.25, max: 6, step: 0.25, value: 1 },
+	(client, factor) => client.session.send(setSpeed.make({ factor })),
+	'How fast every site goes up, times its own build time: at 6 a building stands in seconds, at a quarter you can watch each stage of it.'
+)
+const again = (id: string) =>
+	button(
+		'Start again',
+		(client) => client.session.send(relay.make({ example: id })),
+		'Takes everything away and lays the scene out again as it started, the sites back at nothing.'
+	)
+
+const examples: Record<string, ExampleLook> = {
+	'construction-motions': {
+		controls: [
+			speedSlider,
+			again('construction-motions'),
+			readout(
+				'Built',
+				(client) =>
+					buildings(client)
+						.sort((a, b) => a.x - b.x)
+						.map((each) => percent(each.built))
+						.join(' · '),
+				'How far each site is built, left to right: grow, rise, fade, reveal, scaffolding.'
+			)
+		],
+		ready: (client) => look(client, 24, 23, 40, 40)
+	},
+	'construction-workers': {
+		controls: [
+			button(
+				'Send a worker',
+				(client) => client.session.send(sendWorkers.make({ count: 1 })),
+				'Sends one more idle worker to the fortress: the first worker counts whole, every other one half, so it goes up faster with each.'
+			),
+			button(
+				'Send them all',
+				(client) => client.session.send(sendWorkers.make({ count: 0 })),
+				'Sends every idle worker to the fortress at once: watch the percentage climb faster.'
+			),
+			button(
+				'Stop work',
+				(client) => client.session.send(stopWork.make({})),
+				'Every worker stops: the fortress stands where it got to, in its scaffolding, until someone works on it again.'
+			),
+			button(
+				'Cancel it',
+				(client) => client.session.send(callOff.make({})),
+				'Calls the fortress off, as its Cancel button would: it folds back into the ground in a cloud of dust.'
+			),
+			speedSlider,
+			again('construction-workers'),
+			readout('Fortress', (client) => {
+				const site = buildings(client)[0]
+				return site ? (site.built < 1 ? `${percent(site.built)} built` : 'finished') : 'none'
+			})
+		],
+		ready: (client) => look(client, 24, 22, 40, 42)
+	},
+	'construction-stages': {
+		controls: [
+			slider(
+				'Progress',
+				{ min: 0, max: 0.99, step: 0.01, value: 0.5 },
+				(client, share) => client.session.send(progressAll.make({ share })),
+				'Puts every site this far along: the scaffolding changes from low to medium to high, and past 80% the building itself shows.'
+			),
+			again('construction-stages'),
+			readout(
+				'Built',
+				(client) =>
+					buildings(client)
+						.sort((a, b) => a.x - b.x)
+						.map((each) => percent(each.built))
+						.join(' · '),
+				'How far each of the six is built, left to right.'
+			)
+		],
+		ready: (client) => look(client, 24, 24, 44, 38)
+	},
+	'construction-repair': {
+		controls: [
+			button(
+				'Repair it',
+				(client) => client.session.send(repairAll.make({})),
+				'Sends the three workers to mend the barracks: its health climbs, and the fire then the smoke go out as it passes a quarter and a half.'
+			),
+			button(
+				'Set it alight again',
+				(client) => client.session.send(hurtAll.make({ share: 0.12 })),
+				'A blast takes the barracks down to an eighth of its health: it smokes and burns again.'
+			),
+			readout('Health', (client) => {
+				const barracks = buildings(client)[0]
+				return barracks ? `${Math.round(barracks.health)} of ${barracks.maxHealth ?? 1200}` : 'gone'
+			})
+		],
+		ready: (client) => look(client, 24, 24, 34, 40)
+	},
+	'construction-upgrade': {
+		controls: [
+			button(
+				'Upgrade',
+				(client) => client.session.send(upgrade.make({})),
+				'Upgrades the town hall into a keep, or the keep into a castle: scaffolding goes up round it as the upgrade runs, and the new model shows near the end.'
+			),
+			speedSlider,
+			again('construction-upgrade'),
+			readout('Now', (client) => {
+				const standing = buildings(client)[0]
+				const names: Record<string, string> = { [C.hall]: 'Town hall', [C.keep]: 'Keep', [C.castle]: 'Castle' }
+				return standing ? (names[standing.type] ?? standing.type) : 'none'
+			})
+		],
+		ready: (client) => look(client, 24, 24, 36, 38)
+	},
+	'construction-town': {
+		controls: [
+			button(
+				'Build the town',
+				(client) => client.session.send(buildTown.make({})),
+				'Gives each worker its share of a town plan, a hall in the middle and houses, farms and towers round it: they walk to each site and build one after another.'
+			),
+			speedSlider,
+			again('construction-town'),
+			readout('Standing', (client) => {
+				const all = buildings(client)
+				return `${all.filter((each) => each.built >= 1).length} built · ${all.filter((each) => each.built < 1).length} going up`
+			})
+		],
+		ready: (client) => look(client, 24, 26, 60, 52)
+	}
+}
+
+export const category: CategoryLooks = {
+	looks: examples,
+	view: (view) => ({
+		...view,
+		units: { ...view.units, looks: { ...view.units?.looks, ...looks } },
+		// the ready-made effects these examples play, under what the game's view says of them: a view plays none it did not take
+		fx: { ...view.fx, defs: { ...presetFx(['dust', 'spark-burst', 'sparkle', 'rubble-fall', 'smoke', 'fire', 'explosion']), ...view.fx?.defs } }
+	})
+}

package/starters/examples/src/examples/custom-animation/bones.ts

@@ -0,0 +1,92 @@
+/**
+ * Bones turned in code, over what the clip poses: a head that looks at a point, an arm that reaches for one. The shared
+ * characters' bones are nodes of their model (`head`, `chest`, `upperarm.r`...), which the clip sets each frame as the
+ * scene is animated; turned after that (`scene.onAfterAnimationsObservable`), before the picture is drawn, they hold
+ * the clip's pose and the turn on top of it. Babylon alone, and the unit's model as the client draws it (`kit.model`)
+ */
+import { Vector3 } from '@babylonjs/core/Maths/math.vector.js'
+import { Space } from '@babylonjs/core/Maths/math.axis.js'
+import type { Scene } from '@babylonjs/core/scene.js'
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode.js'
+import type { GameClientApi } from '@v12-engine/client'
+import type { Vec2 } from '@v12-engine/engine'
+
+/** A bone of a unit's model by its name in the file, while the unit has a skeleton of its own: nothing before its model has loaded */
+export function boneOf(client: GameClientApi, id: number, name: string): TransformNode | undefined {
+	const model = client.renderer.kit.model(id)
+	if (!model?.animator) return undefined
+	// the model's nodes keep their names from the file, a copy's with what it was copied as before them
+	return model.root
+		.getChildTransformNodes(false)
+		.find((node) => node.name === name || node.name.endsWith(`.${name}`) || node.name.endsWith(`_${name}`))
+}
+
+/**
+ * Runs `pose` once the clips have posed the scene each frame, until what it gives back is called: where code turns
+ * bones over the clip's pose. Animations not evaluated in a frame (a frozen game) give it nothing to do but turn again
+ */
+export function afterClips(scene: Scene, pose: (dt: number) => void): () => void {
+	let last = performance.now()
+	const observer = scene.onAfterAnimationsObservable.add(() => {
+		const now = performance.now()
+		pose(Math.min((now - last) / 1000, 0.1))
+		last = now
+	})
+	return () => scene.onAfterAnimationsObservable.remove(observer)
+}
+
+/** Its place in the world now: its parents' moves of this frame taken in first (the clip moved them a moment ago) */
+export function worldOf(node: TransformNode): Vector3 {
+	const chain: TransformNode[] = []
+	for (let each: TransformNode | null = node; each; each = each.parent as TransformNode | null) chain.unshift(each)
+	for (const each of chain) each.computeWorldMatrix(true)
+	return node.getAbsolutePosition().clone()
+}
+
+/**
+ * Turns a bone in the world so that the way from `from` (a point on it, or its own place) to `along` points at
+ * `target` instead, by at most `most` radians, `share` of the way there: the step of an aim, and of a reach
+ */
+export function aimBone(bone: TransformNode, along: Vector3, target: Vector3, share = 1, most = Math.PI): void {
+	const from = worldOf(bone)
+	const now = along.subtract(from).normalize()
+	const want = target.subtract(from).normalize()
+	const axis = Vector3.Cross(now, want)
+	const length = axis.length()
+	if (length < 1e-5) return
+	const angle = Math.min(Math.acos(Math.max(-1, Math.min(1, Vector3.Dot(now, want)))), most) * share
+	bone.rotate(axis.scaleInPlace(1 / length), angle, Space.WORLD)
+}
+
+/** Turns a bone about the world's up by `yaw` and about the line to its right by `pitch`, radians: what a look is made of */
+export function turnBone(bone: TransformNode, yaw: number, pitch: number, facing: number): void {
+	if (yaw) bone.rotate(Vector3.Up(), yaw, Space.WORLD)
+	// to its right: across the way it faces once it has turned
+	if (pitch) bone.rotate(new Vector3(Math.cos(facing + yaw), 0, -Math.sin(facing + yaw)), pitch, Space.WORLD)
+}
+
+/** The point of the flat ground (height 0) under a pixel of the canvas, or nothing where the ray goes up into the sky */
+export function groundUnder(scene: Scene, x: number, y: number): Vec2 | undefined {
+	const ray = scene.createPickingRay(x, y, null, scene.activeCamera)
+	if (ray.direction.y > -1e-4) return undefined
+	const t = -ray.origin.y / ray.direction.y
+	return { x: ray.origin.x + ray.direction.x * t, z: ray.origin.z + ray.direction.z * t }
+}
+
+/**
+ * Where the pointer is over the scene's canvas, in its CSS pixels, kept as it moves (over the HUD too: what is over the
+ * canvas takes the pointer's events, the window hears them all); `stop` stops listening. Nothing before it first moves
+ */
+export function trackPointer(scene: Scene): { at?: { x: number; y: number }; stop(): void } {
+	const canvas = scene.getEngine().getRenderingCanvas()
+	const tracked: { at?: { x: number; y: number }; stop(): void } = { stop: () => window.removeEventListener('pointermove', moved) }
+	const moved = (event: PointerEvent) => {
+		const box = canvas?.getBoundingClientRect()
+		if (box) tracked.at = { x: event.clientX - box.left, y: event.clientY - box.top }
+	}
+	window.addEventListener('pointermove', moved)
+	return tracked
+}
+
+/** Eases `now` toward `to` at `rate` a second, the same however long the frame was */
+export const approach = (now: number, to: number, rate: number, dt: number): number => to + (now - to) * Math.exp(-rate * dt)

package/starters/examples/src/examples/custom-animation/index.ts

@@ -0,0 +1,190 @@
+/**
+ * The examples of moves made in code, on the rules' side (`ExampleCategory`): the units they move and what keeps those
+ * units busy. The rules only say where a unit goes; how it moves on the screen (a head that turns, a hop, a wobble,
+ * a bank into a turn) is the client's alone, in `./looks.ts`, and the same on every screen without being sent
+ */
+import { defineCommand, defineIds, type Game, type UnitTypeDef, type Vec2, type World, exactMath } from '@v12-engine/engine'
+import { ENEMY, PLAYER } from '../common/units'
+import { type ExampleCategory, exampleField } from '../define'
+
+/** The category's units */
+export const MOVE = defineIds(
+	'customAnimationKnight',
+	'customAnimationSlime',
+	'customAnimationWaddler',
+	'customAnimationJelly',
+	'customAnimationBrute',
+	'customAnimationGlider',
+	'customAnimationAdept'
+)
+
+const units: UnitTypeDef[] = [
+	// stands still: its head, its arm are the client's to turn
+	{ id: MOVE.customAnimationKnight, name: 'Knight', kind: 'unit', radius: 0.45, stats: { health: 500, moveSpeed: 0 }, sight: 6 },
+	{ id: MOVE.customAnimationSlime, name: 'Slime', kind: 'unit', radius: 0.4, stats: { health: 200, moveSpeed: 2.6 }, sight: 6 },
+	{ id: MOVE.customAnimationWaddler, name: 'Waddler', kind: 'unit', radius: 0.45, stats: { health: 200, moveSpeed: 2.2 }, sight: 6 },
+	// takes blows and heals them at once: what wobbles when it is hit
+	{ id: MOVE.customAnimationJelly, name: 'Jelly', kind: 'unit', radius: 0.6, stats: { health: 2000, healthRegen: 400, moveSpeed: 0 }, sight: 4 },
+	{
+		id: MOVE.customAnimationBrute,
+		name: 'Brute',
+		kind: 'unit',
+		radius: 0.5,
+		stats: { health: 800, attackDamage: 30, attackSpeed: 0.7, attackRange: 0.6, moveSpeed: 0 },
+		sight: 5,
+		attacks: [{ damagePoint: 0.4, acquisitionRange: 3 }]
+	},
+	{ id: MOVE.customAnimationGlider, name: 'Glider', kind: 'unit', radius: 0.6, flying: true, stats: { health: 300, moveSpeed: 7 }, sight: 10 },
+	{ id: MOVE.customAnimationAdept, name: 'Adept', kind: 'unit', radius: 0.45, stats: { health: 300, moveSpeed: 3 }, sight: 6 }
+]
+
+/** The middle of the examples' fields */
+const MIDDLE: Vec2 = { x: 24, z: 24 }
+
+/** A point a little way from the middle, a different one for each unit and each time, the same on every screen (the world's random) */
+const somewhere = (world: World, reach: number): Vec2 => {
+	const angle = world.rng.next() * Math.PI * 2
+	const away = Math.sqrt(world.rng.next()) * reach
+	return { x: MIDDLE.x + exactMath.cos(angle) * away, z: MIDDLE.z + exactMath.sin(angle) * away }
+}
+
+/** The way round the flight example's field: a figure of eight, which the glider follows for ever */
+export const FIGURE_EIGHT: Vec2[] = Array.from({ length: 16 }, (_, i) => {
+	const t = (i / 16) * Math.PI * 2
+	return { x: MIDDLE.x + exactMath.sin(t) * 14, z: MIDDLE.z + exactMath.sin(t * 2) * 7 }
+})
+
+/**
+ * What keeps the category's walkers walking, a few times a second: the slimes and waddlers to somewhere near the
+ * middle once they stand, and the glider on to the next point of its figure of eight as it nears the one it flies to
+ */
+const wandering = {
+	name: 'customAnimation.wandering',
+	every: 6,
+	update: (world: World) => {
+		for (const unit of world.units.values()) {
+			if (!unit.alive) continue
+			const type = unit.def.id
+			if (type === MOVE.customAnimationGlider) {
+				// the point it is nearest, and on to the one after: it never stops, and never turns back
+				const goal = unit.orders[0]?.init.point as Vec2 | undefined
+				if (goal && exactMath.hypot(goal.x - unit.pos.x, goal.z - unit.pos.z) > 3) continue
+				let near = 0
+				FIGURE_EIGHT.forEach((each, i) => {
+					if (
+						exactMath.hypot(each.x - unit.pos.x, each.z - unit.pos.z) <
+						exactMath.hypot(FIGURE_EIGHT[near]!.x - unit.pos.x, FIGURE_EIGHT[near]!.z - unit.pos.z)
+					)
+						near = i
+				})
+				unit.order('move', FIGURE_EIGHT[(near + 1) % FIGURE_EIGHT.length]!)
+				continue
+			}
+			if (
+				(type === MOVE.customAnimationSlime || type === MOVE.customAnimationWaddler || type === MOVE.customAnimationAdept) &&
+				!unit.orders.length &&
+				world.rng.next() < 0.25
+			)
+				unit.order('move', somewhere(world, type === MOVE.customAnimationAdept ? 6 : 10))
+		}
+	}
+}
+
+/** More adepts for the renderer example, each popping in where it is put */
+export const summon = defineCommand('customAnimation.summon', {}, (world, player) => {
+	for (let i = 0; i < 3; i++) world.spawn(MOVE.customAnimationAdept, { at: somewhere(world, 6), owner: player })
+})
+
+export const category: ExampleCategory = {
+	rules: (game: Game<any>) => {
+		for (const unit of units) game.unit(unit)
+		game.system(wandering)
+		game.command(summon)
+	},
+	examples: [
+		{
+			id: 'custom-animation-look-at',
+			category: 'custom-animation',
+			title: 'A head that follows the pointer',
+			summary:
+				'A knight whose head and chest turn to look at the ground under the pointer, over whatever clip it plays: its bones turned in code after the clip has posed them, every frame. Move the pointer about.',
+			tags: ['bones', 'look at', 'head', 'skeleton', 'pointer', 'procedural', 'onBeforeRender'],
+			start: (world) => world.spawn(MOVE.customAnimationKnight, { at: MIDDLE, owner: PLAYER, facing: Math.PI }),
+			source: ['examples/custom-animation/index.ts', 'examples/custom-animation/looks.ts', 'examples/custom-animation/bones.ts']
+		},
+		{
+			id: 'custom-animation-reach',
+			category: 'custom-animation',
+			title: 'Reaching for it',
+			summary:
+				'A knight reaches its sword arm for a glowing orb that floats about it: the upper and lower arm turned toward the orb each frame, as a simple IK does. Let the orb follow the pointer, or wander on its own.',
+			tags: ['IK', 'inverse kinematics', 'reach', 'bones', 'arm', 'procedural', 'aim'],
+			start: (world) => world.spawn(MOVE.customAnimationKnight, { at: MIDDLE, owner: PLAYER, facing: Math.PI }),
+			source: ['examples/custom-animation/index.ts', 'examples/custom-animation/looks.ts', 'examples/custom-animation/bones.ts']
+		},
+		{
+			id: 'custom-animation-hop',
+			category: 'custom-animation',
+			title: 'Hops, squash and stretch',
+			summary:
+				"Slimes with no clips at all, made of a few solids, that hop where they go: stretched as they leave the ground, squashed as they land. The look's `pose` moves them each frame; slide how squashy they are.",
+			tags: ['squash', 'stretch', 'hop', 'pose', 'procedural', 'shapes', 'no clips'],
+			start: (world) => {
+				for (let i = 0; i < 12; i++) world.spawn(MOVE.customAnimationSlime, { at: somewhere(world, 9), owner: PLAYER })
+			},
+			source: ['examples/custom-animation/index.ts', 'examples/custom-animation/looks.ts']
+		},
+		{
+			id: 'custom-animation-waddle',
+			category: 'custom-animation',
+			title: 'A walk with no clips',
+			summary:
+				'Little creatures of a few solids that waddle: rocking from foot to foot, bobbing in step, leaning into their turns, as fast as they go. No model and no clips: they are a few solids on purpose, and moved in code alone.',
+			tags: ['walk', 'bob', 'lean', 'waddle', 'pose', 'procedural', 'shapes'],
+			start: (world) => {
+				for (let i = 0; i < 10; i++) world.spawn(MOVE.customAnimationWaddler, { at: somewhere(world, 9), owner: PLAYER })
+			},
+			source: ['examples/custom-animation/index.ts', 'examples/custom-animation/looks.ts']
+		},
+		{
+			id: 'custom-animation-springs',
+			category: 'custom-animation',
+			title: 'Springs: a wobble when hit',
+			summary:
+				'Jellies of a few solids, no model, that wobble when a brute hits them: each blow pushes a spring, which sways it away and back until it settles. Make the springs stiffer or looser, and damp them more or less.',
+			tags: ['spring', 'wobble', 'jiggle', 'hit reaction', 'pose', 'damping', 'procedural'],
+			map: () => exampleField({ name: 'Springs', players: 2 }),
+			start: (world) => {
+				// side on to the camera: each brute to the west of its jelly, facing it
+				for (let i = 0; i < 3; i++) {
+					const x = 18.5 + i * 6
+					world.spawn(MOVE.customAnimationJelly, { at: { x: x + 0.9, z: 24 }, owner: ENEMY, facing: 0 })
+					world.spawn(MOVE.customAnimationBrute, { at: { x: x - 0.9, z: 24 }, owner: PLAYER, facing: Math.PI / 2 })
+				}
+			},
+			source: ['examples/custom-animation/index.ts', 'examples/custom-animation/looks.ts']
+		},
+		{
+			id: 'custom-animation-flight',
+			category: 'custom-animation',
+			title: 'Banking through a figure of eight',
+			summary:
+				"A glider of a few solids flies a figure of eight for ever, banking into each turn as hard as it turns, pitching as it climbs and falls, with a trail behind. The rules fly it from point to point; the banking is the look's `pose`.",
+			tags: ['flying', 'bank', 'path', 'pose', 'altitude', 'trail', 'procedural'],
+			start: (world) => world.spawn(MOVE.customAnimationGlider, { at: FIGURE_EIGHT[0]!, owner: PLAYER }),
+			source: ['examples/custom-animation/index.ts', 'examples/custom-animation/looks.ts']
+		},
+		{
+			id: 'custom-animation-renderer',
+			category: 'custom-animation',
+			title: 'A renderer of your own',
+			summary:
+				"Runes that orbit every adept, drawn by a renderer of the game's own (`GameView.renderers`): told of each unit as it comes and goes, moved every frame, popping in with a tween. Summon more.",
+			tags: ['renderer', 'FeatureRenderer', 'orbit', 'tween', 'meshes', 'Babylon', 'per frame'],
+			start: (world) => {
+				for (let i = 0; i < 3; i++) world.spawn(MOVE.customAnimationAdept, { at: somewhere(world, 5), owner: PLAYER })
+			},
+			source: ['examples/custom-animation/index.ts', 'examples/custom-animation/looks.ts', 'examples/custom-animation/runes.ts']
+		}
+	]
+}