Assets

Every game has assets — sprites, backgrounds, sound effects, music, spritesheets, tilesets. Umicat ships with an asset panel that covers the full lifecycle: bringing assets in, organizing them, editing them, and referencing them in chat.

Where the Assets panel lives

The left panel Assets tab. Each card shows preview + filename. Click a card to open the Asset Detail panel that slides out to the right of the panel — that's where every per-asset action lives (rename, delete, download, move, regions, hitbox, configure as tileset, open sheet editor, etc.).

The panel has a FilterBar at the top:

• Search — filename substring match. The same sanitisation rules as the agent's library search apply (My Cat → my_cat), so what you type in the search box matches what the agent finds via the same flow.
• Modality — All / Images / Audio (Images matches both image and spritesheet).
• View — Flat / Tree layout, plus an optional Group-by-pack checkbox.
• + Add menu — Upload from device / Browse library / Generate with AI.

Three ways to add assets

Upload from device

+ Add → Upload from device opens a file picker (multi-select supported).

• Images: PNG, JPG, WebP, up to 10 MB each.
• Audio: MP3, OGG, WAV, up to 5 MB each.
• Per-game cap: 50 MB total.

Filenames are sanitised on the server (lowercase, ASCII, underscores). The toast on a successful upload shows the canonical name so you know what handle to use in chat (Saved as my_cat.png).

Browse library

+ Add → Browse library opens the Library Browser modal — curated asset packs (Kenney, Sprout Lands, etc) that ship for free with Umicat.

• Assets tab — searchable, filterable single assets.
• Packs tab — pack cards; click a pack to drill into its full asset list, multi-select, and click Add all (or just the selected ones).

Library assets count toward the 50 MB per-game cap by reference, not by copy — they remain on the CDN.

Generate with AI

+ Add → Generate with AI ✨ opens the Generate Asset modal. See AI image generation for the full flow.

Per-asset actions

Open any asset card → the Asset Detail panel anchors to the right. Actions available depend on the asset type:

Insert into chat

Every asset card has an Insert button that prefills the chat textarea with a sentence like Please add cat.png to the scene for . Type the rest (where, how big, what behavior) and send. This is the fastest way to say "use this exact thing" without typing the filename.

Multi-select via the hover-revealed checkbox on cards, then use the sticky bottom Insert N to chat bar to insert a comma-joined list: Please add hero.png, sword.png, shield.png to the scene as ....

Folders

The Tree view shows folders. By default uploads land in the synthetic (root) folder. The agent and the Move action can place assets in sub-folders (characters/, tiles/, sfx/).

Rename / delete a folder from the hover-revealed buttons on the folder header (rename bulk-updates the path prefix; delete cascades into every contained asset).

Packs

Asset packs (library imports or uploaded .zip / webkit-directory drops) group related assets — a tileset + its animations + UI buttons + character sprites, all from one source. Each card shows a chip with the pack name when packed; the FilterBar's Group by pack option groups cards by pack with library packs at the top and your uploads at the bottom.

Importing your own pack: + Add → Import asset pack opens the Pack Import Wizard (5-step flow with vision-based classification of each file into uniform-grid / nine-slice / sprite / skip).

Spritesheets

Two kinds:

• Library spritesheets — read-only. Click → SheetInspectorModal lets you inspect frames, multi-select frames, and insert "use these frames as an animation for [thing]" prefills.
• User-built spritesheets — open the full Sheet Editor at /game/{id}/sheet/{filename}.

The sheet inspector reads the atlas (XML or JSON) when present; uniform- grid sheets are computed from frame width / height / spacing / margin.

Sheet Editor

Standalone page. Three panes:

• Preview pane — animated playback at the configured FPS, with optional onion-skin when paused.
• Timeline — drag-reorderable frame strip with per-frame holdMs.
• Frame inspector — selected frame's metadata + Duplicate / Delete / Regenerate.

Animation tags appear under the timeline as chips: name from–to loop. Tags become the Phaser animation keys (anims.create({ key: 'walk', ... })) in the runtime.

Keyboard: Space play/pause, ←/→ step, Delete remove frame.

Tilesets

A tileset is a spritesheet with cell-aligned tiles, used to paint tilemaps. Configure any spritesheet as a tileset via the Asset Detail panel → Configure as tileset… (cell size, columns, rows, margin, spacing). Then Tileset & autotile editor opens for per-tile metadata, autotile bitmask painting, and animations.

More: Tilemaps and Animated tiles.

Regions and 9-slice

Atlas-format images (UI button packs, decoration sheets) can be tagged with named regions via Tag regions: drag rectangles on the source PNG, name each one, optionally configure 9-slice cuts. Regions become available in HUD inspectors as named backgrounds (backgroundRegion: 'green_button').

Asking the agent for assets

Often the fastest path is just to chat. The agent has tools for:

• Searching the library — library_suggest returns candidate library assets matching your prompt; you pick one or escape to upload/generate.
• Inserting an asset you've uploaded — by filename, the agent reads metadata and wires the entity correctly.
• Generating a new asset — connector_generate_image (gated behind your explicit ✓ approval).

Example prompts:

I want a green grass tileset with autotile. Please pull one from the library.

Use cat.png (the one I uploaded) as the player sprite. Walk speed 200.

Generate a pixel-art coin sprite, 32x32, transparent background.

Next steps