197 lines
3.7 KiB
Markdown
197 lines
3.7 KiB
Markdown
# 🎨 UI ASSET GENERATION PLAN
|
||
**Demo Completion - Batch 1**
|
||
**Start**: 2026-01-04 21:18
|
||
**Style**: Dark-Chibi Noir (Style 32)
|
||
|
||
---
|
||
|
||
## 📋 BATCH 1 - UI ELEMENTS (20 assets)
|
||
|
||
### **Health & Stamina Bars** (4 assets)
|
||
|
||
1. **health_bar_frame.png**
|
||
- 200×30px bar container
|
||
- Dark border, noir style
|
||
- Empty frame outline
|
||
|
||
2. **health_bar_fill.png**
|
||
- 196×26px red gradient fill
|
||
- Blood red (#CC0000)
|
||
- Fits inside frame
|
||
|
||
3. **stamina_bar_frame.png**
|
||
- 200×30px bar container
|
||
- Same style as health
|
||
- Empty frame
|
||
|
||
4. **stamina_bar_fill.png**
|
||
- 196×26px blue gradient fill
|
||
- Energy blue (#0099FF)
|
||
- Fits inside frame
|
||
|
||
---
|
||
|
||
### **Inventory System** (6 assets)
|
||
|
||
5. **inventory_panel.png**
|
||
- 400×500px background
|
||
- Dark wooden panel texture
|
||
- Noir aesthetic
|
||
- Slightly worn edges
|
||
|
||
6. **inventory_slot_frame.png**
|
||
- 64×64px item slot
|
||
- Dark border
|
||
- Can see through center
|
||
|
||
7. **inventory_slot_highlight.png**
|
||
- 64×64px glow effect
|
||
- Golden/yellow outline
|
||
- Selected state
|
||
|
||
8. **hotbar_background.png**
|
||
- 600×80px horizontal bar
|
||
- Bottom of screen
|
||
- 9 slots visible
|
||
- Dark wood/metal
|
||
|
||
9. **item_slot_number.png**
|
||
- Small number badge (1-9)
|
||
- White text on dark circle
|
||
- For hotbar slots
|
||
|
||
10. **inventory_close_button.png**
|
||
- 40×40px X button
|
||
- Red when hover
|
||
- Top-right of panel
|
||
|
||
---
|
||
|
||
### **Dialogue System** (4 assets)
|
||
|
||
11. **dialogue_box.png**
|
||
- 800×200px text container
|
||
- Bottom-center of screen
|
||
- Dark background, semi-transparent
|
||
- Rounded corners
|
||
|
||
12. **dialogue_portrait_frame.png**
|
||
- 120×120px character portrait frame
|
||
- Left side of dialogue box
|
||
- Ornate border
|
||
|
||
13. **dialogue_continue_arrow.png**
|
||
- 32×32px blinking arrow
|
||
- Bottom-right of dialogue
|
||
- Indicates "press to continue"
|
||
|
||
14. **dialogue_name_tag.png**
|
||
- 200×40px name banner
|
||
- Above dialogue box
|
||
- Shows NPC name
|
||
|
||
---
|
||
|
||
### **Quest & UI Elements** (6 assets)
|
||
|
||
15. **quest_marker.png**
|
||
- 32×32px exclamation mark
|
||
- Floats above NPC head
|
||
- Yellow glow
|
||
- Animated pulse
|
||
|
||
16. **quest_panel.png**
|
||
- 350×250px quest list
|
||
- Side panel
|
||
- Shows active quests
|
||
- Dark background
|
||
|
||
17. **button_normal.png**
|
||
- 200×50px standard button
|
||
- Dark metal/wood
|
||
- Rounded edges
|
||
|
||
18. **button_hover.png**
|
||
- 200×50px button (lit)
|
||
- Slightly brighter
|
||
- Golden glow
|
||
|
||
19. **button_pressed.png**
|
||
- 200×50px button (pressed)
|
||
- Darker, inset look
|
||
- Tactile feel
|
||
|
||
20. **coin_icon.png**
|
||
- 32×32px gold coin
|
||
- Shiny, metallic
|
||
- For currency display
|
||
|
||
---
|
||
|
||
## 🎨 STYLE GUIDE:
|
||
|
||
**Color Palette:**
|
||
- Dark browns/blacks (noir)
|
||
- Blood red (health)
|
||
- Energy blue (stamina)
|
||
- Gold accents (highlights)
|
||
- Semi-transparent backgrounds
|
||
|
||
**Art Style:**
|
||
- Dark-Chibi Noir (Style 32)
|
||
- Thick black outlines
|
||
- Flat colors
|
||
- Gritty, worn textures
|
||
- Post-apocalyptic feel
|
||
|
||
**Technical:**
|
||
- 32-bit PNG with alpha
|
||
- Clean edges
|
||
- Centered subjects
|
||
- UI-optimized (crisp at screen resolution)
|
||
|
||
---
|
||
|
||
## ⏱️ GENERATION ORDER:
|
||
|
||
**Priority 1** (Critical - 10 assets):
|
||
1-4: Health/Stamina bars
|
||
5-7: Inventory basics
|
||
11-13: Dialogue box
|
||
|
||
**Priority 2** (Important - 6 assets):
|
||
8-10: Hotbar
|
||
14: Name tag
|
||
15: Quest marker
|
||
|
||
**Priority 3** (Polish - 4 assets):
|
||
16-19: Quest panel + buttons
|
||
20: Coin icon
|
||
|
||
---
|
||
|
||
## 📊 ESTIMATED TIME:
|
||
|
||
- Batch 1 Priority: 15 min
|
||
- Batch 2 Priority: 10 min
|
||
- Batch 3 Priority: 5 min
|
||
|
||
**TOTAL**: 30 minutes for all 20 UI assets
|
||
|
||
---
|
||
|
||
## ✅ AFTER UI GENERATION:
|
||
|
||
Next batches:
|
||
- **Batch 2**: Buildings (Shack, Campfire, Chest) - 15 min
|
||
- **Batch 3**: Item icons (Wood, Stone, etc.) - 10 min
|
||
|
||
**TOTAL DEMO ASSETS**: 28
|
||
**TOTAL TIME**: ~55 minutes
|
||
|
||
---
|
||
|
||
**Ready to generate!** 🚀
|
||
|
||
Starting with Priority 1 (critical UI) now...
|