Files
novafarma/index.html
NovaFarma Dev 9eb57ed117 FAZA 17: 2.5D Minecraft-Style Terrain + Y-Layer Stacking + Custom Sprites
COMPLETED FEATURES:

 Custom Sprite Integration:
- Player, Zombie, Merchant sprites (0.2 scale)
- 11 custom sprites + 5 asset packs loaded
- Auto-transparency processing (white/brown removal)
- Gravestone system with atlas extraction

 2.5D Minecraft-Style Terrain:
- Volumetric blocks with 25px thickness
- Strong left/right side shading (30%/50% darker)
- Minecraft-style texture patterns (grass, dirt, stone)
- Crisp black outlines for definition

 Y-Layer Stacking System:
- GRASS_FULL: All green (elevation > 0.7)
- GRASS_TOP: Green top + brown sides (elevation 0.4-0.7)
- DIRT: All brown (elevation < 0.4)
- Dynamic terrain depth based on height

 Floating Island World Edge:
- Stone cliff walls at map borders
- 2-tile transition zone
- Elevation flattening for cliff drop-off effect
- 100x100 world with defined boundaries

 Performance & Polish:
- Canvas renderer for pixel-perfect sharpness
- CSS image-rendering: crisp-edges
- willReadFrequently optimization
- No Canvas2D warnings

 Technical:
- 3D volumetric trees and rocks
- Hybrid rendering (2.5D terrain + 2D characters)
- Procedural texture generation
- Y-layer aware terrain type selection
2025-12-07 01:44:16 +01:00

98 lines
3.3 KiB
HTML

<!DOCTYPE html>
<html lang="sl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Suppress Electron Security Warning for Dev -->
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: data:; object-src 'self';">
<title>NovaFarma - 2.5D Survival Game</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #000;
overflow: hidden;
font-family: 'Courier New', monospace;
}
#game-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-crisp-edges;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
canvas {
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-crisp-edges;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
</style>
</head>
<body>
<div id="game-container"></div>
<div id="debug-console"
style="position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.8); color: red; pointer-events: none; z-index: 9999; white-space: pre-wrap;">
</div>
<script>
window.onerror = function (msg, url, lineNo, columnNo, error) {
const container = document.getElementById('debug-console');
if (container) {
container.innerHTML += `ERROR: ${msg}\nAt: ${url}:${lineNo}:${columnNo}\n\n`;
}
console.error('Global Error:', msg, url, lineNo, error);
return false;
};
</script>
<!-- Phaser 3 -->
<script src="node_modules/phaser/dist/phaser.js"></script>
<!-- Utilities -->
<script src="src/utils/PerlinNoise.js"></script>
<script src="src/utils/IsometricUtils.js"></script>
<script src="src/utils/TextureGenerator.js"></script>
<script src="src/utils/ObjectPool.js"></script>
<!-- Systems -->
<script src="src/systems/TerrainSystem.js"></script>
<script src="src/systems/SaveSystem.js"></script>
<script src="src/systems/TimeSystem.js"></script>
<script src="src/systems/StatsSystem.js"></script>
<script src="src/systems/InventorySystem.js"></script>
<script src="src/systems/InteractionSystem.js"></script>
<script src="src/systems/FarmingSystem.js"></script>
<script src="src/systems/BuildingSystem.js"></script>
<script src="src/systems/WeatherSystem.js"></script>
<script src="src/systems/DayNightSystem.js"></script>
<script src="src/systems/SoundManager.js"></script>
<script src="src/systems/ParallaxSystem.js"></script>
<!-- Entities -->
<script src="src/entities/Player.js"></script>
<script src="src/entities/NPC.js"></script>
<!-- Game Files -->
<script src="src/scenes/BootScene.js"></script>
<script src="src/scenes/PreloadScene.js"></script>
<script src="src/scenes/UIScene.js"></script>
<script src="src/scenes/StoryScene.js"></script>
<script src="src/scenes/GameScene.js"></script>
<script src="src/game.js"></script>
</body>
</html>