Spaces:
Sleeping
Sleeping
Claude Code
Claude Code: Analyze and optimize Cain's frontend asset loading strategy. Current iss
af77dd8 | # Cain's Frontend Asset Manifest | |
| ## Asset Loading Strategy | |
| This document catalogs all frontend assets and defines the loading priority strategy. | |
| ### Loading Phases | |
| 1. **Critical Assets (Phase 1)** - Loaded immediately on page load | |
| - Required for initial render and basic functionality | |
| - Blocks the loading screen until complete | |
| 2. **Deferred Assets (Phase 2)** - Loaded after initial render | |
| - Non-critical decorative elements | |
| - Loaded asynchronously after scene creation | |
| 3. **On-Demand Assets (Phase 3)** - Loaded only when needed | |
| - Rarely used features (guest agents, error states) | |
| - Loaded on first use | |
| --- | |
| ## Asset Catalog | |
| ### Critical Assets (Phase 1) - ~3.6MB | |
| | Asset | Size | Type | Description | | |
| |-------|------|------|-------------| | |
| | office_bg_small.webp | 982KB | Image | Main office background | | |
| | star-idle-v5.png | 1.8MB | Spritesheet | Main character idle animation | | |
| | sofa-idle-v3.png | 49KB | Image | Main furniture - sofa | | |
| | sofa-shadow-v1.png | 14KB | Image | Sofa shadow | | |
| | desk-v3.webp | 52KB | Image | Office desk | | |
| | memo-bg.webp | 3KB | Image | Memo panel background | | |
| | star-working-spritesheet-grid.webp | 1.3MB | Spritesheet | Writing/working state | | |
| | sync-animation-v3-grid.webp | 2.0MB | Spritesheet | Sync state animation | | |
| **Font (Locale-based):** ~700KB | |
| - ark-pixel-12px-proportional-[locale].ttf.woff2 | |
| ### Deferred Assets (Phase 2) - ~4.2MB | |
| | Asset | Size | Type | Description | | |
| |-------|------|------|-------------| | |
| | plants-spritesheet.webp | 193KB | Spritesheet | Decorative plants | | |
| | posters-spritesheet.webp | 580KB | Spritesheet | Wall posters | | |
| | cats-spritesheet.webp | 567KB | Spritesheet | Cat animations | | |
| | flowers-bloom-v2.webp | 341KB | Spritesheet | Flower bloom animation | | |
| | serverroom-spritesheet.webp | 995KB | Spritesheet | Server room decor | | |
| | coffee-machine-v3-grid.webp | 2.5MB | Spritesheet | Coffee machine | | |
| | coffee-machine-shadow-v1.png | 1KB | Image | Coffee machine shadow | | |
| ### On-Demand Assets (Phase 3) - ~1.8MB | |
| | Asset | Size | Type | Description | Trigger | | |
| |-------|------|------|-------------|---------| | |
| | error-bug-spritesheet-grid.webp | 1.8MB | Spritesheet | Error state animation | On error | | |
| | guest_anim_1-6.webp | ~0KB each | Spritesheet | Guest agent animations | On guest join | | |
| | guest_role_1-6.png | ~0-1KB each | Image | Guest static avatars | On guest join | | |
| ### UI Button Assets - ~5KB | |
| | Asset | Size | Type | Description | | |
| |-------|------|------|-------------| | |
| | btn-state-sprite.png | 1KB | Sprite | State toggle button | | |
| | btn-open-drawer-sprite.png | 1KB | Sprite | Drawer button | | |
| | btn-move-house-sprite.png | ~0KB | Sprite | Move house button | | |
| | btn-back-home-sprite.png | ~0KB | Sprite | Back home button | | |
| | btn-broker-sprite.png | ~0KB | Sprite | Broker button | | |
| | btn-diy-sprite.png | ~0KB | Sprite | DIY button | | |
| **Note:** Button assets are loaded via CSS background-image and don't use Phaser loader. | |
| --- | |
| ## Optimization Strategy | |
| ### Current Total | |
| - **All Assets:** ~13.8MB | |
| - **Initial Load (Phase 1):** ~4.3MB (including font) | |
| - **Deferred Load (Phase 2):** ~4.2MB | |
| - **On-Demand (Phase 3):** ~1.8MB (only as needed) | |
| ### Implementation Details | |
| 1. **HTML Preload Hints** - Added for critical assets in `<head>`: | |
| ```html | |
| <link rel="preload" href="/static/office_bg_small.webp" as="image"> | |
| <link rel="preload" href="/static/star-idle-v5.png" as="image"> | |
| <link rel="preload" href="/static/fonts/ark-pixel-12px-proportional-zh_cn.ttf.woff2" as="font" crossorigin> | |
| ``` | |
| 2. **Phaser Asset Loader** - Modified preload() function: | |
| - Phase 1: Loads 8 critical assets (blocks loading screen) | |
| - Phase 2: Loads 7 deferred assets after scene.create() | |
| - Phase 3: Loads on-demand assets when needed | |
| 3. **Lazy Loading Implementation** - After scene creation: | |
| ```javascript | |
| function loadDeferredAssets() { | |
| // Load decorative assets asynchronously | |
| game.load.spritesheet('plants', '/static/plants-spritesheet.webp', ...); | |
| game.load.spritesheet('posters', '/static/posters-spritesheet.webp', ...); | |
| // ... etc | |
| game.load.start(); | |
| } | |
| ``` | |
| ### Expected Performance Improvements | |
| - **Initial Load Time:** Reduced by ~40% (4.3MB vs 13.8MB) | |
| - **Time to Interactive:** Improved as critical UI renders faster | |
| - **Perceived Performance:** Loading screen shows progress for essential assets only | |
| --- | |
| ## Maintenance Notes | |
| ### Adding New Assets | |
| 1. **Determine the phase:** Is this critical for initial render? | |
| 2. **Update this manifest:** Add asset with size and description | |
| 3. **Modify preload() function:** Add to appropriate loading phase | |
| 4. **Update totalAssets count:** Adjust progress bar calculation | |
| ### Re-compressing Existing Assets | |
| Consider: | |
| - Converting PNG sprites to WebP (smaller size, same quality) | |
| - Reducing frame counts in spritesheets where possible | |
| - Using texture atlases for smaller sprites | |
| ### Font Optimization | |
| Current: All locale fonts are ~700KB each | |
| - Consider subsetting fonts to include only used characters | |
| - Or load font asynchronously after initial render | |
| --- | |
| *Generated: 2026-03-14* | |
| *Last Updated: See git history for modifications* | |