feat: agent character sprites — replace CSS blob agents with LimeZu character tiles #17

New issue

Closed

opened 2026-05-20 15:57:10 +00:00 by agent-cos · 0 comments

agent-cos commented

2026-05-20 15:57:10 +00:00

Goal

Replace the current agent sprites (colored blob PNGs at public/office/sprites/agent-*.png) with actual character sprites from the LimeZu tileset or the DawnLike/1_Interiors assets.

Current State

Agent sprites are generated PNG blobs at /office/sprites/agent-{id}.png — colored rectangles with eyes. The design critique (design-critique-1.md) rates agent distinctiveness at 2.5/10: "Agents Are Indistinguishable Color Blobs — No Sprite Personality (P0)".

Task

Examine the available character sprites:
- assets/2_Characters/ — character sprites
- assets/dawnlike/ — DawnLike tileset characters
- assets/modern-interiors/Modern tiles_Free/Characters_free/ — LimeZu character sprites (Amelia, Alex, Adam, Bob variants)
Pick the best quality character sprites that match the office interior aesthetic
Create distinct sprite definitions for each of the 9 agents (cos, engineering, senior-eng, trust, market, health, content, presentations, vault)
Assign department-appropriate colors/palettes: cos=orange, engineering=teal, senior-eng=purple, trust=blue, market=green, health=gold, content=lavender, presentations=coral, vault=mint
Create a new file src/frontend/src/agentSprites.js that defines:
- Tilesheet source URL (copied to public/office/tiles/)
- Grid position for each agent variant on the spritesheet
- Per-agent color overlay/tint
Update FarmCanvas.jsx to render these character sprite tiles instead of the <img src="/office/sprites/agent-{id}.png"> elements

Technical Notes

Keep the existing agent overlay structure (HTML divs positioned absolutely)
Replace the inner <img> tag with a <div> that has CSS background-image set to a sprite region
Use image-rendering: pixelated and background-size clipping for crisp display
The container is 56x56px with 48x48 sprite area — keep this sizing

Acceptance Criteria

Each agent has a unique character sprite (distinguishable by silhouette, not just color)
Department color is visible in the sprite (via tint overlay or palette variant)
Sprites render crisply at 48x48
Hover states, status dots, and selection still work
Build succeeds

## Goal Replace the current agent sprites (colored blob PNGs at `public/office/sprites/agent-*.png`) with actual character sprites from the LimeZu tileset or the DawnLike/1_Interiors assets. ## Current State Agent sprites are generated PNG blobs at `/office/sprites/agent-{id}.png` — colored rectangles with eyes. The design critique (design-critique-1.md) rates agent distinctiveness at 2.5/10: "Agents Are Indistinguishable Color Blobs — No Sprite Personality (P0)". ## Task 1. Examine the available character sprites: - `assets/2_Characters/` — character sprites - `assets/dawnlike/` — DawnLike tileset characters - `assets/modern-interiors/Modern tiles_Free/Characters_free/` — LimeZu character sprites (Amelia, Alex, Adam, Bob variants) 2. Pick the best quality character sprites that match the office interior aesthetic 3. Create distinct sprite definitions for each of the 9 agents (cos, engineering, senior-eng, trust, market, health, content, presentations, vault) 4. Assign department-appropriate colors/palettes: cos=orange, engineering=teal, senior-eng=purple, trust=blue, market=green, health=gold, content=lavender, presentations=coral, vault=mint 5. Create a new file `src/frontend/src/agentSprites.js` that defines: - Tilesheet source URL (copied to `public/office/tiles/`) - Grid position for each agent variant on the spritesheet - Per-agent color overlay/tint 6. Update `FarmCanvas.jsx` to render these character sprite tiles instead of the `<img src="/office/sprites/agent-{id}.png">` elements ## Technical Notes - Keep the existing agent overlay structure (HTML divs positioned absolutely) - Replace the inner `<img>` tag with a `<div>` that has CSS background-image set to a sprite region - Use `image-rendering: pixelated` and `background-size` clipping for crisp display - The container is 56x56px with 48x48 sprite area — keep this sizing ## Acceptance Criteria - [ ] Each agent has a unique character sprite (distinguishable by silhouette, not just color) - [ ] Department color is visible in the sprite (via tint overlay or palette variant) - [ ] Sprites render crisply at 48x48 - [ ] Hover states, status dots, and selection still work - [ ] Build succeeds