@v12-engine/create 0.1.0 → 0.4.0

package/starters/examples/src/examples/nature/weather.ts

@@ -0,0 +1,80 @@
+/**
+ * The weathers of the weather example, as looks of the map (`MapEnvironment`): each the sky, the clouds, the light,
+ * the wind, the mist and what falls, for an amount of it from 0 (hardly any) to 1 (all it gets). The rules set one for
+ * every player (`world.setEnvironment(look, { over })`), and every screen eases into it
+ */
+import type { MapEnvironment } from '@v12-engine/engine'
+
+/** The weathers there are */
+export type WeatherKind = 'clear' | 'rain' | 'storm' | 'snow'
+
+/** Between two numbers, `t` of the way */
+const mix = (a: number, b: number, t: number) => a + (b - a) * t
+/** Between two colours, `t` of the way */
+const mixRgb = (a: readonly number[], b: readonly number[], t: number): [number, number, number] => [
+	mix(a[0], b[0], t),
+	mix(a[1], b[1], t),
+	mix(a[2], b[2], t)
+]
+
+/** Each weather's look, for an amount of it from 0 to 1 */
+export const WEATHER: Record<WeatherKind, (amount: number) => Partial<MapEnvironment>> = {
+	// a clear day: a few clouds, a light breeze, nothing falling (what fell fades out)
+	clear: (amount) => ({
+		sky: [0.5, 0.7, 0.92],
+		clouds: { cover: mix(0.1, 0.4, amount), color: [1, 1, 1] },
+		cloudLayer: { height: 22, cover: mix(0.1, 0.35, amount), opacity: 0.5, shadows: 0.4 },
+		light: { sunUp: 45, sunAround: 200, sun: 1.4, sunColor: [1, 0.95, 0.85], ambient: 0.6, ambientColor: [0.9, 0.95, 1] },
+		wind: { around: 80, strength: 0.25, gusts: 0.3 },
+		weather: { kind: 'rain', amount: 0 },
+		fog: { start: 70, end: 200 },
+		mist: {}
+	}),
+	// rain from a grey sky: the more of it, the darker and windier, the more splashes
+	rain: (amount) => ({
+		sky: mixRgb([0.55, 0.62, 0.7], [0.36, 0.4, 0.46], amount),
+		clouds: { cover: mix(0.6, 0.9, amount), color: mixRgb([0.85, 0.87, 0.9], [0.6, 0.62, 0.66], amount) },
+		cloudLayer: { height: 18, cover: mix(0.5, 0.75, amount), opacity: 0.6, shadows: 0.45 },
+		light: {
+			sunUp: 40,
+			sunAround: 200,
+			sun: mix(0.9, 0.6, amount),
+			sunColor: [0.9, 0.93, 1],
+			ambient: mix(0.6, 0.5, amount),
+			ambientColor: [0.8, 0.85, 0.95]
+		},
+		wind: { around: 100, strength: mix(0.3, 0.6, amount), gusts: 0.5 },
+		weather: { kind: 'rain', amount: mix(0.25, 1, amount), splashes: mix(0.3, 0.8, amount) },
+		fog: { start: mix(60, 35, amount), end: mix(180, 120, amount) },
+		mist: { ground: { base: 0, top: 1.5, density: mix(0.1, 0.3, amount), color: [0.6, 0.64, 0.7] } }
+	}),
+	// a storm: dark, a gale slanting the rain, low cloud racing over
+	storm: (amount) => ({
+		sky: mixRgb([0.3, 0.33, 0.38], [0.16, 0.18, 0.22], amount),
+		clouds: { cover: 0.95, speed: 2.5, color: [0.42, 0.44, 0.48] },
+		cloudLayer: { height: 14, cover: mix(0.7, 0.9, amount), opacity: 0.75, shadows: 0.6, scale: 18 },
+		light: {
+			sunUp: 35,
+			sunAround: 200,
+			sun: mix(0.55, 0.35, amount),
+			sunColor: [0.75, 0.82, 1],
+			ambient: mix(0.45, 0.35, amount),
+			ambientColor: [0.6, 0.66, 0.8]
+		},
+		wind: { around: 120, strength: mix(0.75, 1, amount), gusts: 0.9 },
+		weather: { kind: 'rain', amount: 1, splashes: 1, size: 1.2, speed: 1.3 },
+		fog: { start: mix(35, 20, amount), end: mix(120, 80, amount) },
+		mist: { ground: { base: 0, top: 2.5, density: mix(0.25, 0.45, amount), color: [0.4, 0.43, 0.5] } }
+	}),
+	// snow: a white sky, the flakes drifting, the ground going white the more falls
+	snow: (amount) => ({
+		sky: mixRgb([0.78, 0.82, 0.88], [0.7, 0.73, 0.78], amount),
+		clouds: { cover: 0.85, speed: 0.4, color: [0.92, 0.93, 0.96] },
+		cloudLayer: { height: 20, cover: 0.6, opacity: 0.5, shadows: 0.3 },
+		light: { sunUp: 25, sunAround: 190, sun: 0.9, sunColor: [0.95, 0.97, 1], ambient: 0.75, ambientColor: [0.88, 0.92, 1] },
+		wind: { around: 60, strength: mix(0.15, 0.45, amount), gusts: 0.4 },
+		weather: { kind: 'snow', amount: mix(0.3, 1, amount), settle: mix(0.4, 0.9, amount) },
+		fog: { start: mix(55, 30, amount), end: mix(170, 110, amount), color: [0.85, 0.87, 0.9] },
+		mist: { ground: { base: 0, top: 1.5, density: 0.2, color: [0.9, 0.92, 0.95] } }
+	})
+}

