@origingame/create-game 0.2.0 → 0.4.0

package/archetypes/arena/src/main.ts

@@ -0,0 +1,100 @@
+// Coin Duel, the arena archetype (2D profile): two players on one floor run
+// for one coin; each touch is a point and the coin jumps somewhere else,
+// first to five wins the round. It plays alone (the local keys drive Red)
+// and over a room in lockstep: `og relay` and two `og run . --room
+// ws://127.0.0.1:47900/duel` processes (or two Play pages in one platform
+// room) each run the whole world and exchange only their inputs and the
+// world's hash (og.net, docs/design.md §2.10).
+//
+// start turns og.Lockstep on for two players and spawns the two fighters,
+// each an og.PlayerInput whose `player` is its seat, and the coin. The
+// systems are in src/game.ts: Submit hands this peer's keys to
+// og.net.submit, Move and CoinDrop read og.PlayerInput and og.Rng only.
+
+import { og } from "@origingame/engine";
+import type { Entity, World } from "@origingame/engine";
+import { Coin, COIN, CoinDrop, Duel, facts, Feedback, Fighter, FIGHTER, HEIGHT, Hud, Move, must, setBot, Sound, Sparks, Submit, Tuning, Voice, Voices, WIDTH } from "./game.ts";
+
+/** The brand ink #14161b, linear, behind the floor. */
+const INK = { r: 0.00699, g: 0.00802, b: 0.01096 };
+const FLOOR = { r: 0.022, g: 0.026, b: 0.034 };
+const LINE = { r: 0.06, g: 0.068, b: 0.085 };
+/** Red and Blue, linear. */
+const INKS = [
+  { r: 0.9, g: 0.12, b: 0.1 },
+  { r: 0.1, g: 0.38, b: 0.95 },
+];
+const GOLD = { r: 1, g: 0.62, b: 0.08 };
+
+function rect(world: World, name: string, x: number, y: number, w: number, h: number, color: { r: number; g: number; b: number }, layer: number, glow = 0): Entity {
+  const e = must(world.spawn({ name, position: { x, y, z: 0 } }));
+  must(world.insert(e, og.Sprite, { width: w, height: h, color, layer, glow }));
+  return e;
+}
+
+function start(world: World): void {
+  // Lockstep for two: in a room the world waits for both seats' inputs each tick.
+  const lock = must(world.resource(og.Lockstep));
+  lock.enabled = true;
+  lock.players = 2;
+  lock.inputDelay = 2;
+  lock.hashEvery = 10;
+
+  const camera = must(world.resource(og.Camera));
+  camera.orthographic = true;
+  camera.height = HEIGHT + 2;
+  camera.position = { x: WIDTH / 2, y: HEIGHT / 2, z: 50 };
+  camera.background = INK;
+
+  rect(world, "floor", WIDTH / 2, HEIGHT / 2, WIDTH, HEIGHT, FLOOR, -10);
+  rect(world, "midline", WIDTH / 2, HEIGHT / 2, 0.06, HEIGHT, LINE, -9);
+
+  for (const player of [0, 1]) {
+    const e = rect(world, `fighter-${player}`, player === 0 ? 3 : WIDTH - 3, HEIGHT / 2, FIGHTER * 2, FIGHTER * 2, INKS[player]!, 1);
+    must(world.insert(e, og.PlayerInput, { player }));
+    must(world.insert(e, Fighter, { faceX: player === 0 ? 1 : -1 }));
+  }
+  const coin = rect(world, "coin", WIDTH / 2, HEIGHT / 2, COIN * 2, COIN * 2, GOLD, 0, 0.6);
+  must(world.insert(coin, Coin));
+
+  // The feedback (src/game.ts Feedback, Voices): one voice per sound, the coin's sparks.
+  for (const [path, bit, volume] of [
+    ["audio/coin.ogt", Sound.Coin, 0.7],
+    ["audio/dash.ogt", Sound.Dash, 0.45],
+    ["audio/win.ogt", Sound.Win, 0.8],
+  ] as const) {
+    const v = must(world.spawn({ name: `sfx-${bit}` }));
+    must(world.insert(v, og.AudioSource, { sound: must(og.load.sound(world, path)), playing: false, bus: "sfx", volume, priority: 200 }));
+    must(world.insert(v, Voice, { bit }));
+  }
+  const sparks = must(world.spawn({ name: "sparks", position: { x: WIDTH / 2, y: HEIGHT / 2, z: 2 } }));
+  must(world.insert(sparks, og.ParticleSystem, { emitter: must(og.load.emitter(world, "fx/coin.ogt")), seed: 7 }));
+  must(world.insert(sparks, Sparks));
+
+}
+
+export default og.game({
+  tick: 60,
+  seed: 1,
+  look: "looks/arena.ogt",
+  resources: [Duel, Tuning],
+  systems: [Submit, Move, CoinDrop, Feedback, Voices, Hud],
+  start,
+  commands: {
+    /** `bot:<n>`: this peer's input comes from scripted bot n (0 hands it back to the keys). */
+    bot: (_world, args) => setBot(Number(args[0])),
+    /** `warp:<player>:<x>:<y>`: put a fighter there. */
+    warp: (world, args) => {
+      const e = world.find(`fighter-${Number(args[0])}`);
+      const x = Number(args[1]);
+      const y = Number(args[2]);
+      if (e === null || !Number.isFinite(x) || !Number.isFinite(y)) throw new Error("write warp:<player>:<x>:<y>");
+      must(world.set(e, og.Transform, { position: { x, y, z: 0 } }));
+    },
+  },
+  commandHelp: {
+    bot: { usage: "<n>", doc: "Drive this peer's player by scripted bot n (1, 2, ...); 0 gives it back to the keys." },
+    warp: { usage: "<player>:<x>:<y>", doc: "Put fighter 0 (Red) or 1 (Blue) at a point of the floor." },
+  },
+  facts,
+});

