@genex-ai/cli-demo 0.94.0-dev.250 → 0.95.0-dev.252
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +2000 -2050
- package/package.json +1 -1
- package/templates/skills/genex-ai-character/SKILL.md +13 -14
- package/templates/skills/genex-ai-hud/SKILL.md +84 -85
- package/templates/skills/genex-ai-hud/references/stage1-prompt-template.md +12 -11
- package/templates/skills/genex-ai-menu/SKILL.md +72 -73
- package/templates/skills/genex-ai-model/SKILL.md +1 -1
- package/templates/skills/genex-game-director/SKILL.md +32 -16
- package/templates/skills/genex-game-director/references/design-contract.md +9 -5
- package/templates/skills/genex-game-director/references/routing-map.md +17 -7
- package/templates/skills/genex-getting-started/SKILL.md +5 -4
- package/templates/skills/genex-threejs-game-ui/SKILL.md +92 -188
- package/templates/skills/genex-threejs-game-ui/references/style-capsules.md +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genex-ai/cli-demo",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.95.0-dev.252",
|
|
4
4
|
"description": "Set up your project's agent workspace (.claude/.codex/.cursor in the game folder), authorize, create a game project, generate AI assets, and publish (genex CLI).",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -14,11 +14,11 @@ exemption; **"no human body ever appears in this game" is.** A game whose
|
|
|
14
14
|
player is genuinely not a person — a car, a ship, an RTS cursor, a puzzle
|
|
15
15
|
board — generates that object with `npx genex model` instead.
|
|
16
16
|
|
|
17
|
-
**Start it EARLY** — enqueue the character
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
**Start it EARLY** — enqueue the character with your first art actions, not as
|
|
18
|
+
an afterthought once the world is built. It is the player's body and every
|
|
19
|
+
stage of it takes minutes server-side, so firing at minute 0 means it lands
|
|
20
|
+
around the v0 preview instead of long after it. Its concept candidates get
|
|
21
|
+
their own review beat with the player when they arrive.
|
|
22
22
|
|
|
23
23
|
Until it lands, the player's body is the profile VRM avatar. That is a fallback
|
|
24
24
|
in two shapes and both are spoken aloud: a **temporary** body while the
|
|
@@ -38,15 +38,14 @@ no code to rewrite, which is exactly why there is no excuse to skip it.
|
|
|
38
38
|
**Two lanes, two approval shapes:**
|
|
39
39
|
|
|
40
40
|
- **The game-default lane (one user stop).** The three concept candidates
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
DESIGN.md → Decisions.
|
|
41
|
+
ARE the review beat: show the actual images, the player picks one. That
|
|
42
|
+
pick authorizes the whole lane (preview and the 10,000-face rigging
|
|
43
|
+
remesh both proceed on it — state each step plainly as you run it). If
|
|
44
|
+
the player hasn't picked by the time the character blocks progress (or
|
|
45
|
+
~10 minutes), pick the strongest candidate yourself, say which and why
|
|
46
|
+
in chat, and proceed. That auto-proceed — including its generation
|
|
47
|
+
spend — is owner-ratified platform policy (2026-07-23), not an agent
|
|
48
|
+
liberty: record the pick in DESIGN.md → Decisions.
|
|
50
49
|
- **The user-initiated custom-character lane (two stops — the ceremony
|
|
51
50
|
below, in full).** When the user themselves asked for a custom
|
|
52
51
|
character, the approvals ARE the product: an explicit candidate
|
|
@@ -1,37 +1,44 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: genex-ai-hud
|
|
3
|
-
description: Generate
|
|
3
|
+
description: Generate HUD sprites — matched frames, masks, and icons in one coherent art style — via the mockup-then-deconstruct pipeline (`npx genex image` + `npx genex ui`), then wire them as a DOM overlay with channel-accurate masked fills. Use when the game's own style wants drawn chrome — ornate, painterly, comic, hand-made — when the player asks for HUD art, or to generate one element the game needs.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# Genex AI · HUD
|
|
7
7
|
|
|
8
|
-
Generate
|
|
9
|
-
|
|
8
|
+
Generate a game's HUD sprites in ONE art style — a full-HUD mockup, then a
|
|
9
|
+
deconstruction into individual assets — and wire them as a plain-DOM overlay
|
|
10
10
|
with masked fills that track the art's real channels. The result is an
|
|
11
11
|
art-directed HUD (etched steel ammo strip, parchment HP bar, chrome minimap
|
|
12
12
|
ring) that no hand-written CSS can fake.
|
|
13
13
|
|
|
14
|
-
##
|
|
15
|
-
|
|
16
|
-
- **
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
the
|
|
29
|
-
|
|
14
|
+
## When to reach for this — and when clean CSS is the answer
|
|
15
|
+
|
|
16
|
+
- **Drawn chrome earns its place in a game whose own style wants it** —
|
|
17
|
+
ornate, painterly, comic, hand-made, diegetic. Gothic filigree frames,
|
|
18
|
+
rusted post-apocalyptic panels, carbon-fiber racing telemetry, hand-painted
|
|
19
|
+
storybook plates: art the brief already promises and CSS cannot fake. The
|
|
20
|
+
player asking for HUD art is the same signal, stated out loud.
|
|
21
|
+
- **A restrained interface built in clean CSS is a finished HUD.** For a
|
|
22
|
+
spare modern game — thin strokes, quiet type, one accent hue — hand-built
|
|
23
|
+
chrome styled FROM THE BRIEF is the better answer, and it ships as the HUD
|
|
24
|
+
with nothing owed. It is not scaffolding and not a lesser tier. When you
|
|
25
|
+
can't tell which way a game leans, lean minimal.
|
|
26
|
+
- **One element is a normal run of this lane.** Generating a single frame,
|
|
27
|
+
mask, icon, emblem, or wordmark you decided the game needs is first-class
|
|
28
|
+
use — fill the templates for that one asset (or regenerate it per-sprite,
|
|
29
|
+
below) and wire it to the same standard. There is no all-or-nothing
|
|
30
|
+
pipeline to finish.
|
|
31
|
+
- **Whatever you do generate is executed in full.** Extraction, masks,
|
|
32
|
+
channel-accurate fills, `npx genex ui audit` — judgment decides whether art
|
|
33
|
+
is generated, never how well it is done. Half-wired sprites are the one
|
|
34
|
+
outcome this skill has no room for.
|
|
35
|
+
- `$genex-threejs-game-ui` owns the overlay architecture, the shared style
|
|
36
|
+
brief, and the CSS craft floor this lane plugs into — read it either way.
|
|
30
37
|
|
|
31
38
|
## Three layers — plates are DOM, chrome is sprites, data is DOM
|
|
32
39
|
|
|
33
40
|
- **Plate (DOM).** The backing surface behind a widget is built in CSS — in
|
|
34
|
-
whatever register the brief and
|
|
41
|
+
whatever register the brief and the mockup call for: smoked glass
|
|
35
42
|
(`background: rgba(<darkest hue>, 0.35–0.6)` + `backdrop-filter: blur(6–12px)`
|
|
36
43
|
and its `-webkit-` twin) when the style wants translucency, a solid painted
|
|
37
44
|
plate, a subtle gradient — or no plate at all for an outline-led look.
|
|
@@ -146,9 +153,9 @@ The HUD overlays a **live 3D scene**. The pixels between widgets show the game.
|
|
|
146
153
|
|
|
147
154
|
## Style brief
|
|
148
155
|
|
|
149
|
-
Start from the game's ONE shared style brief (`$genex-threejs-game-ui`
|
|
150
|
-
|
|
151
|
-
|
|
156
|
+
Start from the game's ONE shared style brief (`$genex-threejs-game-ui` owns
|
|
157
|
+
it) — the HUD, menu, and loader consume the same brief; a HUD styled in a
|
|
158
|
+
second world is a bug. Expand it here with what sprites need:
|
|
152
159
|
materials, an explicit palette of **4–5 named hues**, weathering, line
|
|
153
160
|
treatment, atmosphere. Keep outline stroke width
|
|
154
161
|
consistent across widgets — per-widget stroke changes read as amateur fastest.
|
|
@@ -219,10 +226,10 @@ are committing to build):
|
|
|
219
226
|
grenade slot on a rifle-only HUD, an armor bar with no armor, a minimap over
|
|
220
227
|
no map — is a failure, and "the model drew it so I kept it" is how it happens.
|
|
221
228
|
|
|
222
|
-
The mockup
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
229
|
+
The mockup anchors STYLE; the game contract owns WHAT EXISTS. When the picture
|
|
230
|
+
and the mechanics disagree, the mechanics win. Record a cut widget in
|
|
231
|
+
DESIGN.md as "deferred from mockup" while the lane is running — never silently
|
|
232
|
+
wired, never silently dropped.
|
|
226
233
|
|
|
227
234
|
## The pipeline
|
|
228
235
|
|
|
@@ -232,47 +239,40 @@ printed. Fill the two prompt templates —
|
|
|
232
239
|
and [references/stage2-prompt-template.md](references/stage2-prompt-template.md)
|
|
233
240
|
— before Stages 1 and 2.
|
|
234
241
|
|
|
235
|
-
**Order of work
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
player's notes and the chain re-runs from the new frame — image-priced,
|
|
245
|
-
cheap by design, so say so in one line and do it. Only the menu VIDEO waits
|
|
246
|
-
(`$genex-ai-menu` owns its event triple). The scene half
|
|
247
|
-
of the prompt is written in TEXT from the game plan — `[GAME_SCENE]` in the
|
|
248
|
-
Stage-1 template: setting, the moment, what the player is doing, lighting.
|
|
249
|
-
**If a concept/reference image already exists — the user's own concept art, or
|
|
250
|
-
a look frame you generated and they approved — anchor Stage 1 to it with
|
|
242
|
+
**Order of work.** When you have decided this game's HUD gets sprites, Stage 1
|
|
243
|
+
renders a mockup of THIS game's HUD over THIS game's scene — ONE generation,
|
|
244
|
+
no candidate variants unless the player asks. The scene half of the prompt is
|
|
245
|
+
written in TEXT from the game plan — `[GAME_SCENE]` in the Stage-1 template:
|
|
246
|
+
setting, the moment, what the player is doing, lighting. Enqueue it
|
|
247
|
+
`--no-wait` and keep building; kick Stage 2 off as soon as the mockup lands,
|
|
248
|
+
since every sprite is cut from it.
|
|
249
|
+
**If a reference image already exists — the user's own art, or a look frame
|
|
250
|
+
you generated and they approved — anchor Stage 1 to it with
|
|
251
251
|
`--edit <that-url-or-file>` so the HUD inherits its exact palette, materials,
|
|
252
|
-
and lighting; that anchoring is what makes the final HUD
|
|
253
|
-
|
|
254
|
-
Stage 1 is the
|
|
255
|
-
reference needs no upload step: `--edit` takes a local file
|
|
256
|
-
(`--edit ./reference.png`, ≤4 MB inlined) — a chat attachment
|
|
257
|
-
is a perfectly good anchor, and "I can't feed the local
|
|
258
|
-
art chain" is never true and never a reason to reach for
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
the
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
the
|
|
269
|
-
|
|
252
|
+
and lighting; that anchoring is what makes the final HUD match the art it is
|
|
253
|
+
supposed to match, and skipping it is why a text-only mockup drifts.** A
|
|
254
|
+
text-only Stage 1 is the normal path when no reference exists. A
|
|
255
|
+
user-supplied reference needs no upload step: `--edit` takes a local file
|
|
256
|
+
path directly (`--edit ./reference.png`, ≤4 MB inlined) — a chat attachment
|
|
257
|
+
saved to disk is a perfectly good anchor, and "I can't feed the local
|
|
258
|
+
screenshot into the art chain" is never true and never a reason to reach for
|
|
259
|
+
another tool. While the mockup renders, write the widget layout and wiring
|
|
260
|
+
code (placement, masked-fill scaffolding, plain-CSS bars) — the game stays
|
|
261
|
+
playable the whole time. When a sprite lands it REPLACES its CSS stand-in:
|
|
262
|
+
delete the stand-in's own background/plate as you wire the opaque frame in —
|
|
263
|
+
a dark div left behind an opaque sprite is the black-box defect. The mockup
|
|
264
|
+
is a STYLE anchor only: the widget set and layout come from the element
|
|
265
|
+
inventory and the game contract — a mechanic the mockup invented (a lap
|
|
266
|
+
counter, a stamina orb) does not enter the HUD, and a mechanic it failed to
|
|
267
|
+
show still does. **A single element needs no mockup at all**: generate it
|
|
268
|
+
straight in the house style (Sprite iteration below), extract it, and wire it
|
|
269
|
+
to the same standard.
|
|
270
270
|
|
|
271
271
|
```bash
|
|
272
|
-
# Stage 1 — the
|
|
273
|
-
# TEXT-described; add `--edit <
|
|
274
|
-
# existing
|
|
275
|
-
# ONE
|
|
272
|
+
# Stage 1 — the HUD mockup: this game's full HUD over its own scene.
|
|
273
|
+
# TEXT-described; add `--edit <url-or-local-file>` to anchor it to an
|
|
274
|
+
# existing reference image so the HUD inherits its exact style.
|
|
275
|
+
# ONE mockup; save its URL:
|
|
276
276
|
npx genex image "<filled stage-1 prompt>" --size 2560x1440 --quality high
|
|
277
277
|
|
|
278
278
|
# Stage 2 — deconstruct the mockup into an asset sheet on white:
|
|
@@ -619,27 +619,26 @@ survive paraphrase; the canonical version of this failure is a subagent
|
|
|
619
619
|
reporting "masks validated" while the parent ships width% fills.
|
|
620
620
|
|
|
621
621
|
**Do not fire-and-forget the whole HUD/menu/logo into one background subagent.**
|
|
622
|
-
The field failure: the entire
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
THIS session — not an overnight handoff. While
|
|
627
|
-
unverified: do not call
|
|
628
|
-
subagent stalls or misses its window, wire what landed and say plainly
|
|
629
|
-
still
|
|
622
|
+
The field failure: the entire art lane was handed to a single background agent
|
|
623
|
+
that then stalled overnight, so every preview the user played showed bare CSS
|
|
624
|
+
bars and the sprites they were promised only landed hours later, unseen. If art
|
|
625
|
+
runs in a subagent it is a BOUNDED task you wait on, then wire and verify in
|
|
626
|
+
THIS session — not an overnight handoff. While commissioned art is pending the
|
|
627
|
+
HUD is unverified: do not call it done or push it as a finished milestone. If a
|
|
628
|
+
subagent stalls or misses its window, wire what landed and say plainly which
|
|
629
|
+
widgets are still waiting on their sprites — never present unfinished art as
|
|
630
|
+
the finished look.
|
|
630
631
|
|
|
631
632
|
## Cost & latency honesty
|
|
632
633
|
|
|
633
|
-
A full HUD is **~9 image generations** (mockup + deconstruct + clean +
|
|
634
|
-
sprite re-rolls
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
limit; local `genex ui` steps are free and instant.
|
|
638
|
-
honest: the
|
|
639
|
-
against CSS
|
|
640
|
-
|
|
641
|
-
logotype enqueue the moment the mockup lands (the order-of-work rule above);
|
|
642
|
-
a later "change" loops the concept at image prices.
|
|
634
|
+
A full sprite HUD is **~9 image generations** (mockup + deconstruct + clean +
|
|
635
|
+
a few sprite re-rolls), a couple of minutes each at high quality — budget an
|
|
636
|
+
hour end to end, not five minutes. A single element is a fraction of that:
|
|
637
|
+
one generation plus free local steps. That fits comfortably inside the image
|
|
638
|
+
rate limit; local `genex ui` steps are free and instant. One rule keeps the
|
|
639
|
+
clock honest: when the lane runs, it runs WHILE you build — enqueue with
|
|
640
|
+
`--no-wait`, code the layout against plain CSS bars, swap sprites in as
|
|
641
|
+
stages land, and never sit in a foreground wait.
|
|
643
642
|
|
|
644
643
|
## Publish checklist
|
|
645
644
|
|
|
@@ -658,8 +657,8 @@ a later "change" loops the concept at image prices.
|
|
|
658
657
|
- `npx genex image` — `--size <WxH>` exact pixels (multiples of 16, each side
|
|
659
658
|
≤ 3840, aspect at most 3:1); `--quality <low|medium|high>` (high for the
|
|
660
659
|
mockup/sheet, medium for single sprites); `--candidates <2|3|4>` several
|
|
661
|
-
variants in ONE call (only when the player asks for variants —
|
|
662
|
-
|
|
660
|
+
variants in ONE call (only when the player asks for variants — one mockup
|
|
661
|
+
is the default); `--edit <url|file>` image-to-image edit of an
|
|
663
662
|
R2 URL or a local image file (≤4 MB, inlined); `--clean <url>`
|
|
664
663
|
background removal only; `--remove-bg` chains removal after a
|
|
665
664
|
generation/edit; `--bg-mode <sprite|glyph|sheet>` picks the removal model
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
# Stage 1 prompt template — the
|
|
1
|
+
# Stage 1 prompt template — the full-HUD mockup
|
|
2
2
|
|
|
3
3
|
Fill the placeholders, then pass the whole text as the prompt to
|
|
4
4
|
`npx genex image "<filled prompt>" --size 2560x1440 --quality high`.
|
|
5
|
-
ONE
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
ONE mockup — no candidate variants unless the player asks for them. Every
|
|
6
|
+
sprite the HUD ships is cut out of this frame, so the scene half deserves the
|
|
7
|
+
same care as the HUD half: a HUD read against a flat grey plate looks nothing
|
|
8
|
+
like the same HUD read against the game.
|
|
8
9
|
|
|
9
10
|
Placeholders:
|
|
10
11
|
|
|
@@ -12,10 +13,10 @@ Placeholders:
|
|
|
12
13
|
register ("a dark gothic action RPG", "a sun-bleached rally racing game",
|
|
13
14
|
"a hand-painted storybook platformer").
|
|
14
15
|
- `[GAME_SCENE]` — what's behind the HUD, written RICH and from the game
|
|
15
|
-
plan (
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
plan (a thin phrase wastes the frame): the setting, the moment, what the
|
|
17
|
+
player is doing right now (the verb), what threatens them, what they're
|
|
18
|
+
chasing, and the lighting. Only the scene may show 3D depth — never the
|
|
19
|
+
HUD. Examples:
|
|
19
20
|
- "a rain-slick neon alley mid-chase, the player character vaulting a
|
|
20
21
|
barrier toward a glowing extraction gate, two drones closing in from
|
|
21
22
|
behind, magenta signage cutting through blue dusk"
|
|
@@ -97,6 +98,6 @@ beside the channel, or on the frame's end caps. If the mockup comes back
|
|
|
97
98
|
with a mid-channel label, keep it only if you'll wire that meter as
|
|
98
99
|
segmented (`segments` in the masks JSON) — otherwise regenerate.
|
|
99
100
|
|
|
100
|
-
The mockup is the **
|
|
101
|
-
compare the finished HUD against it, and sample runtime
|
|
102
|
-
with `npx genex ui text-color`.
|
|
101
|
+
The mockup is the **style and layout reference** for everything cut out of
|
|
102
|
+
it: save its URL, compare the finished HUD against it, and sample runtime
|
|
103
|
+
text colors from it with `npx genex ui text-color`.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: genex-ai-menu
|
|
3
|
-
description: Generate a cinematic game menu — one looping atmospheric video background plus animated DOM buttons — with `npx genex image` + `npx genex video --frame`.
|
|
3
|
+
description: Generate a cinematic game menu — one looping atmospheric video background plus animated DOM buttons — with `npx genex image` + `npx genex video --frame`. Reach for it when a menu wants generated art or motion: title, victory/defeat, lobby, and credits screens that should feel like the game's opening shot. Plain CSS panels stay right for restrained registers and for utilitarian overlays like pause and settings.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# Genex AI · Menu
|
|
@@ -12,24 +12,28 @@ real game events.
|
|
|
12
12
|
|
|
13
13
|
## When to use this vs. a plain CSS menu
|
|
14
14
|
|
|
15
|
-
- **Use this skill**
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
15
|
+
- **Use this skill** when the menu should feel like the game's opening shot —
|
|
16
|
+
a title screen with weather and light, a defeat screen over smoldering
|
|
17
|
+
ruins, a lobby with the arena breathing in the background — or when the
|
|
18
|
+
player asks for an animated title screen. Enqueue the pieces with
|
|
19
|
+
`--no-wait` and keep building.
|
|
20
|
+
- **Use plain CSS** (`$genex-threejs-game-ui` alone) when the game's register
|
|
21
|
+
is restrained, and for utilitarian screens — a quick pause overlay or a
|
|
22
|
+
settings list, where a dark translucent panel is usually more readable. A
|
|
23
|
+
title screen composed in type and light is a finished menu. (The loader is
|
|
24
|
+
never a bare bar either: it shows something of the game rather than a black
|
|
25
|
+
screen — see the game-ui loader spec.) You can also get the best of both:
|
|
26
|
+
reuse this skill's menu video under a darker overlay for pause/victory
|
|
27
|
+
variants (see Tips).
|
|
25
28
|
|
|
26
29
|
## Style brief first
|
|
27
30
|
|
|
28
|
-
Use the game's ONE shared style brief from `$genex-threejs-game-ui`
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
Use the game's ONE shared style brief from `$genex-threejs-game-ui`
|
|
32
|
+
(materials, 4–5 named hues, font pair, mood) — the menu, HUD, and loader all
|
|
33
|
+
consume the same brief; don't write a second one here. The brief is words,
|
|
34
|
+
and words are what the still is prompted from. The style is THIS game's:
|
|
35
|
+
don't default to any stock register the examples below might suggest. Two
|
|
36
|
+
hard rules for the frame prompt:
|
|
33
37
|
|
|
34
38
|
- **Full-bleed cinematic 16:9.** The frame is a filmic establishing shot,
|
|
35
39
|
edge to edge. End the prompt with: `Edge-to-edge cinematic composition.
|
|
@@ -39,19 +43,19 @@ might suggest. Two hard rules for the frame prompt:
|
|
|
39
43
|
draws UI into the frame, the prompt was wrong — rewrite and regenerate.
|
|
40
44
|
|
|
41
45
|
This dedicated UI-free **menu still is the ONLY valid `--frame` input** for
|
|
42
|
-
the menu video.
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
`--edit <
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
46
|
+
the menu video. Any image with interface in it — a HUD sheet, a gameplay
|
|
47
|
+
screenshot — ships a menu with widgets floating in the backdrop: an instant
|
|
48
|
+
defect, not a shortcut. When an image the menu genuinely should match already
|
|
49
|
+
exists (reference art the player supplied, key art the game already ships),
|
|
50
|
+
`--edit <url>` anchors the still to it so the two share one palette and
|
|
51
|
+
light; otherwise prompt the still straight from the brief. Then animate the
|
|
52
|
+
STILL.
|
|
53
|
+
|
|
54
|
+
## Choose the composition — one archetype per game, chosen on purpose
|
|
55
|
+
|
|
56
|
+
The single most common menu failure is shipping the same left-rail layout
|
|
57
|
+
regardless of genre. Before writing menu markup, pick ONE archetype and have
|
|
58
|
+
a reason for it out of the style brief — **defaulting to left-rail without a
|
|
55
59
|
reason is the failure mode this section exists to kill:**
|
|
56
60
|
|
|
57
61
|
- **Left rail** — title upper-left or top, buttons stacked left of center
|
|
@@ -77,11 +81,11 @@ reason is the failure mode this section exists to kill:**
|
|
|
77
81
|
stack at all. Fits: art games, ambient toys. Delta: 2–3 small text links
|
|
78
82
|
bottom-left, heavy letter-spacing, nothing over the subject.
|
|
79
83
|
|
|
80
|
-
**Second choice — button treatment,**
|
|
84
|
+
**Second choice — button treatment,** decided with it: bare text
|
|
81
85
|
(cinematic, the example below) / CSS plate (styled FROM the brief —
|
|
82
86
|
gradients, borders, chamfers per the game-ui corner rules; default-gray
|
|
83
|
-
plates are a defect) / sprite chrome (from
|
|
84
|
-
generation
|
|
87
|
+
plates are a defect) / sprite chrome (from a HUD sheet or a dedicated
|
|
88
|
+
generation, when the brief is ornate) / real glass
|
|
85
89
|
(`npx genex image "<frosted panel>" --glass` — menus love frosted panels,
|
|
86
90
|
and the solved RGBA carries TRUE translucency over the moving backdrop;
|
|
87
91
|
`$genex-ai-image` documents the lane). The per-genre lean lives
|
|
@@ -115,10 +119,10 @@ references/style-capsules.md) — a lean, not a rule.
|
|
|
115
119
|
|
|
116
120
|
```bash
|
|
117
121
|
# 1. The frame — a still of the scene the loop returns to (this example is a
|
|
118
|
-
# painterly meadow; YOUR prompt comes from YOUR game's style brief).
|
|
119
|
-
# the
|
|
120
|
-
# share one palette and light
|
|
121
|
-
#
|
|
122
|
+
# painterly meadow; YOUR prompt comes from YOUR game's style brief, in words).
|
|
123
|
+
# If the menu should match an image that already exists, add --edit <url> so
|
|
124
|
+
# the two share one palette and light. The still stays UI-free — an image
|
|
125
|
+
# with interface in it is never the video frame:
|
|
122
126
|
npx genex image "windswept alpine meadow at golden hour, wildflowers leaning in the gusts, painterly light, cinematic wide shot. Edge-to-edge cinematic composition. Full-bleed 16:9 frame. No UI elements, no text, no buttons in the frame." --aspect 16:9 --quality high
|
|
123
127
|
# -> https://assets.genex.technology/generations/<id>/image-main
|
|
124
128
|
|
|
@@ -132,7 +136,7 @@ npx genex wait <gen-id>
|
|
|
132
136
|
# -> https://assets.genex.technology/generations/<gen-id>/video-mp4
|
|
133
137
|
```
|
|
134
138
|
|
|
135
|
-
## Seamless in the DOM — the loop crossfade (
|
|
139
|
+
## Seamless in the DOM — the loop crossfade (how every menu video is wired)
|
|
136
140
|
|
|
137
141
|
Never wire the clip as a bare `<video loop>` — the residual seam shows every
|
|
138
142
|
cycle. Two stacked `<video>` elements with the same src crossfade at the
|
|
@@ -179,34 +183,29 @@ wired it is the menu's capture in the milestone smoke pass: one full loop
|
|
|
179
183
|
cycle watched AS RENDERED. A metadata probe (ffprobe) can't see a seam, a
|
|
180
184
|
panel covering the video, or a video that never plays — only watching can.
|
|
181
185
|
|
|
182
|
-
**Work async — the menu must never block the game.** The still is
|
|
183
|
-
|
|
184
|
-
`--no-wait` **
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
the
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
has landed (a shipped milestone with the user silent = the pick stands), or
|
|
191
|
-
(c) style art being the only work left. Never fire it while a user objection
|
|
192
|
-
is open** ("change the colors" blocks it until the loop resolves). Ship the
|
|
193
|
-
CSS menu (buttons + title over the frame IMAGE as a static backdrop) and
|
|
194
|
-
swap the `<video>` in when `genex wait` prints the URL. The frame image doubles as the
|
|
186
|
+
**Work async — the menu must never block the game.** The still is prompted
|
|
187
|
+
from the brief, so it can go out the moment you know the look: enqueue it
|
|
188
|
+
`--no-wait` and keep building. **The video is the slow, expensive item** —
|
|
189
|
+
generate it once you've decided the menu wants motion, or the player asks for
|
|
190
|
+
it, and never while a style objection is open ("change the colors" waits
|
|
191
|
+
until the look settles, or you pay for the loop twice). Ship the CSS menu
|
|
192
|
+
(buttons + title over the frame IMAGE as a static backdrop) and swap the
|
|
193
|
+
`<video>` in when `genex wait` prints the URL. The frame image doubles as the
|
|
195
194
|
**loading screen background** — it exists minutes before the video does (see
|
|
196
195
|
`$genex-threejs-game-ui`'s loader spec). Both assets live in Genex storage
|
|
197
196
|
(R2) — permanent, public, CORS-open; you load them straight from the printed
|
|
198
197
|
URLs, nothing is downloaded or committed.
|
|
199
198
|
|
|
200
199
|
**When the generated art lands, the upgrade is a RE-COMPOSITION — not a
|
|
201
|
-
backdrop swap.** DELETE the
|
|
202
|
-
video goes in: the still was generated with
|
|
203
|
-
buttons and logo sit DIRECTLY on the key art.
|
|
204
|
-
floating over the finished video is the single most common bad
|
|
205
|
-
near-opaque panel (plus its darkening layers) hides the art you just
|
|
206
|
-
for, and the menu reads as
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
200
|
+
backdrop swap.** DELETE the panel/card that carried the buttons while the art
|
|
201
|
+
rendered, the moment the still or video goes in: the still was generated with
|
|
202
|
+
negative space precisely so the buttons and logo sit DIRECTLY on the key art.
|
|
203
|
+
A card left floating over the finished video is the single most common bad
|
|
204
|
+
menu — a near-opaque panel (plus its darkening layers) hides the art you just
|
|
205
|
+
paid for, and the menu reads as if it never landed. Allowed over the art: a
|
|
206
|
+
thin, low-opacity scrim strictly behind the button rail for legibility, and
|
|
207
|
+
at most ONE subtle full-screen grade layer. NEVER a card/panel covering the
|
|
208
|
+
art.
|
|
210
209
|
|
|
211
210
|
**Two failed video attempts = ship the still. Hard stop.** Video is the one
|
|
212
211
|
generation that fails server-side with real frequency (render timeouts), and
|
|
@@ -364,13 +363,13 @@ One display font + one body font per menu. Give text its own contrast against
|
|
|
364
363
|
the moving video — layered text-shadows or a subtle dark plate (avoid heavy
|
|
365
364
|
text strokes — they read as a browser game, not a title screen).
|
|
366
365
|
|
|
367
|
-
**Title treatment —
|
|
368
|
-
|
|
369
|
-
a
|
|
370
|
-
|
|
371
|
-
not
|
|
366
|
+
**Title treatment — a drawn wordmark, or type set well.** Generate the
|
|
367
|
+
logotype when the menu wants drawn lettering: an ornate, crafted, or comic
|
|
368
|
+
register, a name that IS the game's identity, a player who asks for one. When
|
|
369
|
+
the brief is restrained — minimal fullbleed, a vista a set wordmark would
|
|
370
|
+
fight — the title in the display font is a finished title, not a stand-in:
|
|
372
371
|
|
|
373
|
-
- **Logotype
|
|
372
|
+
- **Logotype:**
|
|
374
373
|
`npx genex image "the word 'EMBERFALL' as an ornate engraved game logo, <style brief>" --transparent`
|
|
375
374
|
— the wordmark alone on a transparent background, in the brief's display
|
|
376
375
|
register, no extra text or scenery. Then trim with `npx genex ui trim`.
|
|
@@ -390,9 +389,9 @@ not):
|
|
|
390
389
|
words) come out best. Wire it as the menu title AND the loader mark; the
|
|
391
390
|
DOM keeps an accessible text fallback (`aria-label` or visually-hidden
|
|
392
391
|
text).
|
|
393
|
-
- **Layered CSS (
|
|
394
|
-
|
|
395
|
-
tight dark one for contrast, a wide soft one for glow).
|
|
392
|
+
- **Layered CSS (a finished title on its own, and the stand-in while a
|
|
393
|
+
wordmark renders):** gradient ink via `background-clip: text` + stacked
|
|
394
|
+
shadows (a tight dark one for contrast, a wide soft one for glow).
|
|
396
395
|
|
|
397
396
|
## Tips
|
|
398
397
|
|
|
@@ -402,10 +401,10 @@ not):
|
|
|
402
401
|
- **One menu = ONE video, generated one-off — not iteratively.** Video
|
|
403
402
|
generation is strictly rate-limited and takes minutes per attempt. Get the
|
|
404
403
|
still frame right first (images are cheap to redo), then animate it once.
|
|
405
|
-
The one exception: a user-driven style change
|
|
406
|
-
re-
|
|
407
|
-
|
|
408
|
-
|
|
404
|
+
The one exception: a user-driven style change re-opens this rule once —
|
|
405
|
+
re-prompt the still against the new direction (or `--edit` it against the
|
|
406
|
+
new reference) and re-run the video from the new still. Agent-initiated
|
|
407
|
+
polish never does.
|
|
409
408
|
- **The menu video renders 1080p by default — leave it alone.** Every video
|
|
410
409
|
path, the frame-conditioned (`--frame`) menu route included, defaults to
|
|
411
410
|
1080p: the menu clip is full-screen key art, and 720p stretched across a
|
|
@@ -448,7 +447,7 @@ not):
|
|
|
448
447
|
- `--aspect 16:9 --quality high` (image) — the right settings for a menu frame.
|
|
449
448
|
- `--no-wait` — enqueue and return immediately with the generation id; pick
|
|
450
449
|
the result up later with `npx genex wait <id>` (safe to re-run — it attaches
|
|
451
|
-
to the SAME generation).
|
|
450
|
+
to the SAME generation). It is how a menu video is run — build while it
|
|
452
451
|
renders. Re-running the GENERATE command, by contrast, creates (and bills)
|
|
453
452
|
a new one.
|
|
454
453
|
|
|
@@ -111,7 +111,7 @@ model.traverse((o) => {
|
|
|
111
111
|
m.envMapIntensity = Math.min(m.envMapIntensity, 0.8);
|
|
112
112
|
});
|
|
113
113
|
// If a model that SHOULD read metallic still looks dull, this clamp is not the
|
|
114
|
-
// cause — check the model against the
|
|
114
|
+
// cause — check the model against the brief and lift per-material as needed.
|
|
115
115
|
model.scale.setScalar(1); // tune to taste
|
|
116
116
|
model.position.set(0, 0, 0);
|
|
117
117
|
scene.add(model);
|