package/starters/examples/src/examples/performance/index.ts

@@ -0,0 +1,263 @@
+/**
+ * The performance examples on the rules' side: big fields, and commands that lay out armies of any size on them, march
+ * them and set them fighting (`ExampleCategory`). The armies are the category's own footmen and archers, so their looks
+ * can be drawn as baked crowds (`./looks.ts`) without changing the shared units'. Each example starts small, so its world
+ * is quick to make with no page; the card's slider asks for thousands
+ */
+import {
+	defineCommand,
+	defineIds,
+	type Entity,
+	type Game,
+	number,
+	oneOf,
+	type PlayerId,
+	type UnitTypeDef,
+	type Vec2,
+	type World
+} from '@v12-engine/engine'
+import { ENEMY, PLAYER } from '../common/units'
+import { type ExampleCategory, exampleField } from '../define'
+
+/** The category's units: a footman and an archer of their own, and a post to shoot at */
+export const PERF = defineIds('performanceFootman', 'performanceArcher', 'performanceTarget')
+
+/** The most units a side an army command lays out */
+export const MOST = 5000
+
+const units: UnitTypeDef[] = [
+	{
+		id: PERF.performanceFootman,
+		name: 'Footman',
+		kind: 'unit',
+		radius: 0.45,
+		stats: { health: 420, attackDamage: 14, attackSpeed: 1.1, attackRange: 0.5, armor: 12, moveSpeed: 4 },
+		sight: 9,
+		attacks: [{ damagePoint: 0.45, acquisitionRange: 8 }]
+	},
+	{
+		id: PERF.performanceArcher,
+		name: 'Archer',
+		kind: 'unit',
+		radius: 0.42,
+		stats: { health: 260, attackDamage: 6, attackSpeed: 1.4, attackRange: 14, moveSpeed: 4.2 },
+		sight: 15,
+		attacks: [{ damagePoint: 0.3, acquisitionRange: 15, projectileSpeed: 22 }]
+	},
+	{
+		// stands and is shot at, healing as fast as it is hurt: a volley that never runs out of targets
+		id: PERF.performanceTarget,
+		name: 'Target',
+		kind: 'unit',
+		radius: 0.5,
+		stats: { health: 100000, healthRegen: 5000, moveSpeed: 0 },
+		sight: 2
+	}
+]
+
+/** A square block of `count` of a type, 1.5 apart, its middle at `at`: as many across as deep */
+export function block(world: World, type: string, owner: PlayerId, at: Vec2, count: number, gap = 1.5): void {
+	const side = Math.ceil(Math.sqrt(count))
+	const from = -((side - 1) * gap) / 2
+	for (let i = 0; i < count; i++) {
+		const row = Math.floor(i / side)
+		const column = i % side
+		world.spawn(type, { at: { x: at.x + from + column * gap, z: at.z + from + row * gap }, owner })
+	}
+}
+
+/** A block `across` wide and as deep as it takes, its front row at `at.z`, going back by `back` (1 or -1) */
+function ranks(world: World, type: string, owner: PlayerId, at: Vec2, count: number, across: number, back: number, gap = 1.4): void {
+	for (let i = 0; i < count; i++) {
+		const row = Math.floor(i / across)
+		const column = i % across
+		const width = Math.min(across, count - row * across)
+		world.spawn(type, { at: { x: at.x + (column - (width - 1) / 2) * gap, z: at.z + back * row * gap }, owner })
+	}
+}
+
+/** Takes every unit of the world away, as if it had never been */
+function clear(world: World, keep: (unit: Entity) => boolean = () => false): void {
+	for (const unit of [...world.units.values()]) if (unit.alive && !keep(unit)) world.kill(unit, undefined, false, 'removed')
+}
+
+/** The middle of the world's field */
+const middle = (world: World): Vec2 => ({ x: world.terrain.width / 2, z: world.terrain.depth / 2 })
+
+/** An army of `count` footmen in a square block in the middle of the field, what was there before taken away */
+export const army = defineCommand('performance.army', { count: number }, (world, player, { count }) => {
+	clear(world)
+	block(world, PERF.performanceFootman, player, middle(world), Math.max(1, Math.min(MOST, Math.round(count))))
+})
+
+/** The player's units sent to a point together, in a formation: one order for them all, as a box drag and right-click is */
+export const march = defineCommand(
+	'performance.march',
+	{ to: oneOf('north', 'south', 'east', 'west', 'middle'), formation: oneOf('square', 'circle', 'rows') },
+	(world, player, { to, formation }) => {
+		const { x, z } = middle(world)
+		const far = world.terrain.width * 0.3
+		const point = { north: { x, z: z + far }, south: { x, z: z - far }, east: { x: x + far, z }, west: { x: x - far, z }, middle: { x, z } }[to]
+		const entities = [...world.units.values()]
+			.filter((unit) => unit.alive && unit.owner === player && unit.def.stats.moveSpeed)
+			.map((unit) => unit.id)
+		if (entities.length) world.issue({ type: 'order', player, entities, order: { type: 'move', point, formation } })
+	}
+)
+
+/** Two armies of `count` footmen each, facing each other across the field's middle, ranks of 50 */
+export const battle = defineCommand('performance.battle', { count: number }, (world, _player, { count }) => {
+	clear(world)
+	const each = Math.max(1, Math.min(MOST / 2, Math.round(count)))
+	const { x, z } = middle(world)
+	const across = Math.min(50, Math.ceil(Math.sqrt(each * 4)))
+	ranks(world, PERF.performanceFootman, PLAYER, { x, z: z - 8 }, each, across, -1)
+	ranks(world, PERF.performanceFootman, ENEMY, { x, z: z + 8 }, each, across, 1)
+})
+
+/** Both armies sent at each other, fighting what they meet on the way (`attackMove`) */
+export const charge = defineCommand('performance.charge', {}, (world) => {
+	const { z } = middle(world)
+	for (const side of [PLAYER, ENEMY]) {
+		const entities = [...world.units.values()].filter((unit) => unit.alive && unit.owner === side).map((unit) => unit.id)
+		// one order for each side, the way a player gives it: the side's units go together, each to its place
+		if (entities.length)
+			world.issue({
+				type: 'order',
+				player: side,
+				entities,
+				order: { type: 'attackMove', point: { x: middle(world).x, z: side === PLAYER ? z + 30 : z - 30 }, formation: 'none' }
+			})
+	}
+})
+
+/** `count` archers in ranks along the south, and rows of targets to the north that never fall: arrows always in the air */
+export const volley = defineCommand('performance.volley', { count: number }, (world, player, { count }) => {
+	clear(world)
+	const { x, z } = middle(world)
+	const each = Math.max(1, Math.min(2000, Math.round(count)))
+	ranks(world, PERF.performanceArcher, player, { x, z: z - 6 }, each, Math.min(60, Math.ceil(Math.sqrt(each * 3))), -1, 1.2)
+	ranks(world, PERF.performanceTarget, ENEMY, { x, z: z + 6 }, Math.ceil(each / 8), 40, 1, 2)
+})
+
+/** Two crowds of `count` footmen each, at the two ends of the field: the flow system sends them across */
+export const flow = defineCommand('performance.flow', { count: number }, (world, _player, { count }) => {
+	clear(world)
+	crowds(world, Math.max(1, Math.min(MOST / 2, Math.round(count))))
+})
+
+/** The two crowds of the flow example, 30 cells either side of the middle */
+function crowds(world: World, each: number): void {
+	const { x, z } = middle(world)
+	block(world, PERF.performanceFootman, PLAYER, { x: x - 30, z }, each, 1.3)
+	block(world, PERF.performanceFootman, ENEMY, { x: x + 30, z }, each, 1.3)
+}
+
+/**
+ * The flow example's crowds sent across again once each has got to its side: a system, twice a second, on that
+ * example's field alone (a system is the whole game's: it looks at the map's name)
+ */
+const flowSystem = {
+	name: 'performance.flow',
+	every: 15,
+	update: (world: World) => {
+		if (world.map?.name !== 'Crowd flow') return
+		const { x, z } = middle(world)
+		for (const side of [PLAYER, ENEMY]) {
+			// a side whose units have all stopped goes to the other end of the field, through the other crowd
+			const own = [...world.units.values()].filter((unit) => unit.alive && unit.owner === side)
+			if (!own.length || own.some((unit) => unit.orders.length)) continue
+			const there = own[0]!.pos.x > x ? -1 : 1
+			world.issue({
+				type: 'order',
+				player: side,
+				entities: own.map((unit) => unit.id),
+				order: { type: 'move', point: { x: x + there * 30, z }, formation: 'square' }
+			})
+		}
+	}
+}
+
+export const category: ExampleCategory = {
+	rules: (game: Game<any>) => {
+		for (const unit of units) game.unit(unit)
+		for (const command of [army, march, battle, charge, volley, flow]) game.command(command)
+		game.system(flowSystem)
+	},
+	examples: [
+		{
+			id: 'performance-army',
+			category: 'performance',
+			title: 'Thousands of footmen',
+			summary:
+				'An army of up to 5,000 footmen, each a unit of the simulation, drawn as baked crowds: one mesh, their clips in a texture. Pick the size, march them about in formation, and watch the frame time.',
+			tags: ['crowd', 'baked', 'instancing', 'army', 'fps', 'formation', 'large battles'],
+			map: () => exampleField({ name: 'Thousands', size: 128 }),
+			start: (world) => block(world, PERF.performanceFootman, PLAYER, middle(world), 400),
+			source: ['examples/performance/index.ts', 'examples/performance/looks.ts', 'examples/performance/meter.ts']
+		},
+		{
+			id: 'performance-battle',
+			category: 'performance',
+			title: 'A huge battle',
+			summary:
+				'Two armies of a thousand footmen and more crash into each other: every swing, every hit and every death simulated. Choose the size, lay them out, and charge.',
+			tags: ['battle', 'combat', 'army', 'fps', 'crowd', 'large battles'],
+			map: () => exampleField({ name: 'Huge battle', size: 128, players: 2 }),
+			start: (world) => {
+				const { x, z } = middle(world)
+				ranks(world, PERF.performanceFootman, PLAYER, { x, z: z - 8 }, 150, 30, -1)
+				ranks(world, PERF.performanceFootman, ENEMY, { x, z: z + 8 }, 150, 30, 1)
+			},
+			source: ['examples/performance/index.ts', 'examples/performance/looks.ts']
+		},
+		{
+			id: 'performance-volley',
+			category: 'performance',
+			title: 'Arrows by the thousand',
+			summary:
+				'Hundreds of archers shooting at once: every arrow is a projectile of the simulation, flying, landing and drawn. Raise the count and watch the arrows in the air.',
+			tags: ['projectiles', 'arrows', 'archers', 'missiles', 'fps'],
+			map: () => exampleField({ name: 'Volley', size: 96, players: 2 }),
+			start: (world) => {
+				const { x, z } = middle(world)
+				ranks(world, PERF.performanceArcher, PLAYER, { x, z: z - 6 }, 120, 30, -1, 1.2)
+				ranks(world, PERF.performanceTarget, ENEMY, { x, z: z + 6 }, 15, 15, 1, 2)
+			},
+			source: ['examples/performance/index.ts', 'examples/performance/looks.ts']
+		},
+		{
+			id: 'performance-flow',
+			category: 'performance',
+			title: 'Crowds crossing',
+			summary:
+				'Two crowds walk through each other to the far side and back, for ever: paths, steering and pushing for every unit, every tick. Make them bigger and watch them find their way.',
+			tags: ['pathing', 'steering', 'crowd', 'movement', 'collision', 'fps'],
+			map: () => exampleField({ name: 'Crowd flow', size: 112, players: 2 }),
+			start: (world) => {
+				crowds(world, 100)
+			},
+			source: ['examples/performance/index.ts', 'examples/performance/looks.ts']
+		},
+		{
+			id: 'performance-forest',
+			category: 'performance',
+			title: 'A forest of thousands',
+			summary:
+				'Up to 40,000 trees, each a model of the shared art, drawn as copies by chunk of the map and lighter far off. Grow the forest and fly over it.',
+			tags: ['trees', 'forest', 'doodads', 'scenery', 'instancing', 'batching', 'fps'],
+			map: () => exampleField({ name: 'Forest', size: 192 }),
+			source: ['examples/performance/looks.ts']
+		},
+		{
+			id: 'performance-effects',
+			category: 'performance',
+			title: 'Effects everywhere',
+			summary:
+				'Up to three hundred fires, blasts and sparkles playing at once over a field: particles, lights and flashes, kept to the effects budget. Raise the count and pick the kind.',
+			tags: ['fx', 'particles', 'fire', 'explosions', 'budget', 'fps'],
+			map: () => exampleField({ name: 'Effects', size: 96 }),
+			source: ['examples/performance/looks.ts']
+		}
+	]
+}