package/archetypes/arena/tests/duel.og.ts

@@ -0,0 +1,32 @@
+// Two processes play one duel in lockstep through a relay (docs/design.md
+// §2.10): each drives its own seat by a different scripted bot, and both
+// quit on tick 600 (the steps run on the room's shared ticks), where both
+// worlds hash the same, no og.Desync was sent, and the coin moved.
+import { playtest } from "@origingame/engine/playtest";
+
+interface Duel {
+  value: { score0: number; score1: number; coins: number };
+}
+
+export default playtest({
+  name: "two processes in one room play the same duel to tick 600",
+  commands: "0:bot:1;9.5:get:Duel:duel.json;10:quit",
+  room: { players: 2, commands: ["0:bot:1;9.5:get:Duel:duel.json;10:quit", "0:bot:2;9.5:get:Duel:duel.json;10:quit"], name: "duel" },
+  check(run, t) {
+    t.equal(run.peers.length, 1, "one peer beside the run");
+    const peer = run.peers[0]!;
+    t.equal(run.tick, 600, "the run quit on tick 600");
+    t.equal(peer.tick, 600, "the peer quit on tick 600");
+    t.ok(run.lockstep?.running === true && peer.lockstep?.running === true, "lockstep ran on both");
+    t.equal([run.lockstep?.peer, peer.lockstep?.peer].sort(), [0, 1], "the peers are 0 and 1");
+    t.equal(run.lockstep?.desync ?? null, null, "no desync on the run");
+    t.equal(peer.lockstep?.desync ?? null, null, "no desync on the peer");
+    t.ok(run.netHash.length > 0, "the run has a shared hash");
+    t.equal(peer.netHash, run.netHash, `both worlds hash ${run.netHash} at tick 600`);
+    const a = run.json<Duel>("duel.json").value;
+    const b = peer.json<Duel>("duel.json").value;
+    t.ok(a.coins > 0, `the fighters took coins (${a.coins})`);
+    // The reads ran on one tick of the room's clock: the same duel, field for field.
+    t.equal(b, a, `the peer read the same duel at 9.5 s`);
+  },
+});

package/archetypes/arena/tests/solo.og.ts

@@ -0,0 +1,22 @@
+// Coin Duel alone (no room): the local keys drive Red. D walks it right
+// through the coin at the centre (Red 1), Space dashes, and the HUD reads
+// both scores. The frame at 2 s is what
+// `og polish` reads for contrast, text size and the HUD's share.
+import { playtest } from "@origingame/engine/playtest";
+
+export default playtest({
+  name: "alone, the keys walk Red through the coin and dash it, and the HUD shows the scores",
+  commands: [
+    "0.2:key_down:KeyD",
+    "1.2:expect:entity:fighter-0:within:7,0,-1,16,9,1",
+    "1.2:key_up:KeyD",
+    "1.3:key_down:Space",
+    "1.4:key_up:Space",
+    "1.5:expect:entity:fighter-1:within:12.5,4,-1,13.5,5,1",
+    "2:screenshot:solo.png",
+    "2:expect:ui:text:Red 1",
+    "2:expect:ui:text:Blue 0",
+    "2:expect:ui:text:Local: Red",
+    "2.2:quit",
+  ].join(";"),
+});

