davidkotnik/novafarma
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tiled Map Editor Exploration + Bug Fixes

Browse Source 
Tiled Setup:
- Installed Tiled v1.11.2 (winget)
- Created workflow documentation (.agent/workflows/tiled-map-setup.md)
- Generated demo Tiled map files (farm_map.tmx, .json, .tsx)
- Created TILED_INTEGRATION_STATUS.md documentation

 Bug Fixes:
- SaveSystem.js: Fixed compatibility with Flat2DTerrainSystem
- InteractionSystem.js: Added null checks for terrainSystem
- PreloadScene.js: Tiled asset loading (currently not used)

 Documentation:
- Created DNEVNIK.md (development diary)
- Updated QUICK_TASK_REFERENCE.md with recent work

 Note: Tiled integration incomplete (tileset size issues)
- Reverted to procedural Flat2DTerrainSystem (working)
- Future work: Create proper 192x192 tileset PNGs

Session: 2h (20:00-22:00)
Date: 14.12.2024
This commit is contained in:
NovaFarma Dev
2025-12-14 22:55:29 +01:00
parent 80bddf5d61
commit a4d2d137ec
20 changed files with 1248 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
data/map2d_data.js
View File

@@ -24,59 +24,88 @@ const Map2DData = {
BUSH: 12
},
// Map layout - CLEAN MINIMAL DESIGN!
// Map layout - BEAUTIFUL NATURAL DESIGN! 🌳💧🛤️
generateMap: function () {
const map = [];
// Initialize with CLEAN grass (very few flowers)
// Initialize with grass (some with flowers - 5%)
for (let y = 0; y < this.height; y++) {
map[y] = [];
for (let x = 0; x < this.width; x++) {
// Mostly clean grass
// Mix of clean grass and flowery grass
map[y][x] = {
base: Math.random() < 0.03 ? this.tileTypes.GRASS_FLOWERS : this.tileTypes.GRASS,
base: Math.random() < 0.05 ? this.tileTypes.GRASS_FLOWERS : this.tileTypes.GRASS,
decoration: null,
walkable: true
};
}
}
// Add ONE pond (center)
this.addPond(map, 50, 50, 12, 10);
// 1. BEAUTIFUL ORGANIC POND (like reference image!) 💧
this.addPond(map, 60, 45, 18, 14); // Larger, more organic
// MINIMAL trees - just 4 small clusters
this.addTreeCluster(map, 20, 20, 2);
this.addTreeCluster(map, 80, 20, 2);
this.addTreeCluster(map, 20, 80, 2);
this.addTreeCluster(map, 80, 80, 2);
// 2. NO PATHS - clean grass! 🌿
// this.addWindingPath(map, 10, 10, 90, 90); // Disabled
// this.addWindingPath(map, 90, 10, 10, 90); // Disabled
// Very few flowers
this.addFlowers(map, 10);
// 3. MORE TREES IN NATURAL CLUSTERS 🌳
// Top-left forest
this.addTreeCluster(map, 15, 15, 5);
this.addTreeCluster(map, 18, 12, 4);
this.addTreeCluster(map, 12, 18, 3);
// NO paths - keep it clean!
// NO bushes - too busy!
// Top-right forest
this.addTreeCluster(map, 85, 15, 5);
this.addTreeCluster(map, 82, 18, 4);
this.addTreeCluster(map, 88, 12, 3);
// Bottom-left forest
this.addTreeCluster(map, 15, 85, 5);
this.addTreeCluster(map, 18, 82, 4);
this.addTreeCluster(map, 12, 88, 3);
// Bottom-right forest
this.addTreeCluster(map, 85, 85, 5);
this.addTreeCluster(map, 82, 88, 4);
this.addTreeCluster(map, 88, 82, 3);
// Scattered single trees
for (let i = 0; i < 15; i++) {
this.addTreeCluster(map,
20 + Math.random() * 60,
20 + Math.random() * 60,
1
);
}
// 4. COLORFUL FLOWERS SCATTERED 🌸
this.addFlowers(map, 30);
// 5. BUSHES near tree clusters 🌿
this.addBushes(map, 15);
// 6. NO PUDDLES (no paths anymore!)
// this.addPuddlesAlongPaths(map, 8); // Disabled
return map;
},
addPond: function (map, centerX, centerY, width, height) {
// Organic pond shape (not perfect rectangle)
for (let y = -height / 2; y < height / 2; y++) {
for (let x = -width / 2; x < width / 2; x++) {
const dx = x / (width / 2);
const dy = y / (height / 2);
const dist = Math.sqrt(dx * dx + dy * dy);
// PERFECTLY ROUND/CIRCULAR pond! 🔵
const radius = Math.min(width, height) / 2;
// Create organic edge
const noise = Math.sin(x * 0.5) * 0.2 + Math.cos(y * 0.3) * 0.2;
for (let y = -radius; y < radius; y++) {
for (let x = -radius; x < radius; x++) {
const dist = Math.sqrt(x * x + y * y);
if (dist < 1.0 + noise) {
// Perfect circle - no noise!
if (dist < radius) {
const tileX = Math.floor(centerX + x);
const tileY = Math.floor(centerY + y);
if (tileX >= 0 && tileX < this.width && tileY >= 0 && tileY < this.height) {
// Check if edge or center
if (dist > 0.85 + noise) {
// Edge or center (smooth transition)
if (dist > radius - 2) {
map[tileY][tileX].base = this.tileTypes.WATER_EDGE;
} else {
map[tileY][tileX].base = this.tileTypes.WATER;
@@ -87,12 +116,12 @@ const Map2DData = {
}
}
// Add lily pads (3-5 random positions in pond)
// Add lily pads in circular pattern
for (let i = 0; i < 4; i++) {
const angle = (Math.PI * 2 * i) / 4 + Math.random() * 0.5;
const radius = (width / 2) * (0.4 + Math.random() * 0.3);
const lx = Math.floor(centerX + Math.cos(angle) * radius);
const ly = Math.floor(centerY + Math.sin(angle) * radius);
const r = radius * (0.4 + Math.random() * 0.3);
const lx = Math.floor(centerX + Math.cos(angle) * r);
const ly = Math.floor(centerY + Math.sin(angle) * r);
if (lx >= 0 && lx < this.width && ly >= 0 && ly < this.height) {
if (map[ly][lx].base === this.tileTypes.WATER) {
@@ -104,7 +133,7 @@ const Map2DData = {
addWindingPath: function (map, startX, startY, endX, endY) {
const steps = 50;
const pathWidth = 2 + Math.floor(Math.random() * 2); // 2-3 tiles wide
const pathWidth = 1; // NARROW path - 1 tile wide!
for (let i = 0; i <= steps; i++) {
const t = i / steps;