Spawn 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.

Recreate a browser-based 2D orthographic sandbox editor titled “Spawn Sandbox.” The main play area is a large Three.js-style canvas on the left with a flat dark/medium green ground (#3a7d44) covering the world and subtle dark green square grid lines for placement reference. The camera is orthographic, initially centered at (0,0), with a fairly zoomed-in view (zoom value 2.8); there are no starter objects. The visible screenshot should feel like a simple top-down/flat 2D playground: green grid background, with spawned sprites and procedural icons floating above it. Keep the sidebar on the right, 240px wide, nearly black (#1a1a1a), vertically scrollable, with the heading “Spawn Menu,” a 3-column grid of compact spawn buttons, and dark gray controls below it.

Implement object spawning and editing as the core interaction. The currently selected item is highlighted with a yellow border and gray background; initially select Beige Person. Clicking an empty location in the canvas spawns the selected item at the corresponding world position. Clicking and dragging an existing object moves it while preserving the click offset. Right-clicking an object deletes it, with the browser context menu prevented. Show a live “Spawned: N” counter, initially 0. Include buttons “Clear All,” “Spawn 10 Random,” and “Gravity: Off.” Clear All removes every object. Spawn 10 Random creates ten randomly selected object types at random positions around the current camera view. Gravity toggles a simple simulation: when on, every spawned object accelerates downward, stops at world y=-12, and may have small horizontal velocity drift; when off, objects remain where placed. Character-like objects independently wander slowly left and right, reverse direction periodically and at far x edges (about +/-30), and have a tiny bobbing motion.

The spawn menu must contain these 40 selectable entries, each shown with an emoji-like icon and tiny single-line label: Beige Person, Green Duck, Pink Duck, Purple Duck, Yellow Climber, Palm Tree, Pine Tree, Small Tree, Dead Tree, House Alt, Small House, Big House, Tiny House, Gold Coin, Active Coin, Wood Crate, Red Crate, Grass Block, Blue Fish, Cart, Laser Gun, Red Person, Blue Person, Orange Person, Brown Rock, Green Bush, Yellow Flower, Blue Car, Barrel, Wooden Chair, Table, Sword, Cloud, Bird, Cat, Purple Crystal, Star, Grass Tuft, Stone Wall, White Cloud. Use the referenced Kenney-style 2D assets for the sprite entries where available (characters, ducks, climber, trees, houses, coins, crates, grass block, fish, cart, gun), with sprite-like proportions and transparent backgrounds. Procedural entries should be drawn as simple 64x64 canvas icons using their listed colors: person as a head/body/arms/legs, rock as a gray ellipse with darker spots, bush as overlapping green circles, flower with green stem and yellow petals/center, car as a colored rectangular body with roof and black wheels, barrel as a vertical rectangle with dark bands, chair and table as blocky wooden silhouettes, sword as gray blade and brown hilt, cloud as overlapping circles, bird as a triangular flying silhouette with a black eye, cat as an orange body/head with pointed ears and tail, crystal as a purple diamond with a white highlight, star as a yellow five-point star, grass tuft as several green blades, and stone wall as a gray block with darker brick marks. Use sprite sizes matching the source design: ordinary icons roughly 1.0–1.6 world units, trees/houses/clouds larger around 1.7–2.5; fish and gun are narrow/tall. Add a small random +/-0.3 world-unit placement offset for procedural icons only.

The UI should also display concise instructions: “Left-click empty: spawn,” “Drag objects: move,” “Right-click: delete,” “Middle-drag or arrows: pan,” “Wheel: zoom,” and “+/- keys: zoom.” Support middle-mouse dragging to pan the orthographic camera, arrow keys to pan, mouse wheel to zoom, and +/- keys to zoom. Clamp zoom between 0.25 and 6. Keep the visual style minimal, flat, colorful, and functional: green gridded sandbox, small colorful 2D assets, no combat, score, timer, lives, or win condition. Characters include Beige/Red/Blue/Orange Person, all ducks, Yellow Climber, Blue Fish, Bird, and Cat; these are the objects that autonomously wander horizontally.