EthoswarmThreejsGamedev_Suite
Cognitive toolkit for authoring single-file HTML browser games with Three.js. Each tool is a mind-created generative procedure — no external HTTP auth, no network endpoints — that emits a scoped code artifact (engine scaffold, environment block, asset block, movement/collision block, UI overlay block, preview harness). The Mind composes the artifacts in order into one HTML file and iterates. Art direction defaults to low-poly / synthwave; game archetypes default to endless runner, arcade shooter, or tap-reaction, but any archetype expressible as render-loop + update-loop + clock-delta can be scaffolded. This is a pure reasoning skill — it composes code; it does not call remote services.
Emit the UI block as HTML/CSS overlays positioned absolutely above the canvas — never as text drawn inside the 3D scene (that blurs and drifts on resize, per the tutorial's warning). Emits: a score display that updates each frame in the update loop, a hidden-by-default game-over overlay that becomes visible when gameOver flips to true, a restart button that resets player position, score, obstacle pool, and clears gameOver. Optional: a start screen that gates gameplay until first input. Styles match the art direction. COGNITIVE TOOL — emits HTML + CSS + JS text for insertion into the single-file game.
Translate the Steward's free-text game concept into a structured parameter object that every downstream tool consumes. Captures: game archetype (endless runner | arcade shooter | tap reaction | custom), art direction (low_poly_synthwave | flat_arcade | voxel | custom), target platform (desktop | mobile | both), core loop (one-line description), win/lose conditions, score mechanic, target session length, and any hard constraints (e.g. 'must work offline'). Output is a concept spec that the downstream tools read from rather than re-deriving every step. COGNITIVE TOOL — no network call; produces a structured description object in STREAM.threejs_gamedev_concept.
Emit the asset block: low-poly primitives for player and obstacles, a ground plane for runners, a skybox or gradient background where appropriate, and reusable factory functions (createPlayer(), createObstacle(), createCollectible()) used by the movement block. Player gets a distinct color and an optional emissive material for synthwave; obstacles share geometry and material to minimize draw calls. Output is a set of createX() helpers plus a single 'world' object that tracks all spawned meshes for the update loop. COGNITIVE TOOL — emits JS text.
Emit mobile-hardening wiring: pointerdown / touchstart listeners that map to the same actions as the keyboard scheme, a robust resize listener that updates both renderer.setSize and camera.aspect and camera.updateProjectionMatrix, a visibilitychange listener that pauses the update loop on focus loss (prevents 'hours-of-unseen-time' progress explosions when a tab returns), an orientationchange handler, and a viewport meta tag check. Tutorial lesson: resize, touch, and focus loss break most browser games unless handled up front. COGNITIVE TOOL — emits JS + HTML meta tags.
Prepare the final HTML file for preview and run a self-check pass: (a) verify every numeric motion expression in the update block multiplies by delta (no hard-coded per-frame step values — the single most common source of jitter per the tutorial), (b) verify UI is HTML-overlay not canvas-drawn, (c) verify resize/touch/focus handlers are wired, (d) verify the file is valid standalone HTML (opens in a browser without a build step), (e) produce a preview command or a data URI the Steward can open. If issues are found, report them to the Steward with a diff of the fix rather than silently patching. COGNITIVE TOOL — inspects and reports; does not mutate unless explicitly approved.
Emit the engine skeleton — a single HTML file with the <head> import map for Three.js, a full-window canvas container, and a <script type='module'> block containing: Scene + Camera + WebGLRenderer construction, a shared Clock, a split between an update(delta) function and a render() function, a requestAnimationFrame loop that drives both, and a resize listener that updates renderer size and camera aspect. This is the load-bearing block — the tutorial's critical tip 'Lock in the loop split before any gameplay' applies here. COGNITIVE TOOL — emits HTML/JS text that the Mind writes to disk as the base game file.
Emit the environment block: a PerspectiveCamera with sensible defaults (fov, near, far, position, lookAt based on archetype), a WebGLRenderer with antialias enabled and a sensible pixel ratio for mobile, a key directional light, a soft ambient/hemisphere fill light, optional fog for depth cueing in runners, and any palette-driven scene.background or scene.fog color. Output is inserted after the engine scaffold. COGNITIVE TOOL — emits JS text.
Emit the movement and collision block inside the update(delta) function. Every motion expression multiplies by delta so the game runs the same on 60Hz and 240Hz screens — this is the tutorial's load-bearing lesson. Player input drives lateral movement (keyboard arrows / A-D or WASD by default). Obstacles scroll toward the camera at a delta-scaled speed that ramps over elapsedTime. AABB collision (axis-aligned bounding box) checks each obstacle against the player every frame and sets a gameOver flag on hit. Out-of-bounds obstacles are desktop and mobile hardening; 'mobile' makes touch input mandatory in Step 7. COGNITIVE TOOL — emits JS text.