diff --git a/assets/chest.png b/assets/chest.png index 606b463..57c5511 100644 Binary files a/assets/chest.png and b/assets/chest.png differ diff --git a/assets/fence_horizontal.png b/assets/fence_horizontal.png index f6ddb17..fca83c6 100644 Binary files a/assets/fence_horizontal.png and b/assets/fence_horizontal.png differ diff --git a/assets/signpost_city.png b/assets/signpost_city.png index f0d1498..28692cb 100644 Binary files a/assets/signpost_city.png and b/assets/signpost_city.png differ diff --git a/assets/sprites/cesnja_sadje.png b/assets/sprites/cesnja_sadje.png index be3ca06..9373eab 100644 Binary files a/assets/sprites/cesnja_sadje.png and b/assets/sprites/cesnja_sadje.png differ diff --git a/assets/sprites/roza_cesnjevo_drevo.png b/assets/sprites/roza_cesnjevo_drevo.png index 12b6563..e295152 100644 Binary files a/assets/sprites/roza_cesnjevo_drevo.png and b/assets/sprites/roza_cesnjevo_drevo.png differ diff --git a/assets/sprites/tree_apple.png b/assets/sprites/tree_apple.png new file mode 100644 index 0000000..aabdce4 Binary files /dev/null and b/assets/sprites/tree_apple.png differ diff --git a/assets/sprites/tree_cherry.png b/assets/sprites/tree_cherry.png new file mode 100644 index 0000000..41b2d47 Binary files /dev/null and b/assets/sprites/tree_cherry.png differ diff --git a/assets/sprites/tree_dead.png b/assets/sprites/tree_dead.png new file mode 100644 index 0000000..433248a Binary files /dev/null and b/assets/sprites/tree_dead.png differ diff --git a/assets/sprites/tree_oak.png b/assets/sprites/tree_oak.png new file mode 100644 index 0000000..999f8a0 Binary files /dev/null and b/assets/sprites/tree_oak.png differ diff --git a/assets/sprites/tree_pine.png b/assets/sprites/tree_pine.png new file mode 100644 index 0000000..f18ae87 Binary files /dev/null and b/assets/sprites/tree_pine.png differ diff --git a/assets/stone_sprite.png b/assets/stone_sprite.png index 9f0b905..cd61599 100644 Binary files a/assets/stone_sprite.png and b/assets/stone_sprite.png differ diff --git a/assets/structure_house.png b/assets/structure_house.png index 3c30082..0845908 100644 Binary files a/assets/structure_house.png and b/assets/structure_house.png differ diff --git a/assets/tree_dead.png b/assets/tree_dead.png index d0dd534..29a745d 100644 Binary files a/assets/tree_dead.png and b/assets/tree_dead.png differ diff --git a/assets/tree_dead_new.png b/assets/tree_dead_new.png index 28820c9..f612c7b 100644 Binary files a/assets/tree_dead_new.png and b/assets/tree_dead_new.png differ diff --git a/assets/tree_green.png b/assets/tree_green.png index e9d0dab..1a4fed8 100644 Binary files a/assets/tree_green.png and b/assets/tree_green.png differ diff --git a/assets/tree_green_new.png b/assets/tree_green_new.png index f4d3ee8..e08210a 100644 Binary files a/assets/tree_green_new.png and b/assets/tree_green_new.png differ diff --git a/data/map2d_data.js b/data/map2d_data.js index 4dba4ea..01e7f78 100644 --- a/data/map2d_data.js +++ b/data/map2d_data.js @@ -48,36 +48,19 @@ const Map2DData = { // this.addWindingPath(map, 10, 10, 90, 90); // Disabled // this.addWindingPath(map, 90, 10, 10, 90); // Disabled - // 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); + // 3. SPARSE SCATTERED TREES ๐ŸŒณ (NO CLUSTERS!) + // Removed all corner forests - too crowded! - // 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 - MANY MORE! - for (let i = 0; i < 50; i++) { + // Just a few scattered trees across entire map + for (let i = 0; i < 10; i++) { // VERY FEW! (was 15) this.addTreeCluster(map, - 10 + Math.random() * 80, // Wider spread + 10 + Math.random() * 80, // Entire map 10 + Math.random() * 80, - 1 + 1 // Single trees only ); } + // 4. COLORFUL FLOWERS SCATTERED ๐ŸŒธ this.addFlowers(map, 30); @@ -187,7 +170,7 @@ const Map2DData = { addTreeCluster: function (map, centerX, centerY, count) { for (let i = 0; i < count; i++) { const angle = (Math.PI * 2 * i) / count + Math.random() * 0.5; - const radius = 2 + Math.random() * 3; + const radius = 8 + Math.random() * 7; // EVEN WIDER! (was 5+7) const tx = Math.floor(centerX + Math.cos(angle) * radius); const ty = Math.floor(centerY + Math.sin(angle) * radius); diff --git a/docs/DNEVNIK.md b/docs/DNEVNIK.md index 1d58b44..b628e51 100644 --- a/docs/DNEVNIK.md +++ b/docs/DNEVNIK.md @@ -1,5 +1,13 @@ # ๐Ÿ“– DNEVNIK RAZVOJA - NovaFarma +## โš ๏ธ **POMEMBNO - User Availability:** +**Status:** Na dopustu / bolniลกki +**Razpoloลพljivost:** Lahko delamo dolge sessions (3-4+ ur) +**Ni potrebe:** Skrbeti za ฤas spanja ali utrujenost +**User bo povedal:** Ko je utrujen/zaspan + +--- + ## ๐Ÿ—“๏ธ 14. December 2024 - Session 1: Tiled Map Editor Exploration **Trajanje:** 2 uri (20:00 - 22:00) diff --git a/src/scenes/PreloadScene.js b/src/scenes/PreloadScene.js index fc853da..5200c21 100644 --- a/src/scenes/PreloadScene.js +++ b/src/scenes/PreloadScene.js @@ -56,9 +56,12 @@ class PreloadScene extends Phaser.Scene { this.load.image('tree_blue_final', 'assets/tree_blue_final.png'); this.load.image('tree_dead_final', 'assets/tree_dead_final.png'); - // ๐ŸŒธ CHERRY BLOSSOM TREES (NEW!) - this.load.image('cesnjevo_drevo', 'assets/sprites/roza_cesnjevo_drevo.png'); - this.load.image('cesnja', 'assets/sprites/cesnja_sadje.png'); + // ๐ŸŒณ TREE VARIETY SPRITES (GREEN SCREEN!) + this.load.image('tree_cherry', 'assets/sprites/tree_cherry.png'); + this.load.image('tree_oak', 'assets/sprites/tree_oak.png'); + this.load.image('tree_pine', 'assets/sprites/tree_pine.png'); + this.load.image('tree_dead', 'assets/sprites/tree_dead.png'); + this.load.image('tree_apple', 'assets/sprites/tree_apple.png'); // STARDEW VALLEY FOREST TREES (NEW!) this.load.image('tree_purple', 'assets/tree_purple.png'); @@ -153,7 +156,9 @@ class PreloadScene extends Phaser.Scene { // NOTE: Do NOT process spritesheets - they already have proper alpha! // Processing destroys frame definitions - this.processAllTransparency(); + // ๐Ÿšซ DISABLED - Tree sprites already have transparency! + // this.processAllTransparency(); + this.createAnimations(); }); @@ -345,10 +350,10 @@ class PreloadScene extends Phaser.Scene { 'wheat_sprite', 'grass_sprite', 'leaf_sprite', - 'stone_sprite', + 'stone_sprite' - // ๐ŸŒธ CHERRY BLOSSOM TREE - 'cesnjevo_drevo' + // ๐ŸŒณ TREES REMOVED - already have transparent PNG! + // (green removal would delete green leaves!) ]; spritesToProcess.forEach(spriteKey => { @@ -360,10 +365,10 @@ class PreloadScene extends Phaser.Scene { this.ultraRemoveBackground('fence_post'); } - // ULTRA AGGRESSIVE: Cherry Blossom Tree (remove black outlines!) - if (this.textures.exists('cesnjevo_drevo')) { - this.ultraRemoveBackground('cesnjevo_drevo'); - } + // ULTRA REMOVED - new tree sprites already have transparency! + // if (this.textures.exists('cesnjevo_drevo')) { + // this.ultraRemoveBackground('cesnjevo_drevo'); + // } console.log('โœ… All sprites transparency processed!'); } @@ -399,15 +404,16 @@ class PreloadScene extends Phaser.Scene { const brightness = (r + g + b) / 3; - // ๐ŸŸข NUCLEAR GREEN SCREEN REMOVAL! - // Remove ANY pixel where green is even SLIGHTLY dominant + // ๐ŸŸข GREEN REMOVAL - Only BRIGHT greens! + // Pink (255,105,180) has g=105 - MUST KEEP! + // Bright green (0,255,0) has g=255 - REMOVE! const isGreen = ( - g > 100 && // Even darker greens - g > r && // Green beats red - g > b // Green beats blue + g > 180 && // Only very bright green + g > r * 1.3 && // Green dominates red + g > b * 1.3 // Green dominates blue ); if (isGreen) { - data[i + 3] = 0; // NUKE IT! + data[i + 3] = 0; continue; } diff --git a/src/systems/Flat2DTerrainSystem.js b/src/systems/Flat2DTerrainSystem.js index 7adff6c..8cbee1c 100644 --- a/src/systems/Flat2DTerrainSystem.js +++ b/src/systems/Flat2DTerrainSystem.js @@ -309,69 +309,259 @@ class Flat2DTerrainSystem { } if (sprite) { + // ๐ŸŽจ 2.5D DEPTH SORTING - Y position = depth! + // Objects lower on screen appear in front + sprite.setDepth(10 + worldY); this.decorLayer.add(sprite); } } createTree(x, y) { - // ๐ŸŒธ PNG DISABLED - procedural is more reliable! - // if (this.scene.textures.exists('cesnjevo_drevo')) { - // const tree = this.scene.add.image(x, y, 'cesnjevo_drevo'); - // const growthScale = Phaser.Math.FloatBetween(0.3, 0.7); - // tree.setScale(growthScale); - // tree.setOrigin(0.5, 0.9); - // const shadow = this.scene.add.ellipse(x, y + 10, 20 * growthScale, 6, 0x000000, 0.15); - // shadow.setDepth(tree.depth - 1); - // return tree; - // } + // ๐ŸŒณ TREE VARIETY SYSTEM! + const treeTypes = ['cherry', 'oak', 'pine', 'dead', 'apple']; + const randomType = Phaser.Utils.Array.GetRandom(treeTypes); - // PROCEDURAL CHERRY BLOSSOM (RELIABLE!) + switch (randomType) { + case 'oak': return this.createOakTree(x, y); + case 'pine': return this.createPineTree(x, y); + case 'dead': return this.createDeadTree(x, y); + case 'apple': return this.createAppleTree(x, y); + default: return this.createCherryTree(x, y); + } + } + + createCherryTree(x, y) { + // ๐ŸŒธ PNG SPRITE! + if (this.scene.textures.exists('tree_cherry')) { + const tree = this.scene.add.image(x, y, 'tree_cherry'); + const scale = Phaser.Math.FloatBetween(0.4, 0.6); // SMALLER! (was 0.8-1.2) + tree.setScale(scale); + tree.setOrigin(0.5, 0.85); + + // Shadow + const shadow = this.scene.add.ellipse(x, y + 15, 30 * scale, 10, 0x000000, 0.2); + shadow.setDepth(tree.depth - 1); + + return tree; + } + + // FALLBACK: Procedural + return this.createProceduralCherryTree(x, y); + } + + createProceduralCherryTree(x, y) { + // Old procedural code (backup) const graphics = this.scene.add.graphics(); + const growthScale = Phaser.Math.FloatBetween(0.8, 1.4); // BIGGER! - // DROP SHADOW (2D depth!) ๐ŸŽจ - graphics.fillStyle(0x000000, 0.15); - graphics.fillEllipse(x + 1, y + 24, 20, 6); + const heightOffset = -20 * growthScale; + const crownSize = 30 * growthScale; // MUCH BIGGER! - // TRUNK - simple rectangle - graphics.fillStyle(0x8B4513); - graphics.fillRect(x - 4, y + 6, 8, 18); + // Shadow (ellipse on ground) + graphics.fillStyle(0x000000, 0.2); + graphics.fillEllipse(x, y + 30, 40 * growthScale, 12); // Bigger shadow - // Trunk outline - graphics.lineStyle(1, 0x654321); - graphics.strokeRect(x - 4, y + 6, 8, 18); + // Trunk (with shading for volume) + const trunkW = 12 * growthScale; // Thicker + const trunkH = 30 * growthScale; // Taller - // CHERRY BLOSSOM CROWN - FLAT 2D TRIANGLE! ๐ŸŒธ - // Base pink triangle + // Dark side (right) + graphics.fillStyle(0x6D3F1A); + graphics.fillRect(x + trunkW / 4, y + 10 + heightOffset, trunkW / 2, trunkH); + + // Light side (left) + graphics.fillStyle(0x8B5A2B); + graphics.fillRect(x - trunkW / 2, y + 10 + heightOffset, trunkW / 2, trunkH); + + // CROWN - Layered circles for 2.5D! + const crownY = y - 10 * growthScale + heightOffset; // Higher crown + + // Dark base (shadow underneath) + graphics.fillStyle(0xE75480); + graphics.fillCircle(x + 4 * growthScale, crownY + 4 * growthScale, crownSize); + + // Main pink crown graphics.fillStyle(0xFF69B4); + graphics.fillCircle(x, crownY, crownSize); + + // Top highlight (light from top-left) + graphics.fillStyle(0xFFB6C1, 0.8); + graphics.fillCircle(x - 6 * growthScale, crownY - 6 * growthScale, crownSize * 0.6); + + // Bright specular spot + graphics.fillStyle(0xFFFFFF, 0.5); + graphics.fillCircle(x - 8 * growthScale, crownY - 8 * growthScale, crownSize * 0.3); + + return graphics; + } + + createOakTree(x, y) { + // ๐ŸŒฒ PNG SPRITE! + if (this.scene.textures.exists('tree_oak')) { + const tree = this.scene.add.image(x, y, 'tree_oak'); + const scale = Phaser.Math.FloatBetween(0.45, 0.65); // SMALLER! + tree.setScale(scale); + tree.setOrigin(0.5, 0.85); + const shadow = this.scene.add.ellipse(x, y + 15, 35 * scale, 12, 0x000000, 0.2); + shadow.setDepth(tree.depth - 1); + return tree; + } + + // FALLBACK: + const graphics = this.scene.add.graphics(); + const growthScale = Phaser.Math.FloatBetween(0.8, 1.4); // BIGGER! + + // Shadow + graphics.fillStyle(0x000000, 0.15); + graphics.fillEllipse(x, y + 24, 25 * growthScale, 8); + + // Thick trunk + graphics.fillStyle(0x654321); + graphics.fillRect(x - 5 * growthScale, y, 10 * growthScale, 24 * growthScale); + + // Large round crown + graphics.fillStyle(0x228B22); // Forest green + graphics.fillCircle(x, y - 10 * growthScale, 18 * growthScale); + + // Darker outline + graphics.lineStyle(2, 0x006400); + graphics.strokeCircle(x, y - 10 * growthScale, 18 * growthScale); + + // Highlight + graphics.fillStyle(0x32CD32, 0.6); + graphics.fillCircle(x - 5 * growthScale, y - 15 * growthScale, 8 * growthScale); + + return graphics; + } + + createPineTree(x, y) { + // ๐ŸŒฒ PNG SPRITE! + if (this.scene.textures.exists('tree_pine')) { + const tree = this.scene.add.image(x, y, 'tree_pine'); + const scale = Phaser.Math.FloatBetween(0.45, 0.7); // SMALLER! + tree.setScale(scale); + tree.setOrigin(0.5, 0.9); // Taller + const shadow = this.scene.add.ellipse(x, y + 20, 30 * scale, 10, 0x000000, 0.2); + shadow.setDepth(tree.depth - 1); + return tree; + } + + // FALLBACK: + const graphics = this.scene.add.graphics(); + const growthScale = Phaser.Math.FloatBetween(0.8, 1.5); // BIGGER (Pine taller) + + // Shadow + graphics.fillStyle(0x000000, 0.15); + graphics.fillEllipse(x, y + 20, 15 * growthScale, 6); + + // Trunk + graphics.fillStyle(0x8B4513); + graphics.fillRect(x - 3 * growthScale, y + 5, 6 * growthScale, 15 * growthScale); + + // Stacked triangles (pine shape) + graphics.fillStyle(0x2F4F2F); // Dark green + + // Bottom tier graphics.fillTriangle( - x, y - 18, // Top point - x - 16, y + 8, // Bottom left - x + 16, y + 8 // Bottom right + x, y - 5 * growthScale, + x - 14 * growthScale, y + 10, + x + 14 * growthScale, y + 10 ); - // Dark outline (2D cartoon style!) - graphics.lineStyle(2, 0xDB7093, 1.0); - graphics.strokeTriangle( - x, y - 18, - x - 16, y + 8, - x + 16, y + 8 + // Middle tier + graphics.fillTriangle( + x, y - 15 * growthScale, + x - 10 * growthScale, y, + x + 10 * growthScale, y ); - // Inner lighter triangle (highlight) - graphics.fillStyle(0xFFB6C1); + // Top tier graphics.fillTriangle( - x, y - 14, - x - 10, y + 4, - x + 10, y + 4 + x, y - 25 * growthScale, + x - 7 * growthScale, y - 10 * growthScale, + x + 7 * growthScale, y - 10 * growthScale ); - // Top highlight (blossom peak!) - graphics.fillStyle(0xFFFFFF, 0.7); - graphics.fillTriangle( - x, y - 14, - x - 6, y - 4, - x + 6, y - 4 - ); + return graphics; + } + + createDeadTree(x, y) { + // ๐Ÿ’€ PNG SPRITE! + if (this.scene.textures.exists('tree_dead')) { + const tree = this.scene.add.image(x, y, 'tree_dead'); + const scale = Phaser.Math.FloatBetween(0.35, 0.55); // SMALLER! + tree.setScale(scale); + tree.setOrigin(0.5, 0.85); + const shadow = this.scene.add.ellipse(x, y + 18, 28 * scale, 10, 0x000000, 0.3); + shadow.setDepth(tree.depth - 1); + return tree; + } + + // FALLBACK: + const graphics = this.scene.add.graphics(); + const growthScale = Phaser.Math.FloatBetween(0.7, 1.2); // BIGGER! + + // Shadow + graphics.fillStyle(0x000000, 0.2); + graphics.fillEllipse(x, y + 20, 18 * growthScale, 6); + + // Dark trunk + graphics.fillStyle(0x3D3D3D); + graphics.fillRect(x - 4 * growthScale, y, 8 * growthScale, 22 * growthScale); + + // Branches (bare) + graphics.lineStyle(3 * growthScale, 0x2D2D2D); + graphics.beginPath(); + graphics.moveTo(x, y - 5 * growthScale); + graphics.lineTo(x - 10 * growthScale, y - 15 * growthScale); + graphics.moveTo(x, y - 8 * growthScale); + graphics.lineTo(x + 12 * growthScale, y - 12 * growthScale); + graphics.strokePath(); + + return graphics; + } + + createAppleTree(x, y) { + // ๐ŸŽ PNG SPRITE! + if (this.scene.textures.exists('tree_apple')) { + const tree = this.scene.add.image(x, y, 'tree_apple'); + const scale = Phaser.Math.FloatBetween(0.4, 0.6); // SMALLER! + tree.setScale(scale); + tree.setOrigin(0.5, 0.85); + const shadow = this.scene.add.ellipse(x, y + 16, 32 * scale, 11, 0x000000, 0.2); + shadow.setDepth(tree.depth - 1); + return tree; + } + + // FALLBACK: + const graphics = this.scene.add.graphics(); + const growthScale = Phaser.Math.FloatBetween(0.8, 1.3); // BIGGER! + + // Shadow + graphics.fillStyle(0x000000, 0.15); + graphics.fillEllipse(x, y + 22, 22 * growthScale, 7); + + // Trunk + graphics.fillStyle(0x8B4513); + graphics.fillRect(x - 4 * growthScale, y + 2, 8 * growthScale, 20 * growthScale); + + // Green crown + graphics.fillStyle(0x3CB371); // Medium sea green + graphics.fillCircle(x, y - 8 * growthScale, 16 * growthScale); + + // Apples (red circles) + graphics.fillStyle(0xFF0000); + const applePositions = [ + { x: -8, y: -12 }, { x: 5, y: -10 }, { x: -3, y: -5 }, + { x: 8, y: -8 }, { x: 0, y: -15 } + ]; + applePositions.forEach(pos => { + graphics.fillCircle( + x + pos.x * growthScale, + y + pos.y * growthScale, + 3 * growthScale + ); + }); return graphics; }