feat: Complete 2D Visual Overhaul - Isometric to Flat Top-Down
- NEW: Flat2DTerrainSystem.js (375 lines) - NEW: map2d_data.js procedural map (221 lines) - MODIFIED: GameScene async create, 2D terrain integration - MODIFIED: Player.js flat 2D positioning - MODIFIED: game.js disabled pixelArt for smooth rendering - FIXED: 15+ bugs (updateCulling, isometric conversions, grid lines) - ADDED: Phase 28 to TASKS.md - DOCS: DNEVNIK.md session summary Result: Working flat 2D game with Stardew Valley style! Time: 5.5 hours
This commit is contained in:
195
docs/ART_STYLE_GUIDE.md
Normal file
195
docs/ART_STYLE_GUIDE.md
Normal file
@@ -0,0 +1,195 @@
|
||||
# 🎨 NOVAFARMA - ART STYLE GUIDE
|
||||
|
||||
**Last Updated:** 2025-12-14
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ MANDATORY ART STYLE RULES
|
||||
|
||||
### ✅ **ALLOWED STYLES:**
|
||||
- **2D Flat** (Top-down, side-view)
|
||||
- **2.5D Isometric** (Stardew Valley style)
|
||||
- **Smooth painted/drawn style**
|
||||
|
||||
### ❌ **FORBIDDEN STYLES:**
|
||||
- ❌ **NO Pixel Art** (unless specifically requested!)
|
||||
- ❌ **NO Voxel style**
|
||||
- ❌ **NO 3D cube/block aesthetics**
|
||||
- ❌ **NO grid-based chunky graphics**
|
||||
|
||||
---
|
||||
|
||||
## 🎯 DEFAULT STYLE: STARDEW VALLEY
|
||||
|
||||
**All assets should follow Stardew Valley aesthetic:**
|
||||
|
||||
### Visual Characteristics:
|
||||
- ✅ Smooth, hand-drawn appearance
|
||||
- ✅ Soft edges and organic shapes
|
||||
- ✅ 2.5D isometric tiles (diamond-shaped)
|
||||
- ✅ Rich colors with subtle gradients
|
||||
- ✅ Natural, flowing animations
|
||||
- ✅ Detailed but clean visuals
|
||||
|
||||
### Examples:
|
||||
- **Terrain:** Smooth textured tiles, not blocky pixels
|
||||
- **Water:** Flowing animated surface, not grid-based
|
||||
- **Trees:** Natural shapes with smooth foliage
|
||||
- **Buildings:** Isometric structures with depth
|
||||
- **Characters:** Smooth sprites with animation frames
|
||||
|
||||
---
|
||||
|
||||
## 🌊 WATER RENDERING
|
||||
|
||||
### ✅ CORRECT:
|
||||
```
|
||||
- Flat 2D animated surface
|
||||
- Smooth wave patterns
|
||||
- Gradient blue colors
|
||||
- Sparkle/shimmer effects
|
||||
- Seamless tiles (no grid lines!)
|
||||
```
|
||||
|
||||
### ❌ WRONG:
|
||||
```
|
||||
- Isometric water cubes
|
||||
- Voxel-style blocks
|
||||
- Visible tile borders
|
||||
- Pixelated edges
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🌳 DECORATIONS (Trees, Rocks, etc.)
|
||||
|
||||
### ✅ CORRECT:
|
||||
```
|
||||
- 2.5D isometric sprites
|
||||
- Smooth natural shapes
|
||||
- Depth via shading/gradients
|
||||
- Organic irregular forms
|
||||
```
|
||||
|
||||
### ❌ WRONG:
|
||||
```
|
||||
- Voxel cubes
|
||||
- Pixel art blocks
|
||||
- Geometric chunky shapes
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🏠 BUILDINGS & STRUCTURES
|
||||
|
||||
### ✅ CORRECT:
|
||||
```
|
||||
- Isometric 2.5D view
|
||||
- Multiple faces visible (front, side, roof)
|
||||
- Smooth textures
|
||||
- Depth through shading
|
||||
- Natural proportions
|
||||
```
|
||||
|
||||
### ❌ WRONG:
|
||||
```
|
||||
- Flat pixel sprites
|
||||
- Voxel blocks
|
||||
- 3D cubes
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💧 EFFECTS (Rain, Puddles, Particles)
|
||||
|
||||
### ✅ CORRECT:
|
||||
```
|
||||
- Smooth particle sprites
|
||||
- Natural shapes (irregular puddles)
|
||||
- Alpha blending
|
||||
- Soft animations
|
||||
```
|
||||
|
||||
### ❌ WRONG:
|
||||
```
|
||||
- Pixel-perfect droplets
|
||||
- Blocky grid-aligned effects
|
||||
- Hard edges
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 COLOR PALETTE
|
||||
|
||||
### Guidelines:
|
||||
- Use **rich, saturated colors** (Stardew Valley style)
|
||||
- Avoid **pure primaries** (too harsh)
|
||||
- Use **subtle gradients** for depth
|
||||
- Include **highlights and shadows**
|
||||
- Maintain **warm, inviting tones**
|
||||
|
||||
### Water Colors:
|
||||
```
|
||||
Dark Blue: #1e5f8c
|
||||
Medium Blue: #2a7fbc
|
||||
Light Blue: #4488cc
|
||||
Highlights: #88ccff
|
||||
Sparkles: #ffffff
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📐 TECHNICAL SPECS
|
||||
|
||||
### Tile Sizes:
|
||||
- **Terrain tiles:** 48x48px (base)
|
||||
- **Decorations:** Variable (proportional to tile)
|
||||
- **Buildings:** Multiple tiles (e.g., 2x2, 3x3)
|
||||
- **Effects:** 16-64px depending on effect
|
||||
|
||||
### Rendering:
|
||||
- **Seamless tiles** (no borders/grid lines!)
|
||||
- **Alpha transparency** for blending
|
||||
- **Depth sorting** (Y-axis for isometric)
|
||||
- **Smooth animations** (4-8 frames typical)
|
||||
|
||||
---
|
||||
|
||||
## 🚫 EXCEPTION CASES
|
||||
|
||||
**Pixel art is ONLY allowed when:**
|
||||
1. User **explicitly requests** pixel art style
|
||||
2. User says "make this pixel art" or similar
|
||||
3. User provides pixel art reference
|
||||
|
||||
**Default is ALWAYS Stardew Valley smooth 2.5D!**
|
||||
|
||||
---
|
||||
|
||||
## ✅ CHECKLIST FOR NEW ASSETS
|
||||
|
||||
Before creating any visual asset, verify:
|
||||
|
||||
- [ ] Is it smooth 2.5D (not pixelated)?
|
||||
- [ ] Does it match Stardew Valley aesthetic?
|
||||
- [ ] Are edges smooth (not blocky)?
|
||||
- [ ] Does it use gradients/shading?
|
||||
- [ ] Is it seamless (no grid lines)?
|
||||
- [ ] Does it blend naturally with existing assets?
|
||||
|
||||
---
|
||||
|
||||
## 📝 NOTES
|
||||
|
||||
- **This guide overrides** any previous pixel art references
|
||||
- **Always default to Stardew Valley style**
|
||||
- **When in doubt:** Smooth > Pixelated
|
||||
- **Quality over speed:** Take time to make it look good
|
||||
|
||||
---
|
||||
|
||||
**Remember:** We're building a beautiful, smooth 2.5D farming game, NOT a retro pixel game!
|
||||
|
||||
---
|
||||
|
||||
*Last confirmed by user: 2025-12-14 14:47*
|
||||
Reference in New Issue
Block a user