diff --git a/README.md b/README.md index d33883d..1c12f71 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,14 @@ python3 -m http.server 8080 - **Abbauen** (Linke Maustaste) und **Setzen** (Rechte Maustaste) per DDA-Voxel-Raycast - **Streaming**: Chunks werden um den Spieler dynamisch geladen/entfernt - First-Person-Steuerung mit Gravitation, Kollision, Springen, **Fly-Modus** & Schwimmen +- **Grafik**: dynamische Schatten (PCF Soft), baked Vertex-Ambient-Occlusion + (Smooth Lighting) und Post-Processing (Bloom + ACES Tone-Mapping / sRGB) + +## Anpassen + +Alle Einstellungen – Render-Distanz, Grafik-Effects (Schatten/Bloom/AO), Beleuchtung, +Spieler-Physik, Welt-Seed, Meereshöhe, Maus-Sensitivität u. a. – liegen zentral in +[`js/config.js`](js/config.js). Werte ändern, Seite neu laden, fertig. ## Steuerung @@ -38,8 +46,7 @@ python3 -m http.server 8080 | `WASD` | Laufen | | `Maus` | Umsehen | | `Leertaste` | Springen / im Wasser aufsteigen | -| `Shift` | im Fly nach unten | -| `Strg` | Sprinten | +| `Shift` | Sprinten / im Flug nach unten | | `Linke Maustaste` | Block abbauen | | `Rechte Maustaste` | Block setzen | | `1`–`6` | Block in der Hotbar wählen | @@ -52,6 +59,7 @@ python3 -m http.server 8080 |---|---| | `index.html` / `style.css` | Markup, UI (Overlay, Hotbar, Crosshair, HUD), Importmap | | `js/constants.js` | Block-/Biome-/Atlas-Konstanten, Tile-Mapping | +| `js/config.js` | Zentrale Einstellungen (Grafik, Performance, Spieler, Welt) | | `js/rng.js` | Seeded PRNG (mulberry32) + Hashes | | `js/noise.js` | Noise-Funktionen (Terrain, Biome, Höhlen) + FBM | | `js/textures.js` | Prozeduraler 16×16-Texturatlas | diff --git a/js/textures.js b/js/textures.js index cb08ad2..4167e29 100644 --- a/js/textures.js +++ b/js/textures.js @@ -43,7 +43,10 @@ export function buildAtlasTexture() { const rStone = mulberry32(7); for (let i = 0; i < 10; i++) { ctx.fillStyle = `rgb(${clamp(90 + (rStone() - .5) * 20)},${clamp(90 + (rStone() - .5) * 20)},${clamp(94 + (rStone() - .5) * 20)})`; - ctx.fillRect(p.ox + ((rStone() * TILE_PX) | 0), p.oy + ((rStone() * TILE_PX) | 0), 2, 1); + // 2px breite Adern: x auf TILE_PX-2 begrenzen, damit sie nicht ins Nachbar-Tile bluten. + const sx = Math.min((rStone() * TILE_PX) | 0, TILE_PX - 2); + const sy = (rStone() * TILE_PX) | 0; + ctx.fillRect(p.ox + sx, p.oy + sy, 2, 1); } // --- SAND --- @@ -99,7 +102,11 @@ export function buildAtlasTexture() { const d = (rLeaf() - 0.5) * 40; const c = shade([44, 100, 30], d); ctx.fillStyle = `rgb(${c[0]},${c[1]},${c[2]})`; - ctx.fillRect(p.ox + ((rLeaf() * TILE_PX) | 0), p.oy + ((rLeaf() * TILE_PX) | 0), 2, 2); + // 2x2-Bloecke: Offset auf TILE_PX-2 begrenzen, damit sie nicht ins Nachbar-Tile + // bluten (ein Blatt-Block hatte Offset 15 und erzeugte 2 dunkle Pixel im Wasser). + const lx = Math.min((rLeaf() * TILE_PX) | 0, TILE_PX - 2); + const ly = Math.min((rLeaf() * TILE_PX) | 0, TILE_PX - 2); + ctx.fillRect(p.ox + lx, p.oy + ly, 2, 2); } // --- WATER (halbtransparent) ---