package/archetypes/arena/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022"],
+    "types": [],
+    "strict": true,
+    "exactOptionalPropertyTypes": true,
+    "noFallthroughCasesInSwitch": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "tests/**/*.ts", "host.d.ts"]
+}

package/archetypes/idle/LICENSES.md

@@ -8,5 +8,5 @@
 | `assets/audio/*.ogt` | CC0 1.0 | `og sfx` presets (click, select, back, error, levelup) that `og cook` synthesises, written by the same script |
 | `assets/strings/*.ogt` | CC0 1.0 | self-made: the English and Chinese string tables |
 | `assets/fonts/NotoSansSC-subset.ttf` | SIL Open Font License 1.1 (`assets/fonts/OFL.txt`) | Noto Sans SC Regular, subset to Latin-1 and the characters of `assets/strings/zh-CN.ogt` by the same script from the project template's `assets/fonts/NotoSansSC-Regular-subset.ttf` |
-| `assets/skins/sparkorb/*` | CC0 1.0 art, SIL OFL 1.1 fonts | the engine's neon style pack (`templates/ui-kit/assets/skins/neon`, `assets/skins/sparkorb/LICENSES.md`) with this game's palette; `atlas.png` is the pack's atlas with its magenta frames turned violet by the same script |
+| `assets/styles/sparkorb/*` | CC0 1.0 art, SIL OFL 1.1 fonts | the engine's neon style pack (`templates/styles/neon`, `assets/styles/sparkorb/LICENSES.md`) with this game's palette; `atlas.png` is the pack's atlas with its magenta frames turned violet by the same script |
 | `references/*/*.png` | CC0 1.0 | frames of this game recorded by `tests/frames.og.ts` |

package/archetypes/idle/README.md

@@ -62,7 +62,7 @@ og build . --publish         # dist/: the play page as it ships
   fanfare; the supernova bursts 200 sparks, holds the world 10 ticks,
   shakes and punches it.
 - **og.ui counters on the tokens** (og-ui §2–§6, og-taste §1–§7): the
-  engine's neon pack recoloured as `assets/skins/sparkorb` (the orb's gold
+  engine's neon pack recoloured as `assets/styles/sparkorb` (the orb's gold
   as the one accent on night violet: a burnished amber under the buttons'
   cream labels, the bright gold `accentInk` for gold words and icons); the wallet and the rate top left, the
   stardust (an `og.ui.counter`) and Pause top right, the four generators
@@ -168,10 +168,10 @@ pure functions, the stars come from an og.Rng stream forked by name, and
    an `owned<n>` field.
 3. **Prestige**: `novaGain`, `dustMultiplier`.
 4. **The look**: `assets/looks/idle.ogt` (named by `GameDesc.look`) holds
-   the frame's treatment and names the skin; `extends "<slug>"` there
+   the frame's treatment and names the style; `extends "<slug>"` there
    starts from a style of the catalogue (og-taste §12), and the reference
    frames are then recorded again (`OG_FX_CAPTURE=1 og test .`). The
-   skin's palette is `assets/skins/sparkorb/skin.ogt`, the art
+   style's palette is `assets/styles/sparkorb/style.ogt`, the art
    `tools/make-assets.py`: `python3 tools/make-assets.py && og cook .`.
 5. **Words and numbers**: `assets/strings/*.ogt` (a locale's `num.step`
    and units make its big numbers); a new Chinese string needs the script
@@ -221,8 +221,8 @@ in the engine repository).
 `tools/make-assets.py` regenerates every asset byte for byte (two runs
 give the same bytes): the orb, the glow, the spark and the motes, the
 emitters, the sounds and the music, the `og sfx` preset files of the UI's
-sounds, the font subset and the skin's recoloured atlas. `LICENSES.md`
-lists them; the skin's are in `assets/skins/sparkorb/LICENSES.md`.
+sounds, the font subset and the style's recoloured atlas. `LICENSES.md`
+lists them; the style's are in `assets/styles/sparkorb/LICENSES.md`.
 
 ## Known limits (engine gaps, not design)
 

package/archetypes/idle/assets/looks/idle.ogt

@@ -7,8 +7,8 @@ version 1
 # suit a glowing orb) adds that style's treatment under the lines below,
 # and the reference frames are then recorded again (OG_FX_CAPTURE=1 og test .).
 name "Spark Orb"
