Pixel Sandbox

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a browser-playable Three.js game titled “Pixel Sandbox,” a minimalist top-down pixel-art sandbox rather than a combat or score-based game. Render a square 96-by-96 world centered at the origin using an OrthographicCamera looking straight down from above, with a dark near-black blue background outside the world. The playable ground is a large flat grass tile bordered by a subtle dark rectangular outline. Build the grass procedurally as a small 32x32 pixel texture: a medium green base with many one-pixel darker and lighter specks and faint darker tile-edge pixels, repeated across the ground with nearest-neighbor filtering for a crisp pixel look. Use lighting suitable for a simple Lambert ground, but make the humans themselves bright unlit sprites.

The core interaction is spawning and observing autonomous little humans. On startup, create six humans at random positions within roughly six world units of the center, and show the current total in the HUD. Left-click with the default Spawn tool to add a human at the clicked ground location; while holding the left mouse button in Spawn mode, continue spawning at a capped interval of about 80 milliseconds. Humans should be small, colorful, front-facing/billboard-like 2D pixel sprites standing on the ground, each with a dark soft pixel shadow blob beneath them. Generate each human’s texture procedurally at 16x20 pixels with nearest filtering and transparency: a six-by-six skin-colored head, a two-pixel hair cap, two tiny dark eyes, an eight-by-seven brightly colored shirt, simple skin-colored arms, dark colored pants, tiny dark shoes, and a dark pixel outline around the silhouette. Randomize skin, hair, shirt, and pants colors per person from a small palette. Give each human two animation frames that swap the leg positions while moving, producing a simple two-frame walk cycle.

Every human wanders continuously and independently. Give it a random initial velocity, a random wander phase and seed, and steer it with slowly changing cosine/sine wander motion. Add separation/avoidance: nearby humans within about 1.2 world units push away from one another. Keep them inside the world’s +/-48 bounds by applying a soft push when they approach a six-unit margin, then clamp their positions to the bounds. Limit movement speed to about 2.1 units per second. Rotate each sprite around the vertical axis to face its movement direction, and switch walk frames approximately every 0.16 seconds when moving. There is no combat, health, timer, score, or win condition; the point is to populate and watch the sandbox.

Provide three tools. Spawn adds humans, Erase removes the nearest human within about one world unit of the clicked location, and Select chooses the nearest human within that same radius. Keyboard 1 selects Spawn, 2 selects Erase, and 3 selects Select. Right-click always performs a quick erase under the cursor regardless of the active tool, and suppress the browser context menu. Selecting empty ground clears the selection. The selected human has a visible pale blue square/rectangular outline ring on the ground around its feet. Assign each human an incrementing numeric ID beginning at 1. Press Space when a human is selected to toggle camera-follow mode; the HUD should indicate “(follow)” while active. Press R to remove all humans and clear the selection.

Support mouse-wheel zoom, clamped from a fairly close view to a wide view, and pan the camera with WASD or arrow keys when not following a selected human. Smoothly interpolate the camera toward its target and clamp the target within the world bounds. In follow mode, smoothly track the selected human and disable manual panning. Convert mouse screen coordinates to a ray intersection with the y=0 ground plane, clamp interaction positions to the world bounds, and use that point for spawn, erase, and select.

Overlay a compact fixed HUD in the top-left over the canvas. Use dark translucent rounded pills with subtle light borders and light blue-white text. The first row must show “Tool” and the current tool name (“Spawn,” “Erase,” or “Select”), “Humans” and the current count, and “Selected” and either “None” or the selected ID such as “#3,” optionally followed by “(follow).” Directly beneath it, show a dark translucent rounded hint bar containing: “1 Spawn · 2 Erase · 3 Select · Right-click quick erase · Wheel zoom · WASD pan · Space follow · R reset”. Keep the overall presentation sparse, crisp, and pixel-art-like: no invented scenery, enemies, particles, or extra UI. Use an antialiased-off WebGL renderer, nearest-neighbor textures, transparent pixel sprites, and a dark navy-black surrounding page/canvas.