@genex-ai/cli-demo 0.78.1-dev.203 → 0.80.0-dev.211
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 +1 -1
- package/package.json +1 -1
- package/templates/README.md +1 -1
- package/templates/skills/genex-ai-character/SKILL.md +2 -4
- package/templates/skills/genex-ai-hud/SKILL.md +46 -19
- package/templates/skills/genex-ai-menu/SKILL.md +13 -10
- package/templates/skills/genex-ai-model/SKILL.md +12 -6
- package/templates/skills/genex-game-director/SKILL.md +265 -0
- package/templates/skills/genex-game-director/references/design-contract.md +148 -0
- package/templates/skills/{genex-threejs-skill-router → genex-game-director}/references/routing-map.md +70 -67
- package/templates/skills/genex-getting-started/SKILL.md +3 -2
- package/templates/skills/genex-threejs-adaptive-quality/SKILL.md +9 -7
- package/templates/skills/genex-threejs-character-controller/SKILL.md +2 -4
- package/templates/skills/genex-threejs-embed-auth/SKILL.md +6 -48
- package/templates/skills/genex-threejs-game-content/SKILL.md +3 -4
- package/templates/skills/genex-threejs-game-ui/SKILL.md +23 -57
- package/templates/skills/genex-threejs-game-ui/references/style-capsules.md +7 -4
- package/templates/skills/genex-threejs-multiplayer/SKILL.md +1 -2
- package/templates/skills/genex-threejs-visual-validation/SKILL.md +2 -4
- package/templates/skills/genex-threejs-skill-router/SKILL.md +0 -266
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# Routing Map
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The director's routing source: which skill owns which system, the execution
|
|
4
|
+
order for a Genex game, and the acceptance gate. Use it for every game and
|
|
5
|
+
whenever a request touches multiple visual systems.
|
|
4
6
|
|
|
5
7
|
## Three.js version and references
|
|
6
8
|
|
|
@@ -13,6 +15,48 @@ the user asks to upgrade. Use official Three.js docs first, then official
|
|
|
13
15
|
examples as implementation references. Match examples to the project's installed
|
|
14
16
|
Three.js release or branch, and do not blindly copy demo architecture.
|
|
15
17
|
|
|
18
|
+
## Route by system
|
|
19
|
+
|
|
20
|
+
| Work needed | Load |
|
|
21
|
+
| --- | --- |
|
|
22
|
+
| shot composition, chase/side/orbit rigs, camera handoffs, projection ownership, pointer look, mouse-aimed action (shooter, FPS/first-person, sniper, turret, crosshair/reticle), mouse-look, hand-rolled steering/pan/look input signs (screen-direction contract), floating origins | `$genex-threejs-camera-direction` |
|
|
23
|
+
| on-foot player movement: walk/run/jump/crouch, third-person character, slopes, stairs, moving platforms, personal VRM animation, directional locomotion, transitions, action motion | `$genex-threejs-character-controller` |
|
|
24
|
+
| a custom generated playable humanoid or Meshy animation coverage beyond UAL: reference-informed A-pose concepts, explicit candidate + 10k-remesh approvals, exact action IDs, same-rig adapter | `$genex-ai-character` + `$genex-threejs-character-controller` |
|
|
25
|
+
| the player drives or flies something: cars, drones, vehicle physics, gearbox, enter/exit between character and vehicle | `$genex-threejs-vehicle-controllers` |
|
|
26
|
+
| playable on phones: touch/mobile input for any game — joystick, virtual buttons, drag zones, per-genre touch recipes, rotate-device overlay — wired by default for every NEW game when a recipe fits (skip with a one-line reason) | `$genex-threejs-touch-controls` |
|
|
27
|
+
| phone-survivable rendering — device tiers, DPR/shadow/post budgets, the runtime quality governor, per-tier asset rungs for generated skyboxes/textures, the Quality picker, dispose-on-swap discipline — **mandatory for every game at boot wiring** | `$genex-threejs-adaptive-quality` |
|
|
28
|
+
| anything falls, collides, gets pushed, or needs physics: Rapier world setup, colliders for meshes and GLBs, collision events | `$genex-threejs-physics-rapier` |
|
|
29
|
+
| launch and docking timelines, procedural transform phases, springs, staging, rotating-frame alignment, debris motion | `$genex-threejs-procedural-animation` |
|
|
30
|
+
| reusable scalar/vector fields, domain warping, causal masks, procedural normals | `$genex-threejs-procedural-fields` |
|
|
31
|
+
| atlas-filtered blocks, planetary surfaces, terrain wetness, lava/emissive procedural surfaces, authored frame PBR, specular AA | `$genex-threejs-procedural-materials` |
|
|
32
|
+
| sculpted rails/frames, branch rings, semantic mesh writers, material groups | `$genex-threejs-procedural-geometry` |
|
|
33
|
+
| trees, stylized grass, GPU-computed grass fields, branching organisms, roots, foliage, rooted wind deformation | `$genex-threejs-procedural-vegetation` |
|
|
34
|
+
| buildings, façade grammars, profiles, ornaments, modular mesh writers | `$genex-threejs-procedural-architecture` |
|
|
35
|
+
| planets, terrain, craters, biome fields, coastlines, spherical detail | `$genex-threejs-procedural-planets` |
|
|
36
|
+
| sky scattering, planetary shells, depth-based aerial perspective | `$genex-threejs-atmosphere-aerial-perspective` |
|
|
37
|
+
| weather-driven raymarched clouds and cloud shadows | `$genex-threejs-volumetric-clouds` |
|
|
38
|
+
| hero open-water FFT oceans (expensive — only when open water IS the game): spectral cascades, hybrid FFT/Gerstner clear water, choppy derivatives, Jacobian whitecaps | `$genex-threejs-spectral-ocean` |
|
|
39
|
+
| **default water**: an ocean, sea, lake, river, or pool the game plays on or around — authored analytic waves, bounded heightfield pools, object ripples, differential-area caustics, shared normals, heuristic refraction, fallback absorption, crest foam | `$genex-threejs-water-optics` |
|
|
40
|
+
| falling snow, snow accumulation, model snow caps, wet asphalt puddles, procedural ripple normals, splash flipbooks, rain streaks, shared weather envelopes, surface wetness | `$genex-threejs-precipitation-surfaces` |
|
|
41
|
+
| curved-ray black holes, accretion disks, wormholes | `$genex-threejs-raymarched-space-effects` |
|
|
42
|
+
| particles, trails, plasma, shockwaves, layered event effects | `$genex-threejs-procedural-vfx` |
|
|
43
|
+
| accumulated screen frost, touch clearing, reduced blur, and refraction masks | `$genex-threejs-temporal-surfaces` |
|
|
44
|
+
| the light rig and where light belongs: sun/moon key, practical lights (campfire, torch, neon, lava), emissive-to-light coupling, light shafts and visible beams, fog mood, light signals, flicker, a scene that reads flat or uniformly lit | `$genex-threejs-lighting-design` |
|
|
45
|
+
| stable large-world shadows, cascades, clipmaps, cached updates | `$genex-threejs-shadow-systems` |
|
|
46
|
+
| GTAO, bent normals, bilateral reconstruction | `$genex-threejs-screen-space-ambient-occlusion` |
|
|
47
|
+
| HDR bloom and selective emission contribution | `$genex-threejs-bloom` |
|
|
48
|
+
| eye adaptation, tone mapping, LUT grading, output color | `$genex-threejs-exposure-color-grading` |
|
|
49
|
+
| shared depth/normal/velocity ownership and multi-pass ordering | `$genex-threejs-image-pipeline` |
|
|
50
|
+
| fixed-view diagnostics, seed sweeps, temporal and budget evidence | `$genex-threejs-visual-validation` |
|
|
51
|
+
| game content named in the plural or a content genre: quests, objectives, NPCs, dialogue, shops, inventory, loot, XP/progression, an RPG/adventure/story game — **mandatory whenever the ask names content**, and its content contract is written before the asset batch | `$genex-threejs-game-content` |
|
|
52
|
+
| a big/open world: kilometers of terrain, multiple regions or locations, exploration, points of interest, biomes, world streaming | `$genex-threejs-open-world` |
|
|
53
|
+
| the 2D interface — HUD, menus, pause/win/lose screens, loaders, lobby, on-screen text and buttons, UI state flow — **mandatory for every game**, and its "Plan the UI first" gate runs right after the concept is locked | `$genex-threejs-game-ui` |
|
|
54
|
+
| a cinematic menu — main menu/title/pause/victory/defeat/lobby/credits with a looping generated video backdrop behind DOM buttons | `$genex-ai-menu` |
|
|
55
|
+
| a cohesive art-directed HUD — generated sprite set (matched frames, masks, icons in one style) wired with masked fills | `$genex-ai-hud` |
|
|
56
|
+
| the game works but feels flat, floaty, or unresponsive: input response, acceleration curves, camera shake, hit feedback, hitstop, cooldowns, difficulty ramp, fail/retry loop | `$genex-threejs-game-feel` |
|
|
57
|
+
| realtime multiplayer: movement sync, a shared ball/NPC, host-run scores/enemies, shots/emotes, persistence | `$genex-threejs-multiplayer` |
|
|
58
|
+
| player identity, sign-in, guests, saves/progress, per-player state, a shared persistent world, leaderboards — **mandatory for every game** | `$genex-threejs-embed-auth` |
|
|
59
|
+
|
|
16
60
|
## Execution order
|
|
17
61
|
|
|
18
62
|
1. Define the game contract: player verb, win/interaction loop, target device,
|
|
@@ -29,12 +73,10 @@ Three.js release or branch, and do not blindly copy demo architecture.
|
|
|
29
73
|
additionally fixes the world's scale class as a number here via
|
|
30
74
|
`$genex-threejs-open-world` — kilometers of streamed terrain, never one
|
|
31
75
|
fogged plane. Scope belongs to the user: shipping fewer or smaller than
|
|
32
|
-
the ask requires their explicit OK through a
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
"vertical slice first" is a build order, never a license to shrink the
|
|
37
|
-
destination silently.
|
|
76
|
+
the ask requires their explicit OK through a question with real options
|
|
77
|
+
(your question tool when you have one; a short numbered list in chat
|
|
78
|
+
otherwise) — a "vertical slice first" is a build order, never a license
|
|
79
|
+
to shrink the destination silently.
|
|
38
80
|
2. Wire player identity before any boot code: `$genex-threejs-embed-auth` is
|
|
39
81
|
mandatory for every game (`initEmbed(...)` + the `waitForPlayer()` gate) —
|
|
40
82
|
saves, leaderboards, and multiplayer auth all come from it.
|
|
@@ -45,9 +87,8 @@ Three.js release or branch, and do not blindly copy demo architecture.
|
|
|
45
87
|
game-ui gate) WITH the full HUD composited over it: the `$genex-ai-hud`
|
|
46
88
|
Stage-1 image, one generation serving as concept, style checkpoint, and
|
|
47
89
|
HUD blueprint (never a separate UI-free concept first). Show it to the user
|
|
48
|
-
the moment it lands and get a keep-or-change answer through
|
|
49
|
-
|
|
50
|
-
Codex: `request_user_input`; numbered-list fallback otherwise). This answer
|
|
90
|
+
the moment it lands and get a keep-or-change answer through your question
|
|
91
|
+
tool (a short numbered list in chat when you have none). This answer
|
|
51
92
|
GATES — but only the style-dependent pipeline: until the user approves a
|
|
52
93
|
frame, do NOT enqueue the Tier-2 art that builds on the look (the
|
|
53
94
|
`$genex-ai-hud` Stage-2 chain, and the `$genex-ai-menu` still + video
|
|
@@ -58,10 +99,10 @@ Three.js release or branch, and do not blindly copy demo architecture.
|
|
|
58
99
|
arrive, and later `--edit`-able generations anchor to the approved frame for
|
|
59
100
|
STYLE while the game contract owns content. Everything that does NOT depend
|
|
60
101
|
on the look — scaffold, boot wiring, the core loop, and the
|
|
61
|
-
concept-independent
|
|
62
|
-
while the answer is pending, so the wait is
|
|
63
|
-
the #1 way a finished game ships an
|
|
64
|
-
to swap in.
|
|
102
|
+
concept-independent worker lanes (the director's Delegate section) —
|
|
103
|
+
keeps building in parallel while the answer is pending, so the wait is
|
|
104
|
+
never idle. Skipping this enqueue is the #1 way a finished game ships an
|
|
105
|
+
ugly HUD — by step 12 there is nothing to swap in.
|
|
65
106
|
4. Lock the visual direction — the same plan-first logic as the UI gate, in
|
|
66
107
|
the same plan block, before any rendering code:
|
|
67
108
|
- **camera**: the rig type and the pointer bucket
|
|
@@ -144,7 +185,7 @@ Three.js release or branch, and do not blindly copy demo architecture.
|
|
|
144
185
|
Emissive-only is a real answer said in one line; a coupled practical
|
|
145
186
|
light is the step up; one white ambient wash over everything is the
|
|
146
187
|
unlit look with extra steps, and it reads the same at noon and at
|
|
147
|
-
midnight. `$genex-threejs-lighting-design` owns
|
|
188
|
+
midnight. `$genex-threejs-lighting-design` owns that gate;
|
|
148
189
|
Planning is not building: effects still land LAST (steps 10–11); this step
|
|
149
190
|
only fixes the target so the look isn't improvised pass-by-pass at the end.
|
|
150
191
|
5. Wire the gameplay layer for the player verb: the physics world via
|
|
@@ -217,61 +258,23 @@ Three.js release or branch, and do not blindly copy demo architecture.
|
|
|
217
258
|
13. Validate in a real browser with fixed seeds, captures, interaction checks,
|
|
218
259
|
and performance evidence.
|
|
219
260
|
|
|
220
|
-
##
|
|
221
|
-
|
|
222
|
-
Generations already render server-side in parallel — the wall-clock savings
|
|
223
|
-
live in the ATTENDED chains. Whenever the coding agent supports background
|
|
224
|
-
subagents (e.g. Claude Code's Agent tool), fanning the independent work out is
|
|
225
|
-
the DEFAULT, not a big-scope special case: split every disjoint chain below off
|
|
226
|
-
by default and keep the main thread building. In environments without them
|
|
227
|
-
(Cursor), the same order simply runs sequentially and the `--no-wait` pattern
|
|
228
|
-
still hides most generation latency.
|
|
261
|
+
## Delegation
|
|
229
262
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
concept-dependent work before it.
|
|
263
|
+
Fan-out is owned by the director: sub-agents own DESIGN.md Modules rows,
|
|
264
|
+
concept-DEPENDENT lanes wait for the player's yes on the concept, one writer
|
|
265
|
+
per file, workers never spawn workers, and the Assets table is the budget —
|
|
266
|
+
the full rules and the worker prompt shape live in the Delegate section of
|
|
267
|
+
`$genex-game-director`. This map adds no separate delegation rules; it is the
|
|
268
|
+
routing source the director and its workers read.
|
|
237
269
|
|
|
238
|
-
|
|
239
|
-
user APPROVES the concept, hand the whole
|
|
240
|
-
`$genex-ai-hud` chain to one subagent: pick the better candidate → Stage-2
|
|
241
|
-
sheet → clean → extract → masks → write the sprite wiring. Its prompt must
|
|
242
|
-
be self-contained — the style brief, the approved mockup URL, the
|
|
243
|
-
output dir, and exactly which files it owns. **Handoff rule:** whoever
|
|
244
|
-
wires the HUD after the subagent finishes MUST read the produced
|
|
245
|
-
`*.annotated-progress.json` and `.bbox.json` files from disk — fillBox
|
|
246
|
-
numbers, `segments`, and sprite dims do not survive a prose summary, and
|
|
247
|
-
wiring from the summary is how validated masks end up on disk while the
|
|
248
|
-
shipped fill is a naive width%.
|
|
249
|
-
- **Asset shepherd.** One subagent runs `npx genex wait` on every queued ID
|
|
250
|
-
and wires each asset in as it lands (skybox, models, menu video, dressing),
|
|
251
|
-
swapping placeholders out and reporting each swap.
|
|
252
|
-
- **Verification runner.** Browser evidence — screenshots, control presses,
|
|
253
|
-
the menu loop-seam watch, in-situ checks of placed art — can run in a
|
|
254
|
-
subagent while the main agent keeps building.
|
|
255
|
-
- **Content module fan-out (big scopes — concept-independent, launch immediately).**
|
|
256
|
-
When the content contract names a
|
|
257
|
-
big world or several content systems, serial hand-typing is what runs out
|
|
258
|
-
of session: split the gameplay modules across parallel subagents instead —
|
|
259
|
-
one each for world/terrain, quest + dialogue DATA, enemies/AI, items/
|
|
260
|
-
economy — against a short written module contract (the shared state
|
|
261
|
-
object's shape, the event names, the content tables from
|
|
262
|
-
`$genex-threejs-game-content`, exact file ownership). Ship the
|
|
263
|
-
walking-skeleton v0 preview FIRST, then let the content agents land behind
|
|
264
|
-
it — the preview cadence and a long parallel build are not in conflict:
|
|
265
|
-
the user walks the skeleton while the world grows. Each subagent reports
|
|
266
|
-
deviations from the module contract; the main agent reconciles and stays
|
|
267
|
-
the only writer of the entry point.
|
|
270
|
+
## Routing rules
|
|
268
271
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
272
|
+
- Build silhouette, motion, and material readability before adding image
|
|
273
|
+
effects. Never dress a primitive shape in glow or bloom to fake quality —
|
|
274
|
+
authored forms first, then materials, then lighting, then effects last.
|
|
275
|
+
- Keep game logic, simulation state, visual fields, and screen-space passes
|
|
276
|
+
separated unless coupling is intentional.
|
|
277
|
+
- Prefer deterministic seeds and named controls for every procedural system.
|
|
275
278
|
|
|
276
279
|
## Acceptance gate
|
|
277
280
|
|
|
@@ -26,8 +26,9 @@ out automatically — only `genex-*`-named files are removed, never yours.
|
|
|
26
26
|
- **agents/** - example subagent definitions (Claude Code).
|
|
27
27
|
- **commands/** - example slash commands (Claude Code).
|
|
28
28
|
|
|
29
|
-
Start with `$genex-
|
|
30
|
-
|
|
29
|
+
Start with `$genex-game-director` for any game or graphics request. It checks
|
|
30
|
+
what your environment can do, writes the `DESIGN.md` design contract, and
|
|
31
|
+
routes the agent to focused skills for cameras, procedural geometry,
|
|
31
32
|
materials, atmosphere, water, weather, VFX, lighting, post-processing, and
|
|
32
33
|
visual validation.
|
|
33
34
|
|
|
@@ -128,15 +128,17 @@ const gltfLoader = createGltfLoader(renderer); // meshopt always; KTX2 when the
|
|
|
128
128
|
const gltf = await loadModelWithFallback(
|
|
129
129
|
MODEL_URL, tier, (u) => gltfLoader.loader.loadAsync(u), { ktx2: gltfLoader.ktx2 },
|
|
130
130
|
);
|
|
131
|
-
// Provider PBR ships mirror-metal (metalness~1
|
|
132
|
-
// swims with camera motion
|
|
131
|
+
// Provider PBR sometimes ships mirror-metal (metalness~1 + near-zero roughness)
|
|
132
|
+
// that reflects the sky env and swims with camera motion. Tame ONLY that extreme
|
|
133
|
+
// — do NOT flatten every material to 0.6 (it dulls legitimately metallic props):
|
|
133
134
|
gltf.scene.traverse((o) => {
|
|
134
135
|
const m = (o as THREE.Mesh).material as THREE.MeshStandardMaterial;
|
|
135
|
-
if (m?.isMeshStandardMaterial)
|
|
136
|
-
|
|
137
|
-
m.
|
|
138
|
-
m.
|
|
136
|
+
if (!m?.isMeshStandardMaterial) return;
|
|
137
|
+
if (m.metalness > 0.85 && m.roughness < 0.2) {
|
|
138
|
+
m.metalness = 0.7;
|
|
139
|
+
m.roughness = Math.max(m.roughness, 0.3);
|
|
139
140
|
}
|
|
141
|
+
m.envMapIntensity = Math.min(m.envMapIntensity, 0.8);
|
|
140
142
|
});
|
|
141
143
|
```
|
|
142
144
|
|
|
@@ -162,7 +164,7 @@ not the player's account. Default Auto.
|
|
|
162
164
|
at most 2 cascades on phones (`$genex-threejs-shadow-systems`).
|
|
163
165
|
- Post: phone floor is a BUILT tone-mapping/output pass (`postLevel: 'light'`
|
|
164
166
|
adds FXAA/vignette); SSAO, volumetrics, and DoF are desktop-tier only
|
|
165
|
-
(`$genex-
|
|
167
|
+
(`$genex-game-director`'s routing map owns the floor wording).
|
|
166
168
|
- Particles/scatter: multiply counts by `tier.particleScale`; render heavy
|
|
167
169
|
transparency at half resolution and upsample.
|
|
168
170
|
- Animation: distant mixers update at 1/2–1/4 rate; multiplayer remotes above
|
|
@@ -57,10 +57,8 @@ Meshy Image-to-3D first produces an unremeshed high-detail model. Show its
|
|
|
57
57
|
front, back, left, and right views and report its measured face count. Preserve
|
|
58
58
|
that model in R2. Before rigging, ask the user to approve a separate
|
|
59
59
|
10,000-face triangle remesh. The 10k remesh—not the high-detail source—is
|
|
60
|
-
rigged and animated. (For these approvals, use your
|
|
61
|
-
|
|
62
|
-
`request_user_input`; if it has none, e.g. Cursor, a short numbered list in
|
|
63
|
-
chat.)
|
|
60
|
+
rigged and animated. (For these approvals, use your question tool when you
|
|
61
|
+
have one; if you have none, a short numbered list in chat.)
|
|
64
62
|
|
|
65
63
|
That is a separate, **same-rig Meshy-native lane**. Its animation-only GLBs are
|
|
66
64
|
accepted only when their skeleton signature matches the active character
|
|
@@ -34,26 +34,19 @@ Guest sessions have **no** overlay — the game just plays.
|
|
|
34
34
|
## Install
|
|
35
35
|
|
|
36
36
|
```bash
|
|
37
|
-
npm i @genex-ai/embed-sdk
|
|
37
|
+
npm i @genex-ai/embed-sdk
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
-
(
|
|
41
|
-
|
|
42
|
-
installed if you followed Step 3 of the scaffold; repeated here so this skill
|
|
43
|
-
is self-contained.)
|
|
40
|
+
(Already installed if you followed Step 3 of the scaffold; repeated here so
|
|
41
|
+
this skill is self-contained.)
|
|
44
42
|
|
|
45
43
|
## Bootstrap (required, every game)
|
|
46
44
|
|
|
47
45
|
```ts
|
|
48
|
-
// main.ts — the FIRST
|
|
49
|
-
import { initGameSentry } from "@genex-ai/embed-sdk/sentry";
|
|
46
|
+
// main.ts — the FIRST thing in the boot sequence, before any other game code
|
|
50
47
|
import { initEmbed } from "@genex-ai/embed-sdk";
|
|
51
48
|
import { GENEX } from "./genex.config";
|
|
52
49
|
|
|
53
|
-
// Crash reporting + session replay FIRST — so even a failure inside the auth
|
|
54
|
-
// boot below gets reported. One required field; never pass tokens to it.
|
|
55
|
-
initGameSentry({ slug: GENEX.slug });
|
|
56
|
-
|
|
57
50
|
initEmbed({
|
|
58
51
|
slug: GENEX.slug,
|
|
59
52
|
apiUrl: GENEX.apiUrl,
|
|
@@ -153,29 +146,6 @@ Server write limits (per player, per minute): **60 player-saves, 120
|
|
|
153
146
|
world-saves, 30 score submits**. A debounced ~1/sec checkpoint never gets near
|
|
154
147
|
them — only a save-per-frame loop does (it surfaces as HTTP 429).
|
|
155
148
|
|
|
156
|
-
From `@genex-ai/embed-sdk/sentry` (crash reporting; exactly these two):
|
|
157
|
-
|
|
158
|
-
- `initGameSentry({ slug, dsn?, environment? })` — call once, BEFORE
|
|
159
|
-
`initEmbed()`. Only `slug` is required; the shared Genex Sentry project DSN
|
|
160
|
-
is built in. Errors, tracing, and session replay all start here; the current
|
|
161
|
-
player (account or guest) is attached automatically (no code needed).
|
|
162
|
-
- `sentryCanvasSnapshot(canvas)` — session replay records the DOM, not the 3D
|
|
163
|
-
canvas; call this once per frame at the END of the render loop so replays
|
|
164
|
-
show actual gameplay. Works for BOTH WebGL and WebGPU renderers; internally
|
|
165
|
-
throttled, so calling at 60fps is fine. On TOUCH devices it is a deliberate
|
|
166
|
-
no-op (and session replay/tracing sample down): each capture is a full-canvas
|
|
167
|
-
GPU readback, exactly the overhead phones get memory-killed for — mobile
|
|
168
|
-
replays are DOM-only by design, on-error replays still record everywhere:
|
|
169
|
-
|
|
170
|
-
```ts
|
|
171
|
-
function animate() {
|
|
172
|
-
requestAnimationFrame(animate);
|
|
173
|
-
// ...game update...
|
|
174
|
-
renderer.render(scene, camera);
|
|
175
|
-
sentryCanvasSnapshot(renderer.domElement); // AFTER render, same frame
|
|
176
|
-
}
|
|
177
|
-
```
|
|
178
|
-
|
|
179
149
|
## Saving progress (per-player — every player has their own slot)
|
|
180
150
|
|
|
181
151
|
Use the SDK helpers; never hand-roll fetch calls to the state API. Progression,
|
|
@@ -224,16 +194,6 @@ their Genex account) and keep-best — submitting a worse score changes nothing
|
|
|
224
194
|
post when they sign in. Send a consistent `mode` per board. Scores are
|
|
225
195
|
client-reported (arcade-style trust) — don't present them as anti-cheat.
|
|
226
196
|
|
|
227
|
-
## Crash reporting rules
|
|
228
|
-
|
|
229
|
-
- `initGameSentry` has token scrubbing built in (the sign-in return-trip pass
|
|
230
|
-
in URLs is redacted automatically). Never wrap, reimplement, or bypass it —
|
|
231
|
-
and never add Sentry options that capture network request/response bodies.
|
|
232
|
-
- Don't call `Sentry.init` yourself or add a second error reporter —
|
|
233
|
-
`initGameSentry` is the one entry point.
|
|
234
|
-
- Manual capture is fine where a try/catch swallows a real bug:
|
|
235
|
-
`import * as Sentry from "@sentry/browser"; Sentry.captureException(err)`.
|
|
236
|
-
|
|
237
197
|
## NEVER log the tokens
|
|
238
198
|
|
|
239
199
|
**NEVER log the return value of `getEmbedToken()` or `getColyseusAuth()` — not
|
|
@@ -328,10 +288,8 @@ Rules:
|
|
|
328
288
|
|
|
329
289
|
## Checklist
|
|
330
290
|
|
|
331
|
-
- [ ] `
|
|
332
|
-
|
|
333
|
-
- [ ] `sentryCanvasSnapshot(renderer.domElement)` runs after `renderer.render()`
|
|
334
|
-
in the main loop (WebGL and WebGPU alike).
|
|
291
|
+
- [ ] `initEmbed(...)` is the very first call in `main.ts`, with all three
|
|
292
|
+
config fields.
|
|
335
293
|
- [ ] `genex.config.ts` includes `dashboardOrigins` (from `.genex/project.json`).
|
|
336
294
|
- [ ] Multiplayer and player-name UI await `waitForPlayer()` — NEVER
|
|
337
295
|
`waitForAuth()` (guests would hang forever). Both `connect()` and
|
|
@@ -48,11 +48,10 @@ Rules that make the contract real:
|
|
|
48
48
|
- **Scope belongs to the user.** Building a small first slice is the right
|
|
49
49
|
ORDER (`$genex-threejs-game-ui`'s v0 beat still applies) — but the slice is
|
|
50
50
|
a milestone on the way to the contract, never a quiet replacement for it.
|
|
51
|
-
If the full ask genuinely doesn't fit, shrinking any line is a
|
|
51
|
+
If the full ask genuinely doesn't fit, shrinking any line is a
|
|
52
52
|
question to the user with real options — never a silent cut justified as
|
|
53
|
-
"standard practice". (Use your
|
|
54
|
-
|
|
55
|
-
if it has none, e.g. Cursor, a short numbered list in chat.)
|
|
53
|
+
"standard practice". (Use your question tool when you have one; if you
|
|
54
|
+
have none, a short numbered list in chat.)
|
|
56
55
|
- **Minute ten is the design test.** If the honest answer is "the same sixty
|
|
57
56
|
seconds, again", the contract needs another beat (a new area unlocks, a
|
|
58
57
|
quest chain escalates, a build comes online) before any polish work.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: genex-threejs-game-ui
|
|
3
|
-
description: Design the
|
|
3
|
+
description: Design the UI HUD interface of a Genex Three.js game — plan the full screen set up front (loader, menu, HUD, pause/win/lose, lobby) under one shared art direction, then build it as an animated DOM overlay. Use for every new game before writing UI code, and whenever the game needs on-screen text, meters, buttons, or menus, or the interface reads as a generic dashboard, covers the action, or shifts as numbers change.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# Genex Three.js Game UI
|
|
@@ -43,10 +43,7 @@ The table lists screens; **elements are inventoried separately**. Walk the
|
|
|
43
43
|
whole loop in your head — loader → menu → spawn → action → pickup → damage →
|
|
44
44
|
death → retry → win — and write down EVERY on-screen element the player will
|
|
45
45
|
ever see: the reticle and each of its states, aim/interact cues, toasts,
|
|
46
|
-
damage numbers, kill feeds, timers, countdowns, pickup popups
|
|
47
|
-
gets a treatment from the brief. **Nothing ships looking like default
|
|
48
|
-
browser CSS** — an element styled like a bare `<div>` or a system button is
|
|
49
|
-
a bug wherever it appears, listed or not.
|
|
46
|
+
damage numbers, kill feeds, timers, countdowns, pickup popups.
|
|
50
47
|
|
|
51
48
|
**2. One shared style brief — for the WHOLE game, not just the UI.** Write it
|
|
52
49
|
once — 4–5 named hues, materials, one display + one body font, mood — and
|
|
@@ -61,17 +58,12 @@ is LOADED for real — a Google Fonts `<link>` (or `@font-face`) in
|
|
|
61
58
|
ships as a system-stack fallback (`Arial Black`, `Impact`) is the same bug in
|
|
62
59
|
type.
|
|
63
60
|
|
|
64
|
-
**3.
|
|
65
|
-
[references/style-capsules.md](references/style-capsules.md), name 2–3 top
|
|
66
|
-
AAA games of the genre, and state in one line which structural conventions
|
|
67
|
-
you're borrowing. The bar is what those games ship, not "good enough for a
|
|
68
|
-
demo". Conventions only — never logos, exact layouts, or trade dress. The
|
|
69
|
-
same 2–3 names carry into the router's visual-direction gate for the scene.
|
|
70
|
-
Then turn references + brief into ONE **concept mockup** — the game concept
|
|
61
|
+
**3. Make ONE concept mockup** — the game concept
|
|
71
62
|
and the HUD Stage-1 mockup are the SAME image, generated once (never a
|
|
72
63
|
separate UI-free concept first): a single image of a PLAYABLE MOMENT of this
|
|
73
64
|
game with its complete HUD composited over it, built with `$genex-ai-hud`'s
|
|
74
|
-
Stage-1 prompt template.
|
|
65
|
+
Stage-1 prompt template. For genre conventions to borrow, skim
|
|
66
|
+
[references/style-capsules.md](references/style-capsules.md). The scene half of the prompt comes from the game
|
|
75
67
|
contract in TEXT, not from a prior image: what the player is DOING
|
|
76
68
|
mid-action (the verb), what threatens them right now (enemy silhouettes),
|
|
77
69
|
what they are chasing (the objective — a finish gate, a goal, a pickup),
|
|
@@ -95,9 +87,9 @@ clickable links saying which one you picked and why — a URL is invisible in a
|
|
|
95
87
|
terminal, and "do you like it?" with no picture in front of the user is the
|
|
96
88
|
#1 way this checkpoint fails (they end up digging logs for the file path).
|
|
97
89
|
|
|
98
|
-
**Then ask for the yes with your
|
|
99
|
-
|
|
100
|
-
|
|
90
|
+
**Then ask for the yes with your question tool** — the one that shows the
|
|
91
|
+
user clickable options; a short numbered list in chat only where there is
|
|
92
|
+
none. ONE question — "this is roughly
|
|
101
93
|
how the game and its HUD will look — keep this direction, or change
|
|
102
94
|
something?" — with concrete keep / change options. This confirmation is
|
|
103
95
|
REQUIRED for every game: the concept sets the STYLE every later asset
|
|
@@ -155,11 +147,10 @@ an invented mechanic, or the absence of a real one, from a picture.
|
|
|
155
147
|
|
|
156
148
|
**4. Ask only when genuinely ambiguous.** If the concept pins the mood (a
|
|
157
149
|
"gothic horror dungeon crawler" pins it), decide and state the plan in one
|
|
158
|
-
line. Only when the art direction is truly open, ask ONE
|
|
150
|
+
line. Only when the art direction is truly open, ask ONE question
|
|
159
151
|
with 2–3 concrete directions, each naming its palette + font pair — using
|
|
160
|
-
your
|
|
161
|
-
|
|
162
|
-
Cursor), a short numbered list in chat. Never ask about the screen
|
|
152
|
+
your question tool when you have one; if you have none, a short numbered
|
|
153
|
+
list in chat. Never ask about the screen
|
|
163
154
|
inventory — it derives from the game type.
|
|
164
155
|
|
|
165
156
|
**5. Style follows THIS game's concept.** The examples in every Genex skill
|
|
@@ -463,43 +454,18 @@ Order the HUD by what the player loses the game for ignoring:
|
|
|
463
454
|
- **Contrast against the real scene.** Test text over the brightest AND
|
|
464
455
|
darkest areas of actual gameplay; a soft dark plate or text-shadow beats
|
|
465
456
|
restyling per level.
|
|
466
|
-
- **
|
|
467
|
-
`clip-path
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
`genex ui` masks remain the other established uses of `mask`/`clip-path`.
|
|
479
|
-
- **The #1 chamfer defect: a frame that STOPS at the cut.** A plain
|
|
480
|
-
`border` or `box-shadow` does NOT follow a `clip-path` chamfer — the clip
|
|
481
|
-
shears it off along the diagonal, so the straight sides keep their frame
|
|
482
|
-
while the cut edge goes bare and the panel reads as broken. Two clean
|
|
483
|
-
fixes: prefer **`border-radius`** when a soft corner reads fine (it keeps
|
|
484
|
-
its `border` natively — no clip needed); for a HARD angular cut, draw the
|
|
485
|
-
frame by clipping TWO stacked layers to the SAME polygon — outer = the
|
|
486
|
-
frame, inner (inset by the frame width) = the fill — so the outer shows
|
|
487
|
-
through as a uniform edge on the diagonal too:
|
|
488
|
-
|
|
489
|
-
```css
|
|
490
|
-
/* Chamfered panel whose frame follows the cut. Never `border` + clip-path. */
|
|
491
|
-
.panel {
|
|
492
|
-
--chamfer: 16px; --edge: 2px; /* --edge = frame width */
|
|
493
|
-
--cut: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
|
|
494
|
-
calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
|
|
495
|
-
clip-path: var(--cut); background: var(--frame-hue); /* this IS the frame */
|
|
496
|
-
padding: var(--edge); /* revealed all around, incl. the diagonal */
|
|
497
|
-
}
|
|
498
|
-
.panel > .panel__fill { clip-path: var(--cut); background: var(--plate-hue); }
|
|
499
|
-
```
|
|
500
|
-
|
|
501
|
-
Same rule for chamfered buttons and any notched plate; verify the frame
|
|
502
|
-
is unbroken at every corner over real gameplay.
|
|
457
|
+
- **Panel and button corners come from `border-radius` or a generated frame
|
|
458
|
+
sprite — never a raw `clip-path`/`mask` chamfer.** A CSS-cut angular corner
|
|
459
|
+
is the recurring "cut corners" defect: the clip shears off borders, shadows,
|
|
460
|
+
and any content that sits near the corner, and it re-breaks the instant the
|
|
461
|
+
padding, font, or value length changes — so it can only be held together by
|
|
462
|
+
a per-build visual check that is easy to skip. It is not worth that fragility.
|
|
463
|
+
For a soft corner use `border-radius` (it keeps its `border`/`box-shadow`
|
|
464
|
+
natively). For a genuinely angular or ornamented "hi-tech" frame, generate it
|
|
465
|
+
as chrome (`$genex-ai-hud`, or a Tier-3 9-slice panel) and lay the DOM over
|
|
466
|
+
it — that reads richer and physically cannot shear. `mask`/`clip-path` stay
|
|
467
|
+
reserved for their ONE established HUD use: the masked-fill progress reveal
|
|
468
|
+
driven by `genex ui` masks. Never for corner shaping.
|
|
503
469
|
- **One cohesion layer.** A single full-screen vignette div (a subtle radial
|
|
504
470
|
gradient darkening the corners, optionally faint grain) over canvas + UI is
|
|
505
471
|
the cheapest way to make DOM-over-WebGL read as one composed image instead
|
|
@@ -11,10 +11,13 @@ says what it's made of in THIS game.
|
|
|
11
11
|
Every capsule below assumes the base rules from the skill: corners/edges for
|
|
12
12
|
UI, one display + one body font, tabular numerals, contrast plates for bare
|
|
13
13
|
text over arbitrary scenes (never a second plate stacked behind an opaque
|
|
14
|
-
frame sprite), and panel/button corners
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
frame sprite), and panel/button corners done the durable way — `border-radius`
|
|
15
|
+
for soft corners (it keeps its `border`/`box-shadow` natively), or a generated
|
|
16
|
+
frame (`$genex-ai-hud` chrome / a Tier-3 9-slice panel) with the DOM laid over
|
|
17
|
+
it for genuinely angular looks. Raw CSS `clip-path`/`mask` corner cuts are
|
|
18
|
+
banned per the skill — they shear borders, shadows, and near-corner content,
|
|
19
|
+
and re-break on any padding/font change; `mask`/`clip-path` stay reserved for
|
|
20
|
+
their ONE established HUD use, the masked-fill progress reveal.
|
|
18
21
|
|
|
19
22
|
## Fantasy / action RPG
|
|
20
23
|
|
|
@@ -67,8 +67,7 @@ Infer this yourself when the experience is clear. Do **not** make the player cho
|
|
|
67
67
|
preset, or config. Ask one plain-language question only when the design genuinely supports both
|
|
68
68
|
models and the answer changes the experience — for example: *"Should this be one ongoing arena
|
|
69
69
|
people drop into, or a fresh fair match that waits for everyone and then starts together?"*
|
|
70
|
-
(Use your
|
|
71
|
-
`AskUserQuestion`; Codex: `request_user_input`; if it has none, e.g. Cursor, a short numbered
|
|
70
|
+
(Use your question tool when you have one; if you have none, a short numbered
|
|
72
71
|
list in chat.)
|
|
73
72
|
|
|
74
73
|
| Player experience | Model | Why |
|
|
@@ -40,10 +40,8 @@ Meshy Image-to-3D first produces an unremeshed high-detail model. Show its
|
|
|
40
40
|
front, back, left, and right views and report its measured face count. Preserve
|
|
41
41
|
that model in R2. Before rigging, ask the user to approve a separate
|
|
42
42
|
10,000-face triangle remesh. The 10k remesh—not the high-detail source—is
|
|
43
|
-
rigged and animated. (For these approvals, use your
|
|
44
|
-
|
|
45
|
-
`request_user_input`; if it has none, e.g. Cursor, a short numbered list in
|
|
46
|
-
chat.)
|
|
43
|
+
rigged and animated. (For these approvals, use your question tool when you
|
|
44
|
+
have one; if you have none, a short numbered list in chat.)
|
|
47
45
|
|
|
48
46
|
The selected high-detail model remains in a neutral A-pose before animation.
|
|
49
47
|
Record evidence that the user saw its four views and face count before
|