123 lines
3.6 KiB
Markdown
123 lines
3.6 KiB
Markdown
# 🎬 FILMIČNI TERRAIN PREHODI - NAVODILA ZA UPORABO
|
|
|
|
## ✅ Kaj sem naredil:
|
|
|
|
### 1. 🌊 **SMOOTH WATER** (Fixed!)
|
|
- ✅ Voda se ne premika več kot cela kocka
|
|
- ✅ Samo nežen glimmer efekt (brightness shimmer)
|
|
- ✅ Brez LSD robov ali skew animacije
|
|
- ✅ Shader-safe z try-catch fallback
|
|
|
|
### 2. 🌱 **GRASS WIND** (Improved!)
|
|
- ✅ Nežno nihanje trave (reduced skew: 0.08 namesto 0.1)
|
|
- ✅ Ločena animacija za vodo in travo
|
|
- ✅ Shader wobble efekt na layerjih z `isWind: true`
|
|
|
|
### 3. 🎨 **TERRAIN TRANSITIONS** (New!)
|
|
- ✅ Generiran tileset: `Terrain_Transitions.png` (9 tiles)
|
|
- ✅ Smooth alpha-blended edges za vodo→trava
|
|
- ✅ Terrain Set definicije v TSX (auto-tiles)
|
|
- ✅ Wang/Blob tile pattern za naraven izgled
|
|
|
|
---
|
|
|
|
## 📖 KAKO UPORABITI V TILEDU:
|
|
|
|
### A) DODAJ TERRAIN TILESET V TVOJO MAPO:
|
|
|
|
1. **Odpri Tiled** in naloži `Faza1_Finalna.json`
|
|
2. V panelu **Tilesets** klikni **+** (Add External Tileset)
|
|
3. Izberi: `assets/maps/tilesets/Terrain_Transitions.tsx`
|
|
4. Klikni **OK** → Tileset se bo dodal
|
|
|
|
### B) UPORABI TERRAIN BRUSH ZA SMOOTH EDGE-E:
|
|
|
|
1. V panelu **Tilesets** izberi **Terrain_Transitions**
|
|
2. V **Terrains** panelu boš videl **"Water"** terrain
|
|
3. V toolbar izberi **Terrain Brush** (ikona "T" ali gumb Terrain)
|
|
4. Klikni na **Water** terrain
|
|
5. Zdaj ko rišeš čez travo, bodo robovi avtomatsko smooth! 🎬
|
|
|
|
### C) PREVERI ANIMIRANE TILESETS:
|
|
|
|
Water in Grass animated tilesets sta že dodana v `Faza1_Finalna.json`:
|
|
- `Water_Animated.tsx` (GID: 7020) → Nežen glimmer
|
|
- `Grass_Animated.tsx` (GID: 11116) → Nežno nihanje
|
|
|
|
**V Tiledu:**
|
|
- Klikni na tile v teh setih
|
|
- Spodaj boš videl **🎞️ Animation Preview** (filmstrip ikona)
|
|
- Tile se bo animiral! ✨
|
|
|
|
---
|
|
|
|
## 🎮 KAJ SE BO ZGODILO V IGRI:
|
|
|
|
### 1. VODA:
|
|
- Tile ostane na mestu
|
|
- Nežen brightness shimmer (glimmer efekt)
|
|
- Shader Shine efekt za dodatni sijaj (varno z try-catch)
|
|
- **Brez premikanja** ali ostrih robov
|
|
|
|
### 2. TRAVA:
|
|
- Nežno nihanje v vetru (wobble)
|
|
- Wind shader na layerjih z `isWind: true`
|
|
- Mehak sway animacija
|
|
|
|
### 3. PREHODI:
|
|
- Ko rišeš vodo čez travo s Terrain Brush-om, boš dobil:
|
|
- Smooth alpha-blended edge-e
|
|
- Naravne prehode brez kock
|
|
- Avtomatične vogale (auto-tiling)
|
|
|
|
---
|
|
|
|
## 📂 DODANE DATOTEKE:
|
|
|
|
```
|
|
/assets/maps/tilesets/
|
|
├── Terrain_Transitions.png ← Smooth edge tiles
|
|
├── Terrain_Transitions.tsx ← Terrain definitions
|
|
├── Water_Animated.png ← Glimmer frames (regenerated)
|
|
├── Water_Animated.tsx ← Animation config
|
|
├── Grass_Animated.png ← Wind sway frames (regenerated)
|
|
└── Grass_Animated.tsx ← Animation config
|
|
|
|
/scripts/
|
|
├── generate_terrain_transitions.py ← Generator za smooth edges
|
|
└── generate_nature_anim.py ← Updated (water glimmer)
|
|
|
|
/src/scenes/
|
|
└── GameScene.js ← Shader safety wrapper
|
|
```
|
|
|
|
---
|
|
|
|
## 🐛 TROUBLESHOOTING:
|
|
|
|
**Če igra crasha:**
|
|
- Shader efekti imajo try-catch fallback
|
|
- Preveri browser konzolo za `⚠️ PostFX Shine failed` warning
|
|
- Animacije bodo delovale tudi brez shaderjev
|
|
|
|
**Če ne vidiš smooth edge-ov:**
|
|
- Preveri, da si izbral **Terrain Brush** (T), ne normal brush
|
|
- Klikni na Water terrain v Terrains panelu
|
|
- Tileset mora biti pravilno importan
|
|
|
|
**Če animacije ne delujejo:**
|
|
- Preveri, da so TSX fajli v `/tilesets/` mapi
|
|
- Reload mapo v Tiledu (File → Reload)
|
|
- Preveri, da je GID pravilno določen
|
|
|
|
---
|
|
|
|
## 🎬 NASLEDNJI KORAKI:
|
|
|
|
1. Odpri Tiled ✅
|
|
2. Add Terrain_Transitions tileset ✅
|
|
3. Uporabi Terrain Brush za risanje ✅
|
|
4. Test v igri (npm start) ✅
|
|
|
|
**Enjoy smooth, cinematic terrain! 🎥**
|