@origingame/create-game 0.2.0 → 0.4.0

package/archetypes/roguelike/src/ui.ts

@@ -1,4 +1,4 @@
-// Lamp Dive's screens on og.ui and the skin in assets/skins/lampdive (the
+// Lamp Dive's screens on og.ui and the style in assets/styles/lampdive (the
 // engine's pixel pack in tomb colours): the title, the HUD (health, strike,
 // armour and gold in the top-left corner, the floor and pause in the
 // top-right, the draught and, on a touch screen, Wait and a d-pad along the
@@ -167,7 +167,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,7 +176,7 @@ function hud(world: World, g: GameV): void {
   og.ui.setNavigation(false);
   og.ui.anchor("Status", { anchor: "topLeft", direction: "column", gap: S.sm }, () => {
     capsule("Health", () => {
-      og.ui.icon("Heart", "heart", { size: 22, tint: { token: g.hp * 3 <= g.hpMax ? "danger" : "fg" } });
+      og.ui.icon("Heart", "heart", { size: 22, tint: { token: g.hp * 3 <= g.hpMax ? "danger" : "ink" } });
       og.ui.meter("Bar", g.hp, g.hpMax, { kind: "health", label: `${g.hp}/${g.hpMax}`, width: px(touch ? 110 : 150) });
     });
     capsule("Stats", () => {
@@ -184,7 +184,7 @@ function hud(world: World, g: GameV): void {
       og.ui.counter("Attack", g.attack, { font: "mono", width: px(22) });
       og.ui.icon("Shield", "shield", { size: 20 });
       og.ui.counter("Armour", g.armour, { font: "mono", width: px(22) });
-      og.ui.icon("Coin", "coin", { size: 20, tint: { token: "accent" } });
+      og.ui.icon("Coin", "coin", { size: 20, tint: { token: "gold" } });
       og.ui.counter("Gold", g.gold, { font: "mono", width: px(40) });
     });
   });
@@ -229,7 +229,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;
@@ -250,7 +250,7 @@ function summary(world: World, g: GameV): "again" | "menu" | null {
   let chose: "again" | "menu" | null = null;
   og.ui.modal("Summary", g.phase === Phase.Over, { title: g.won ? say(world, "over.won") : say(world, "over.lost", { n: g.floor }), locked: true, width: px(Math.min(400, og.ui.frameViewport().width - 32)) }, () => {
     og.ui.row("Mark", { width: grow, align: "center" }, () => {
-      og.ui.transition("Icon", true, { kind: "pop" }, () => og.ui.icon("Glyph", g.won ? "crown" : "skull", { size: 48, tint: { token: g.won ? "accent" : "fgMuted" } }));
+      og.ui.transition("Icon", true, { kind: "pop" }, () => og.ui.icon("Glyph", g.won ? "crown" : "skull", { size: 48, tint: { token: g.won ? "primary" : "inkMuted" } }));
       if (g.won && g.overTicks === OVER_DELAY + 20) og.ui.burst({ count: 12 });
     });
     og.ui.column("Stats", { width: grow, gap: 0 }, () => {
@@ -261,7 +261,7 @@ function summary(world: World, g: GameV): "again" | "menu" | null {
       og.ui.keyValue("Finds", say(world, "over.finds"), `${g.finds}`, true);
       if (!g.won) og.ui.keyValue("By", say(world, "over.by"), say(world, g.killedBy >= 0 ? `foe.${FOES[g.killedBy]}` : "foe.none"), false);
     });
-    og.ui.label("Record", say(world, "over.record", { dives: g.dives, relics: g.relics }), { color: { token: "fgMuted" }, align: "center", width: grow });
+    og.ui.label("Record", say(world, "over.record", { dives: g.dives, relics: g.relics }), { color: { token: "inkMuted" }, align: "center", width: grow });
     og.ui.row("Actions", { width: grow, gap: S.sm }, () => {
       if (og.ui.button("Again", say(world, "over.again"), { variant: "primary", width: grow }).clicked) chose = "again";
       if (og.ui.button("Menu", say(world, "over.menu"), { width: grow }).clicked) chose = "menu";
@@ -317,7 +317,7 @@ export const Ui = defineSystem("Ui", { reads: [Tuning], writes: [Game, Prefs, og
       ],
       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") startDive(world, g);

package/archetypes/runner/package.json

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

package/archetypes/runner/project.ogt

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

package/archetypes/third-person/LICENSES.md

@@ -19,5 +19,5 @@ Origin Engine authors or one of the engine's CC0 assets.
 | `assets/audio/*.ogt` | CC0 1.0 | `og sfx` presets (click, select, back, error, levelup and a footstep) 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, CJK punctuation 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/ember/*` | CC0 1.0 art, SIL OFL 1.1 fonts | the engine's fantasy style pack (`templates/ui-kit`), `assets/skins/ember/LICENSES.md` |
+| `assets/styles/ember/*` | CC0 1.0 art, SIL OFL 1.1 fonts | the engine's fantasy style pack (`templates/ui-kit`), `assets/styles/ember/LICENSES.md` |
 | `references/*/*.png` | CC0 1.0 | frames of this game recorded by `tests/frames.og.ts` |

package/archetypes/third-person/README.md

@@ -60,7 +60,7 @@ og build . --publish         # dist/: the play page as it ships (behind "tap to
   vignette, the teal-orange LUT and film grain, the sky, height fog and
   `og.DayNight` running from late afternoon to night as the run's clock.
 - **Screens on og.ui with tokens and MSDF text** (og-ui §2–§6, og-taste):
-  the engine's fantasy pack as `assets/skins/ember` (Cinzel and Newsreader,
+  the engine's fantasy pack as `assets/styles/ember` (Cinzel and Newsreader,
   Noto Sans SC as the fallback, every font an MSDF atlas at cook time); the
   title over an orbit of the vale, the HUD (hearts and beacons top-left,
   the dusk clock and Pause top-right, the kindling prompt and its progress
@@ -180,7 +180,7 @@ stages.
 2. **The pressure**: `duskSeconds`, the sentinels' speeds and sight, their
    minds in `assets/ai/`, `HEARTS` in `src/components.ts`.
 3. **The look**: the post stack, fog and sky in `buildVale`, the water's
-   colours, the skin's palette in `assets/skins/ember/skin.ogt`.
+   colours, the style's palette in `assets/styles/ember/style.ogt`.
 4. **The characters**: another CC0 humanoid in `assets/models/` with the
    clip library retargeted onto it (`src/anim.ts`), the graphs' thresholds.
 5. **Words**: `assets/strings/*.ogt`; a new Chinese string needs the script
@@ -230,8 +230,8 @@ Nothing here is downloaded. `tools/make-assets.py` regenerates the vale's
 heightmap and control map, the sounds and music, the `og sfx` presets, the
 sentinels' minds and the font subset byte for byte; the characters, the
 clip library, the textures and the beacon's effects are the engine's own
-CC0 assets. `LICENSES.md` lists every file; the skin's are in
-`assets/skins/ember/LICENSES.md`.
+CC0 assets. `LICENSES.md` lists every file; the style's are in
+`assets/styles/ember/LICENSES.md`.
 
 ## Known limits (engine gaps, not design)
 

package/archetypes/third-person/assets/{skins → styles}/ember/LICENSES.md

@@ -1,13 +1,13 @@
-# The ember skin (a copy of the fantasy style pack): licences
+# The ember style (a copy of the fantasy style pack): licences
 
 | 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 |
 | `Cinzel-Bold.ttf` | SIL Open Font License 1.1 (`OFL.txt`) | Cinzel Bold (github.com/NDISCOVER/Cinzel); unmodified. Copyright 2020 The Cinzel Project Authors (https://github.com/NDISCOVER/Cinzel) |
 | `Newsreader-Medium.ttf` | SIL Open Font License 1.1 (`OFL.txt`) | Newsreader (github.com/productiontype/Newsreader); a static instance (wght 500, opsz 16) of the variable font, subset to Latin-1 with fontTools. Copyright 2020 The Newsreader Project Authors (http://github.com/productiontype/Newsreader) |
 
 Characters these fonts lack (Chinese, Japanese, Korean) are drawn with the
-skin's `fallback` font, `fonts/NotoSansSC-subset.ttf` (the platform's
+style's `fallback` font, `fonts/NotoSansSC-subset.ttf` (the platform's
 subset, OFL 1.1, `assets/fonts/OFL.txt`).

package/archetypes/third-person/assets/{skins/ember/skin.ogt → styles/ember/style.ogt}

@@ -1,52 +1,51 @@
-type skin
+type style
 version 1
 ---
-# Ember Vale's skin: a copy of the fantasy style pack (templates/ui-kit/tools/make-skins.py; CC0 art, OFL fonts; LICENSES.md).
+# Ember Vale's style: a copy of the fantasy style pack (templates/ui-kit/tools/make-styles.py; CC0 art, OFL fonts; LICENSES.md).
 name "ember"
-base dark
-atlas "skins/ember/atlas.png" 384 256
+scheme dark
+atlas "styles/ember/atlas.png" 384 256
 scale 1
 palette {
-  bg "#1a120b"
-  bgSubtle "#241910"
-  surface "#efdfb8"
-  surfaceRaised "#efdfb8"
-  surfaceHover "#f4e8c8"
-  materialThick "#efdfb8"
-  materialRegular "#efdfb8f2"
-  materialThin "#efdfb8e6"
-  fg "#2a1a0c"
-  fgMuted "#3d2a18"
-  fgSubtle "#654b31"
-  fgInverse "#f4e8c8"
-  fill "#e2cc98"
-  fillStrong "#d6bc82"
-  border "#9b7a4a"
-  borderStrong "#5c4127"
-  accent "#7a520f"
-  accentHover "#74500e"
-  accentActive "#6a470c"
-  accentFg "#fff4dc"
-  accentInk "#6e470d"
-  accentSoft "#7a520f40"
+  backdrop "#1a120b"
+  well "#241910"
+  panel "#efdfb8"
+  panelHover "#f4e8c8"
+  panelRaised "#efdfb8"
+  line "#9b7a4a"
+  lineStrong "#5c4127"
+  ink "#2a1a0c"
+  inkMuted "#3d2a18"
+  inkFaint "#654b31"
+  inkInverse "#f4e8c8"
+  control "#e2cc98"
+  controlStrong "#d6bc82"
+  primary "#7a520f"
+  primaryHover "#74500e"
+  primaryActive "#6a470c"
+  onPrimary "#fff4dc"
+  primarySoft "#7a520f40"
+  highlight "#6e470d"
   focus "#8f2d1f"
-  thumb "#f4e8c8"
+  knob "#f4e8c8"
+  hud "#efdfb8"
   scrim "#0d0805cc"
+  shadow "#000000aa"
+  sheen "#ffffff52"
   success "#2d5a1e"
   warn "#704713"
   danger "#6e1b10"
   info "#22517f"
-  shadow "#000000aa"
-  stage "#1a120b"
+  health "#2d5a1e"
+  mana "#0a84ff"
+  xp "#bf5af2"
+  gold "#7a520f"
 }
 radius {
+  small 4
   control 4
-  field 4
-  block 4
-  card 4
-  panel 6
-  sheet 6
-  button 6
+  bar 4
+  panel 4
 }
 ramp {
   body 15 22
@@ -67,12 +66,12 @@ durations {
   slow 480
 }
 fonts {
-  body "skins/ember/Newsreader-Medium.ttf"
-  display "skins/ember/Cinzel-Bold.ttf"
-  numeric "skins/ember/Cinzel-Bold.ttf"
+  body "styles/ember/Newsreader-Medium.ttf"
+  display "styles/ember/Cinzel-Bold.ttf"
+  numeric "styles/ember/Cinzel-Bold.ttf"
   fallback "fonts/NotoSansSC-subset.ttf"
 }
-icons "skins/ember/icons.png" 8 4 {
+icons "styles/ember/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 16 authored
@@ -84,7 +83,7 @@ slice buttonDisabled 328 4 48 48 10 tint
 slice field 4 104 48 48 8 tint
 slice slot 56 104 48 48 10 tint
 slice tooltip 108 104 32 32 8 tint
-slice capsule 144 104 32 32 12 tint
+slice hud 144 104 32 32 12 tint
 slice track 180 104 32 16 6 tint
 slice fill 216 104 32 16 6 tint
 soft 252 104 64 64 24
@@ -96,7 +95,7 @@ tile 204 172 64 64 64 64 0.5 6 panel card
 shadow panel 0 10 18 2 "#000000b3"
 shadow card 0 4 8 0 "#00000066"
 shadow button 0 3 4 0 "#00000073"
-shadow capsule 0 3 6 0 "#00000080"
+shadow hud 0 3 6 0 "#00000080"
 press 0.98 0.96 1
 hover 0 1.0
 motion {

package/archetypes/third-person/package.json

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

package/archetypes/third-person/project.ogt

@@ -3,7 +3,7 @@ version 1
 ---
 name "Ember Vale"
 id "third-person"
-engine "0.2.0"
+engine "0.4.0"
 entry "src/main.ts"
 profile "3d"
 tick 60

package/archetypes/third-person/src/components.ts

@@ -31,7 +31,7 @@ export const HEARTS = 3;
 /** The run: the hero's progress, the clock 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)." }),
   ending: u32(Ending.None, { doc: "Ending.* once a run is over." }),
   paused: bool(false),
   settingsOpen: bool(false),

package/archetypes/third-person/src/main.ts

@@ -8,7 +8,7 @@
 // grab costs a heart. Three hearts gone, or night, ends the run; every
 // beacon lit wins it. Then the summary, and again.
 //
-// `start` loads the strings, the skin and the sounds, builds the vale
+// `start` loads the strings, the style and the sounds, builds the vale
 // (src/world.ts) and spawns the hero (src/hero.ts), the sentinels
 // (src/sentinels.ts) and the voices (src/sound.ts). The beacons are in
 // src/beacons.ts, the screens and the run's clock in src/ui.ts and the
@@ -26,9 +26,9 @@ import { BEACON_AT, buildVale, ground, HOURS, must, setHour } from "./world.ts";
 
 function start(world: World): void {
   for (const l of LANGUAGES) must(og.i18n.load(world, `strings/${l.code}.ogt`));
-  const skin = must(og.load.skin(world, "skins/ember/skin.ogt"));
+  const style = must(og.load.style(world, "styles/ember/style.ogt"));
   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") } }));
   buildVale(world);
   spawnHero(world);
   spawnSentinels(world);

package/archetypes/third-person/src/sound.ts

@@ -31,7 +31,7 @@ export function spawnVoices(world: World): void {
   must(world.insert(fx, og.AudioBusFx, { bus: "music", duck: true, duckBus: "sfx", duckDepth: 5, duckRelease: 0.6 }));
   const echo = must(world.spawn({ name: "sfx-bus" }));
   must(world.insert(echo, og.AudioBusFx, { bus: "sfx", reverb: 0.18 }));
-  // The touch HUD's Jump and Kindle: the skin's press sound on the ui bus,
+  // The touch HUD's Jump and Kindle: the style's press sound on the ui bus,
   // like every og.ui button, beside the jump's or the fire's own effect.
   const tap = must(world.spawn({ name: `sfx-${Sound.Tap}` }));
   must(world.insert(tap, og.AudioSource, { sound: sound("audio/ui-press.ogt"), playing: false, bus: "ui", volume: 0.5, priority: 150 }));

package/archetypes/third-person/src/ui.ts

@@ -1,4 +1,4 @@
-// Ember Vale's screens on og.ui and the skin in assets/skins/ember (the
+// Ember Vale's screens on og.ui and the style in assets/styles/ember (the
 // engine's fantasy pack): the title over an orbit of the vale, the HUD
 // (hearts and beacons top-left, the dusk clock and pause top-right, the
 // kindling prompt and its progress at the bottom; on a touch screen a
@@ -216,7 +216,7 @@ function clock(world: World, g: GameV, dt: number): 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 clockText(g: GameV): string {
@@ -232,10 +232,10 @@ function hud(world: World, g: GameV): void {
   og.ui.setNavigation(false);
   og.ui.anchor("Status", { anchor: "topLeft", direction: "column", gap: S.sm }, () => {
     capsule("Hearts", () => {
-      for (let i = 0; i < HEARTS; i++) og.ui.icon(`Heart${i}`, "heart", { size: 22, tint: { token: i < g.hearts ? "danger" : "fillStrong" } });
+      for (let i = 0; i < HEARTS; i++) og.ui.icon(`Heart${i}`, "heart", { size: 22, tint: { token: i < g.hearts ? "danger" : "controlStrong" } });
     });
     capsule("Beacons", () => {
-      og.ui.icon("Fire", "fire", { size: 22, tint: { token: "accent" } });
+      og.ui.icon("Fire", "fire", { size: 22, tint: { token: "primary" } });
       og.ui.label("Count", say(world, "hud.beacons", { n: g.lit, total: BEACONS }), { step: "lg", font: "mono", nowrap: true });
     });
   });
@@ -243,9 +243,9 @@ function hud(world: World, g: GameV): void {
   og.ui.anchor("Dusk", { anchor: "topRight", gap: S.sm, cross: "center" }, () => {
     capsule("Clock", () => {
       const left = 1 - (g.hour - HOURS.start) / (HOURS.night - HOURS.start);
-      og.ui.icon("Glyph", "clock", { size: 20, tint: { token: left < 0.25 ? "danger" : "fg" } });
+      og.ui.icon("Glyph", "clock", { size: 20, tint: { token: left < 0.25 ? "danger" : "ink" } });
       og.ui.label("Hour", clockText(g), { font: "mono", nowrap: true, width: px(48) });
-      og.ui.meter("Left", Math.max(0, left), 1, { kind: "accent", width: px(touch ? 70 : 110) });
+      og.ui.meter("Left", Math.max(0, left), 1, { kind: "primary", width: px(touch ? 70 : 110) });
     });
     if (og.ui.actionButton("Pause", say(world, "hud.pause"), { icon: "pause", size: 48 }).clicked) paused = true;
   });
@@ -254,7 +254,7 @@ function hud(world: World, g: GameV): void {
   if (g.near >= 0 && g.ending === Ending.None) {
     og.ui.anchor("Prompt", { anchor: "bottom", offsetY: touch ? -150 : -24, direction: "column", cross: "center", gap: S.xs }, () => {
       capsule("Hint", () => {
-        og.ui.icon("Fire", "fire", { size: 18, tint: { token: "accent" } });
+        og.ui.icon("Fire", "fire", { size: 18, tint: { token: "primary" } });
         const pad = must(world.resource(og.Gamepad)).connected();
         og.ui.label("Text", say(world, touch ? "hud.hint.touch" : pad ? "hud.hint.pad" : "hud.hint.keys"), { nowrap: true });
       });
@@ -346,7 +346,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;
@@ -375,7 +375,7 @@ function summary(world: World, g: GameV): "again" | "menu" | null {
   const title = won ? "over.won" : g.ending === Ending.Caught ? "over.caught" : "over.night";
   og.ui.modal("Summary", g.phase === Phase.Over, { title: say(world, title), locked: true, width: px(Math.min(400, og.ui.frameViewport().width - 32)) }, () => {
     og.ui.row("Mark", { width: grow, align: "center" }, () => {
-      og.ui.transition("Icon", true, { kind: "pop" }, () => og.ui.icon("Glyph", won ? "fire" : g.ending === Ending.Caught ? "skull" : "clock", { size: 48, tint: { token: won ? "accent" : "fgMuted" } }));
+      og.ui.transition("Icon", true, { kind: "pop" }, () => og.ui.icon("Glyph", won ? "fire" : g.ending === Ending.Caught ? "skull" : "clock", { size: 48, tint: { token: won ? "primary" : "inkMuted" } }));
       // From a third of a second into the summary, every frame: a burst plays only while it is called.
       if (won && g.overTicks >= OVER_DELAY + 20) og.ui.burst({ count: 14 });
     });
@@ -385,7 +385,7 @@ function summary(world: World, g: GameV): "again" | "menu" | null {
       og.ui.keyValue("Hurts", say(world, "over.hurts"), `${g.hurts}`, true);
       og.ui.keyValue("Best", say(world, "over.best"), g.best > 0 ? seconds(g.best) + (g.newBest ? " ★" : "") : say(world, "over.none"), false);
     });
-    og.ui.label("Record", say(world, "over.record", { runs: g.runs, wins: g.wins }), { color: { token: "fgMuted" }, align: "center", width: grow });
+    og.ui.label("Record", say(world, "over.record", { runs: g.runs, wins: g.wins }), { color: { token: "inkMuted" }, align: "center", width: grow });
     og.ui.row("Actions", { width: grow, gap: S.sm }, () => {
       if (og.ui.button("Again", say(world, "over.again"), { variant: "primary", width: grow }).clicked) chose = "again";
       if (og.ui.button("Menu", say(world, "over.menu"), { width: grow }).clicked) chose = "menu";
@@ -421,7 +421,7 @@ export const Ui = defineSystem("Ui", { reads: [Tuning, og.Gamepad, og.Pointers],
       ],
       footer: say(world, og.ui.frameViewport().coarsePointer ? "title.footer.touch" : "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" && g.phase === Phase.Title) startRun(world, g);

package/archetypes/topdown/package.json

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

package/archetypes/topdown/project.ogt

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

package/archetypes/tower-defense/LICENSES.md

@@ -11,5 +11,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/pathguard/*` | CC0 1.0 art, SIL OFL 1.1 fonts | the engine's cartoon style pack (`templates/ui-kit/assets/skins/cartoon`, `assets/skins/pathguard/LICENSES.md`) with this game's palette |
+| `assets/styles/pathguard/*` | CC0 1.0 art, SIL OFL 1.1 fonts | the engine's cartoon style pack (`templates/styles/cartoon`, `assets/styles/pathguard/LICENSES.md`) with this game's palette |
 | `references/*/*.png` | CC0 1.0 | frames of this game recorded by `tests/frames.og.ts` |

package/archetypes/tower-defense/README.md

@@ -55,10 +55,10 @@ og build . --publish         # dist/: the play page as it ships
   doorstep is a red number, a 6-tick hit stop, trauma and a kick, the
   lantern flashing red and squashing. Plants pop up when set and squash
   when they shoot.
-- **Screens on og.ui with a skin** (og-ui §2–§6, og-taste §1–§7): the
-  engine's cartoon pack recoloured as `assets/skins/pathguard` (cream
+- **Screens on og.ui with a style** (og-ui §2–§6, og-taste §1–§7): the
+  engine's cartoon pack recoloured as `assets/styles/pathguard` (cream
   panels on the night lawn, the lantern's orange as the one accent); the
-  title (`og.ui.mainMenu`), the HUD as capsules in the corners with
+  title (`og.ui.mainMenu`), the HUD as boxes in the corners with
   counting numbers (`og.ui.counter`), the plant tray (right on a wide
   screen, along the bottom on a phone), `og.ui.pauseMenu`, a settings
   dialog and the end card built from widgets (stars landing with
@@ -176,7 +176,7 @@ The visitors' numbers are `KINDS` and the waves `WAVES` in `src/systems.ts`.
    `fire`.
 3. **The field**: `MAP` in `tools/make-assets.py` (H hedge, R stone, G the
    gate, D the doorstep), then `python3 tools/make-assets.py && og cook .`.
-4. **The look**: `assets/skins/pathguard/skin.ogt`'s palette and the art
+4. **The look**: `assets/styles/pathguard/style.ogt`'s palette and the art
    in `tools/make-assets.py`.
 5. **Words**: `assets/strings/*.ogt`; a new Chinese string needs the
    script run again to subset the font.
@@ -225,7 +225,7 @@ in the engine repository).
 give the same bytes): the tileset, the map, the sprite sheet, the glow and
 particle textures and emitters, the sounds and the music, the `og sfx`
 preset files of the UI's sounds, and the font subset. `LICENSES.md` lists
-them; the skin's are in `assets/skins/pathguard/LICENSES.md`.
+them; the style's are in `assets/styles/pathguard/LICENSES.md`.
 
 ## Known limits (engine gaps, not design)
 

package/archetypes/tower-defense/assets/{skins → styles}/pathguard/LICENSES.md

@@ -1,13 +1,13 @@
-# Path Guard's skin (the engine's cartoon style pack, recoloured): licences
+# Path Guard's style (the engine's cartoon style pack, recoloured): licences
 
 | 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 |
 | `Fredoka-SemiBold.ttf` | SIL Open Font License 1.1 (`OFL.txt`) | Fredoka SemiBold (Google Fonts); unmodified. Copyright 2016 The Fredoka Project Authors (https://github.com/hafontia/Fredoka-One) |
 | `LilitaOne-Regular.ttf` | SIL Open Font License 1.1 (`OFL.txt`) | Lilita One (Google Fonts); unmodified (Reserved Font Name "Lilita One"). Copyright (c) 2011 Juan Montoreano (juan@remolacha.biz), with Reserved Font Names "Lilita One" |
 
 Characters these fonts lack (Chinese, Japanese, Korean) are drawn with the
-skin's `fallback` font, `fonts/NotoSansSC-Regular-subset.ttf` (the platform's
+style's `fallback` font, `fonts/NotoSansSC-Regular-subset.ttf` (the platform's
 subset, OFL 1.1, `assets/fonts/OFL.txt`).

package/archetypes/tower-defense/assets/styles/pathguard/style.ogt

@@ -0,0 +1,111 @@
+type style
+version 1
+---
+# Path Guard's style: the engine's cartoon style pack (templates/ui-kit/tools/make-styles.py; CC0 art, OFL fonts;
+# LICENSES.md) in a night-garden palette: cream panels on the dark lawn, the lantern's orange as the one accent.
+name "pathguard"
+scheme light
+atlas "styles/pathguard/atlas.png" 384 256
+scale 1
+palette {
+  backdrop "#10231a"
+  well "#15301f"
+  panel "#fff4dc"
+  panelHover "#ffe9bd"
+  panelRaised "#fff4dc"
+  line "#20302a"
+  lineStrong "#20302a"
+  ink "#0f1a14"
+  inkMuted "#3a483f"
+  inkFaint "#45534a"
+  inkInverse "#fff4dc"
+  control "#ffe08a"
+  controlStrong "#ffd466"
+  primary "#974009"
+  primaryHover "#8f3c0a"
+  primaryActive "#863809"
+  onPrimary "#fff4dc"
+  primarySoft "#ff8c3a40"
+  highlight "#a8400a"
+  focus "#5cb6e8"
+  knob "#ffffff"
+  hud "#fff4dcf5"
+  scrim "#07120ccc"
+  shadow "#0b1a1299"
+  sheen "#ffffff52"
+  success "#06681b"
+  warn "#7b5102"
+  danger "#700b1c"
+  info "#2256af"
+  health "#06681b"
+  mana "#007aff"
+  xp "#af52de"
+  gold "#b44c0d"
+}
+radius {
+  small 6
+  control 6
+  bar 6
+  panel 10
+}
+ramp {
+  body 15 20
+  meta 13 18
+  caption 13 18
+  lg 19 26
+  xl 22 28
+  xl2 26 30
+  xl3 30 34
+  displaySm 32 36
+  displayMd 40 44
+  displayLg 52 56
+}
+durations {
+  instant 110
+  fast 160
+  base 280
+  slow 420
+}
+fonts {
+  body "styles/pathguard/Fredoka-SemiBold.ttf"
+  display "styles/pathguard/LilitaOne-Regular.ttf"
+  numeric "styles/pathguard/LilitaOne-Regular.ttf"
+  fallback "fonts/NotoSansSC-subset.ttf"
+}
+icons "styles/pathguard/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 16 tint
+slice card 104 4 64 64 14 tint
+slice button 172 4 48 48 12 tint
+slice buttonHover 224 4 48 48 12 tint
+slice buttonPressed 276 4 48 48 12 tint
+slice buttonDisabled 328 4 48 48 12 tint
+slice field 4 104 48 48 10 tint
+slice slot 56 104 48 48 10 tint
+slice tooltip 108 104 32 32 10 tint
+slice hud 144 104 32 32 10 tint
+slice track 180 104 32 16 7 tint
+slice fill 216 104 32 16 7 tint
+soft 252 104 64 64 24
+divider 4 172 128 24 48 16 primary
+flourish 136 172 64 24 22 10 primary 2
+shadow panel 0 8 0 0 "#0b1a12cc"
+shadow card 0 5 0 0 "#0b1a1299"
+shadow button 0 5 0 0 "#0b1a12cc"
+shadow hud 0 4 0 0 "#0b1a1299"
+shadow slot 0 3 0 0 "#0b1a1266"
+textShadow display 0 4 0 "#0b1a12"
+# Body text gets a hairline of its own ink to the right: the Chinese fallback
+# (Noto Sans SC Regular) reads at the weight of the Latin face.
+textShadow body 1 0 0 "#20302a"
+press 1.08 0.88 3
+hover -3 1.04
+motion {
+  enter pop
+  stagger 50
+  toast pop
+  progress 360
+  shake 8
+  pop 0.22
+}

package/archetypes/tower-defense/package.json

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