-# The UI wears the sparkorb skin (start keeps it and adds the sounds).
-skin "skins/sparkorb/skin.ogt"
+# The UI wears the sparkorb style (start keeps it and adds the sounds).
+ui "styles/sparkorb/style.ogt"
 # The night and the orb are authored colour: not tone mapped, and no light
 # from the sky.
 RenderSettings {

package/archetypes/idle/assets/{skins → styles}/sparkorb/LICENSES.md

@@ -1,19 +1,19 @@
-# Spark Orb's skin (the engine's neon style pack, recoloured): licences
+# Spark Orb's style (the engine's neon style pack, recoloured): licences
 
-The palette, the body size and the fallback font in `skin.ogt` are this
+The palette, the body size and the fallback font in `style.ogt` are this
 game's edits by hand; `atlas.png` is the pack's atlas with its magenta
 frames turned violet by `tools/make-assets.py`; the rest is the pack as
-`templates/ui-kit/assets/skins/neon` ships it.
+`templates/styles/neon` ships it.
 
 | File | Licence | Origin |
 |---|---|---|
-| `atlas.png` | CC0 1.0 | self-made by the Origin Engine authors: drawn by `templates/ui-kit/tools/make-skins.py` (deterministic) |
+| `atlas.png` | CC0 1.0 | self-made by the Origin Engine authors: drawn by `templates/ui-kit/tools/make-styles.py` (deterministic) |
 | `icons.png` | CC0 1.0 | self-made: the kit's 32 icons (`tools/make-assets.py`) restyled by the same script |
-| `skin.ogt`, `*.ogt` | CC0 1.0 | written by the same script |
+| `style.ogt`, `*.ogt` | CC0 1.0 | written by the same script |
 | `ChakraPetch-BoldItalic.ttf` | SIL Open Font License 1.1 (`OFL.txt`) | Chakra Petch Bold Italic (github.com/m4rc1e/Chakra-Petch); unmodified. Copyright 2018 The Chakra Petch Project Authors (https://github.com/m4rc1e/Chakra-Petch.git) |
 | `Orbitron-Medium.ttf` | SIL Open Font License 1.1 (`OFL.txt`) | Orbitron Medium (github.com/theleagueof/orbitron); unmodified. Copyright 2018 The Orbitron Project Authors (https://github.com/theleagueof/orbitron), with Reserved Font Name: "Orbitron". |
 | `Rajdhani-Bold.ttf` | SIL Open Font License 1.1 (`OFL.txt`) | Rajdhani Bold (Indian Type Foundry, Google Fonts); subset to Latin-1 with fontTools. Copyright (c) 2014 Indian Type Foundry (info@indiantypefoundry.com) |
 
 Characters these fonts lack (Chinese, Japanese, Korean) are drawn with the
-skin's `fallback` font, `fonts/NotoSansSC-subset.ttf` (Noto Sans SC subset to
+style's `fallback` font, `fonts/NotoSansSC-subset.ttf` (Noto Sans SC subset to
 this game's Chinese strings, OFL 1.1, `assets/fonts/OFL.txt`).

package/archetypes/idle/assets/{skins/sparkorb/skin.ogt → styles/sparkorb/style.ogt}

@@ -1,53 +1,53 @@
-type skin
+type style
 version 1
 ---
-# Spark Orb's skin: the engine's neon style pack (templates/ui-kit/tools/make-skins.py, CC0 art,
+# Spark Orb's style: the engine's neon style pack (templates/ui-kit/tools/make-styles.py, CC0 art,
 # OFL fonts; LICENSES.md) with this game's palette (the orb's gold as the one accent on night
 # violet) and its Chinese fallback font, edited by hand.
 name "sparkorb"
-base dark
-atlas "skins/sparkorb/atlas.png" 384 256
+scheme dark
+atlas "styles/sparkorb/atlas.png" 384 256
 scale 1
 palette {
-  bg "#0a0614"
-  bgSubtle "#120a22"
-  surface "#1c1232"
-  surfaceRaised "#1c1232"
-  surfaceHover "#281a46"
-  materialThick "#1c1232"
-  materialRegular "#1c1232eb"
-  materialThin "#1c1232d9"
-  fg "#fff6e6"
-  fgMuted "#e3d4bd"
-  fgSubtle "#b9a890"
-  fgInverse "#140a00"
-  fill "#3a2a5c"
-  fillStrong "#4a3874"
-  border "#4a3470"
-  borderStrong "#c9a6ff"
-  accent "#ad690a"
-  accentHover "#d98f1f"
-  accentActive "#a8650a"
-  accentFg "#fff6e6"
-  accentInk "#ffc35c"
-  accentSoft "#ffb02e28"
+  backdrop "#0a0614"
+  well "#120a22"
+  panel "#1c1232"
+  panelHover "#281a46"
+  panelRaised "#1c1232"
+  line "#4a3470"
+  lineStrong "#c9a6ff"
+  ink "#fff6e6"
+  inkMuted "#e3d4bd"
+  inkFaint "#b9a890"
+  inkInverse "#140a00"
+  control "#3a2a5c"
+  controlStrong "#4a3874"
+  primary "#ad690a"
+  primaryHover "#d98f1f"
+  primaryActive "#a8650a"
+  onPrimary "#fff6e6"
+  primarySoft "#ffb02e28"
+  highlight "#ffc35c"
   focus "#ffd27a"
-  thumb "#5a3aa6"
+  knob "#5a3aa6"
+  hud "#1c1232"
   scrim "#030008cc"
+  shadow "#000000aa"
+  sheen "#ffffff52"
   success "#3ddc97"
   warn "#ffd23d"
   danger "#f45f80"
   info "#36e8ff"
-  shadow "#000000aa"
+  health "#3ddc97"
+  mana "#0a84ff"
+  xp "#bf5af2"
+  gold "#ad690a"
 }
 radius {
-  control 8
-  field 6
-  block 8
-  card 10
-  panel 14
-  sheet 14
-  button 12
+  small 6
+  control 6
+  bar 6
+  panel 10
 }
 ramp {
   body 16 21
@@ -68,12 +68,12 @@ durations {
   slow 380
 }
 fonts {
-  body "skins/sparkorb/Rajdhani-Bold.ttf"
-  display "skins/sparkorb/ChakraPetch-BoldItalic.ttf"
-  numeric "skins/sparkorb/Orbitron-Medium.ttf"
+  body "styles/sparkorb/Rajdhani-Bold.ttf"
+  display "styles/sparkorb/ChakraPetch-BoldItalic.ttf"
+  numeric "styles/sparkorb/Orbitron-Medium.ttf"
   fallback "fonts/NotoSansSC-subset.ttf"
 }
-icons "skins/sparkorb/icons.png" 8 4 {
+icons "styles/sparkorb/icons.png" 8 4 {
   names "heart" "star" "coin" "lock" "pause" "gear" "sword" "shield" "potion" "gem" "key" "map" "bolt" "clock" "trophy" "home" "plus" "close" "check" "play" "back" "bag" "bomb" "crown" "flag" "apple" "leaf" "fire" "drop" "skull" "music" "person"
 }
 slice panel 4 4 96 96 22 authored
@@ -85,21 +85,21 @@ slice buttonDisabled 328 4 48 48 16 tint
 slice field 4 104 48 48 10 tint
 slice slot 56 104 48 48 12 tint
 slice tooltip 108 104 32 32 10 tint
-slice capsule 144 104 32 32 14 tint
+slice hud 144 104 32 32 14 tint
 slice track 180 104 32 16 6 tint
 slice fill 216 104 32 16 6 tint
 soft 252 104 64 64 24
-corner 320 104 32 32 20 20 accent 2
+corner 320 104 32 32 20 20 primary 2
 corners card
-divider 4 172 128 24 128 24 accent
-flourish 136 172 64 24 36 16 accent 0
+divider 4 172 128 24 128 24 primary
+flourish 136 172 64 24 36 16 primary 0
 tile 204 172 64 64 48 48 0.12 10 panel
 shadow panel 0 0 0 0 "#00000000"
-glow button 6 accent 0.35
-glow capsule 4 accent 0.25
-glow panel 14 accent 0.18
+glow button 6 primary 0.35
+glow hud 4 primary 0.25
+glow panel 14 primary 0.18
 glow slot 3 focus 0.2
-textGlow display 2.0 accent 0.7
+textGlow display 2.0 primary 0.7
 textGlow numeric 1.2 focus 0.5
 press 0.96 0.96 0
 hover 0 1.04

package/archetypes/idle/package.json

@@ -13,6 +13,6 @@
     "test": "og test ."
   },
   "dependencies": {
-    "@origingame/engine": "0.2.0"
+    "@origingame/engine": "0.4.0"
   }
 }

package/archetypes/idle/project.ogt

@@ -3,7 +3,7 @@ version 1
 ---
 name "Spark Orb"
 id "idle"
-engine "0.2.0"
+engine "0.4.0"
 entry "src/main.ts"
 profile "2d"
 tick 60

package/archetypes/idle/src/components.ts

@@ -24,7 +24,7 @@ export const Sound = { Tap: 1, Buy: 2, Milestone: 4, Nova: 8, Welcome: 16, Move:
 /** The run, the save and the effects' bookkeeping. */
 export const Game = defineResource("Game", {
   phase: u32(Phase.Title, { doc: "Phase.* of src/components.ts." }),
-  leftTitle: bool(false, { doc: "The player has left the title the game opened on: from then on the title enters with the skin's entrance (the opening one is built settled, og.ui.mainMenu's instant: the web draws it behind the play gate)." }),
+  leftTitle: bool(false, { doc: "The player has left the title the game opened on: from then on the title enters with the style's entrance (the opening one is built settled, og.ui.mainMenu's instant: the web draws it behind the play gate)." }),
   paused: bool(false),
   settingsOpen: bool(false),
   held: bool(false, { doc: "The time scale is held at 0 (paused, in the settings or a dialog)." }),

package/archetypes/idle/src/main.ts

@@ -9,7 +9,7 @@
 // the rate.
 //
 // The look (GameDesc.look, a file under assets/looks/) sets the frame's
-// treatment and the UI skin before start runs. `start` loads the strings,
+// treatment and the UI style before start runs. `start` loads the strings,
 // the sounds and the orb's art and spawns the rows: the orb and its glow,
 // 48 motes (12 per generator), the burst pools, a voice per sound and the
 // music. The systems are in
@@ -35,11 +35,11 @@ function must<T>(r: { ok: true; value?: T } | { ok: false; reason: string }): T
 
 function start(world: World): void {
   for (const l of LANGUAGES) must(og.i18n.load(world, `strings/${l.code}.ogt`));
-  // GameDesc.look set the frame and loaded the skin before start; the UI
-  // keeps that skin and adds the sounds.
-  const skin = og.render.look(world)?.skin ?? null;
+  // GameDesc.look set the frame and loaded the style before start; the UI
+  // keeps that style and adds the sounds.
+  const style = og.render.look(world)?.style ?? null;
   const sound = (path: string) => must(og.load.sound(world, path));
-  must(og.ui.configure(world, { skin, sounds: { press: sound("audio/ui-press.ogt"), open: sound("audio/ui-open.ogt"), close: sound("audio/ui-close.ogt"), error: sound("audio/ui-error.ogt"), success: sound("audio/ui-success.ogt") } }));
+  must(og.ui.configure(world, { style, sounds: { press: sound("audio/ui-press.ogt"), open: sound("audio/ui-open.ogt"), close: sound("audio/ui-close.ogt"), error: sound("audio/ui-error.ogt"), success: sound("audio/ui-success.ogt") } }));
 
   const camera = must(world.resource(og.Camera));
   camera.orthographic = true;

package/archetypes/idle/src/ui.ts

@@ -1,4 +1,4 @@
-// Spark Orb's screens on og.ui and the skin in assets/skins/sparkorb (the
+// Spark Orb's screens on og.ui and the style in assets/styles/sparkorb (the
 // engine's neon pack in the orb's gold on night violet): the title, the
 // HUD (the sparks and their rate top left, stardust and pause top right,
 // the four generators along the bottom, the supernova's progress), the
@@ -25,7 +25,7 @@ export const LANGUAGES = [
   { code: "zh-CN", key: "lang.zh" },
 ] as const;
 
-/** The generators' icons in the skin's atlas. */
+/** The generators' icons in the style's atlas. */
 const ICONS = ["fire", "bolt", "gem", "star"] as const;
 
 /** The tokens' spacing scale in CSS px (og.ui.frameTheme answers it too, but builds the whole theme each call). */
@@ -166,7 +166,7 @@ function platform(world: World, g: GameV, p: PrefsV): void {
 }
 
 function capsule(id: string, build: () => void): void {
-  og.ui.row(id, { gap: S.xs, cross: "center", padding: { left: S.sm, top: S.xs, right: S.md, bottom: S.xs }, frame: "capsule", background: { token: "surface" } }, build);
+  og.ui.row(id, { gap: S.xs, cross: "center", padding: { left: S.sm, top: S.xs, right: S.md, bottom: S.xs }, frame: "hud", background: { token: "panel" } }, build);
 }
 
 function hud(world: World, g: GameV): void {
@@ -176,13 +176,13 @@ function hud(world: World, g: GameV): void {
   og.ui.setNavigation(false);
   og.ui.anchor("Wallet", { anchor: "topLeft", direction: "column", gap: S.xs }, () => {
     capsule("Sparks", () => {
-      og.ui.icon("Icon", "star", { size: 24, tint: { token: "accentInk" } });
+      og.ui.icon("Icon", "star", { size: 24, tint: { token: "highlight" } });
       // The sparks change every tick, so they are a label in the locale's words, not a counter
       // (a counter re-counts from where it is on every change); counters show what jumps.
       og.ui.label("Amount", big(world, g.sparks), { step: "xl", font: "display", nowrap: true });
     });
     og.ui.row("RateRow", { padding: { left: S.sm, top: 0, right: 0, bottom: 0 } }, () => {
-      og.ui.label("Rate", say(world, "hud.rate", { n: big(world, g.rate) }), { step: "body", color: { token: "fgMuted" }, nowrap: true });
+      og.ui.label("Rate", say(world, "hud.rate", { n: big(world, g.rate) }), { step: "body", color: { token: "inkMuted" }, nowrap: true });
     });
   });
   let paused = false;
@@ -213,10 +213,10 @@ function hud(world: World, g: GameV): void {
         if (g.refusedSlot === i && g.refusedTick === world.tick - 1) og.ui.shake({ sound: true });
         if (g.milestoneSlot === i && g.milestoneTick === world.tick - 1) og.ui.burst({ count: 10 });
         og.ui.row("Head", { gap: S.xxs, cross: "center" }, () => {
-          og.ui.label("Name", say(world, `gen.${name}`), { step: "body", color: { token: g.selected === i ? "accentInk" : "fg" }, nowrap: true });
-          og.ui.counter("Owned", n, { font: "mono", prefix: "×", color: { token: "fgMuted" } });
+          og.ui.label("Name", say(world, `gen.${name}`), { step: "body", color: { token: g.selected === i ? "highlight" : "ink" }, nowrap: true });
+          og.ui.counter("Owned", n, { font: "mono", prefix: "×", color: { token: "inkMuted" } });
         });
-        og.ui.label("Cost", big(world, cost), { font: "mono", color: { token: can ? "accentInk" : "fgMuted" }, nowrap: true });
+        og.ui.label("Cost", big(world, cost), { font: "mono", color: { token: can ? "highlight" : "inkMuted" }, nowrap: true });
       });
     });
   });
@@ -226,9 +226,9 @@ function hud(world: World, g: GameV): void {
   og.ui.anchor("Nova", { anchor: phone ? "topRight" : "bottomRight", offsetY: phone ? 64 : 0, direction: "column", cross: "center", gap: S.xxs }, () => {
     if (gain >= 1) {
       if (og.ui.actionButton("Supernova", say(world, "hud.nova"), { icon: "bolt", size: 64, primary: true }).clicked) g.confirmNova = true;
-      og.ui.label("Gain", say(world, "hud.novaGain", { n: gain }), { color: { token: "accentInk" }, nowrap: true });
+      og.ui.label("Gain", say(world, "hud.novaGain", { n: gain }), { color: { token: "highlight" }, nowrap: true });
     } else if (g.runEarned > 0) {
-      og.ui.label("At", say(world, "hud.novaAt", { n: big(world, novaAt(t)) }), { step: "caption", color: { token: "fgMuted" }, nowrap: true });
+      og.ui.label("At", say(world, "hud.novaAt", { n: big(world, novaAt(t)) }), { step: "caption", color: { token: "inkMuted" }, nowrap: true });
       og.ui.meter("Progress", Math.min(g.runEarned, novaAt(t)), novaAt(t), { width: px(phone ? 110 : 140) });
     }
   });
@@ -250,7 +250,7 @@ function settings(world: World, g: GameV, p: PrefsV): void {
     p.master = slider("Master", "settings.master", p.master);
     p.music = slider("Music", "settings.music", p.music);
     p.effects = slider("Effects", "settings.effects", p.effects);
-    og.ui.label("LanguageLabel", say(world, "settings.language"), { color: { token: "fgMuted" } });
+    og.ui.label("LanguageLabel", say(world, "settings.language"), { color: { token: "inkMuted" } });
     const r = og.ui.radio("Language", LANGUAGES.map((l) => say(world, l.key)), p.language, { horizontal: true });
     if (r.selected !== p.language) setLanguage(world, p, r.selected);
     p.reducedMotion = og.ui.toggle("Motion", p.reducedMotion, say(world, "settings.motion")).on;
@@ -287,7 +287,7 @@ function dialogs(world: World, g: GameV): void {
   }
   let collect = false;
   const w = og.ui.modal("Welcome", g.welcome, { title: say(world, "welcome.title"), width }, () => {
-    og.ui.row("Mark", { width: grow, align: "center" }, () => og.ui.icon("Icon", "clock", { size: 40, tint: { token: "accentInk" } }));
+    og.ui.row("Mark", { width: grow, align: "center" }, () => og.ui.icon("Icon", "clock", { size: 40, tint: { token: "highlight" } }));
     og.ui.label("Body", say(world, "welcome.body", { time: duration(world, g.away), n: big(world, g.offline) }), { width: grow, align: "center" });
     og.ui.row("Actions", { width: grow, align: "center" }, () => {
       if (og.ui.button("Collect", say(world, "welcome.collect"), { variant: "primary" }).clicked) collect = true;
@@ -373,7 +373,7 @@ export const Ui = defineSystem("Ui", { reads: [Tuning, og.Input, og.Gamepad], wr
       ],
       footer: say(world, "title.footer"),
       // The title the game opens on is built settled: the web draws it behind the play gate, where
-      // the skin's entrance would stand part-way until the tap (og-platform-sdk §3). Later titles enter.
+      // the style's entrance would stand part-way until the tap (og-platform-sdk §3). Later titles enter.
       instant: !g.leftTitle,
     });
     if (!g.settingsOpen && r.selected === "play") {

package/archetypes/idle/tools/make-assets.py

@@ -8,7 +8,7 @@
   the sky's haze), spark.png (particles and the fixed stars) and
   mote-<generator>.png (the four motes: an ember, a bolt, a crystal, a
   star),
-- assets/skins/sparkorb/atlas.png: the neon pack's atlas
+- assets/styles/sparkorb/atlas.png: the neon pack's atlas
   (templates/ui-kit) with its magenta frames turned violet,
 - assets/fx/*.ogt: the particle emitters (the tap's burst, a milestone's
   ring, the supernova, the sparks drifting up from the orb, the stars),
@@ -272,10 +272,10 @@ render sprite 0
 """)
 
 
-# ── the skin's atlas ───────────────────────────────────────────────────────
+# ── the style's atlas ───────────────────────────────────────────────────────
 
 def read_png(path):
-    """An 8-bit RGBA, non-interlaced PNG's rows of pixels (what make-skins.py writes)."""
+    """An 8-bit RGBA, non-interlaced PNG's rows of pixels (what make-styles.py writes)."""
     data = open(path, "rb").read()
     at, idat, w, h = 8, b"", 0, 0
     while at < len(data):
@@ -315,7 +315,7 @@ def read_png(path):
 def atlas():
     """The neon pack's atlas with its baked magenta frames turned to the
     night's violet (hue 300 to 262), the rest untouched."""
-    src = os.path.join(root, "..", "..", "ui-kit", "assets", "skins", "neon", "atlas.png")
+    src = os.path.join(root, "..", "..", "styles", "neon", "atlas.png")
     if not os.path.exists(src):
         print("atlas recolour skipped (no templates/ui-kit here); the committed atlas stays")
         return None
@@ -434,7 +434,7 @@ def main():
         write(f"sprites/mote-{kind}.png.ogt", LINEAR)
     recoloured = atlas()
     if recoloured is not None:
-        write("skins/sparkorb/atlas.png", recoloured)
+        write("styles/sparkorb/atlas.png", recoloured)
     write("fx/tap.ogt", TAP)
     write("fx/milestone.ogt", MILESTONE)
     write("fx/nova.ogt", NOVA)

package/archetypes/match3/package.json

@@ -13,6 +13,6 @@
     "test": "og test ."
   },
   "dependencies": {
-    "@origingame/engine": "0.2.0"
+    "@origingame/engine": "0.4.0"
   }
 }

package/archetypes/match3/project.ogt

@@ -3,7 +3,7 @@ version 1
 ---
 name "Tile Swap"
 id "match3"
-engine "0.2.0"
+engine "0.4.0"
 entry "src/main.ts"
 profile "2d"
 tick 60

package/archetypes/rhythm/LICENSES.md

@@ -9,5 +9,5 @@
 | `assets/fx/*.ogt` | CC0 1.0 | self-made: the hit's burst, same script |
 | `assets/strings/*.ogt` | CC0 1.0 | self-made: the English and Chinese string tables |
 | `assets/fonts/NotoSansSC-subset.ttf` | SIL Open Font License 1.1 (`assets/fonts/OFL.txt`) | Noto Sans SC Regular, subset to Latin-1 and the characters of `assets/strings/zh-CN.ogt` by the same script from the project template's `assets/fonts/NotoSansSC-Regular-subset.ttf` |
-| `assets/skins/lanebeat/*` | CC0 1.0 art, SIL OFL 1.1 fonts | the engine's sci-fi style pack (`templates/ui-kit/assets/skins/scifi`, `assets/skins/lanebeat/LICENSES.md`) with this game's palette |
+| `assets/styles/lanebeat/*` | CC0 1.0 art, SIL OFL 1.1 fonts | the engine's sci-fi style pack (`templates/styles/scifi`, `assets/styles/lanebeat/LICENSES.md`) with this game's palette |
 | `references/*/*.png` | CC0 1.0 | frames of this game recorded by `tests/frames.og.ts` |