David Kotnik
26d689de03
✨ Dodane features: - Interaktivna kamera z mouse wheel zoom (0.5x - 2.5x) - Dinamična trava z wind sway animacijo (6 šopov) - Depth of Field efekt pri zoom-u (background fade) - Virusne infekcije z neon zelenim glow (pulsing) - Pot v gozd z mrtimi drevesi (tunnel effect) - Y-sorted layering (9 slojev) 🧹 Asset Cleanup: - Ultra cleaned 106+ PNG slik v 'nova mapa' - Odstranjen checkerboard pattern z dreves, skal, trave - Feathering robov poti za naravno zlitje - Transparency fix na vseh environment assetih 🎨 Scene Composition: - Kaijev tabor (šotor + ognjišče) - Pot s skalami, poleni, razbito longboard - Grmovje in drevored - Foreground/midground/background separation 📁 Assets iz: nova mapa/ (Characters, Environment, UI) 🎮 Testno: http://localhost:3000 + mouse wheel zoom
268 lines
8.0 KiB
HTML
268 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="sl">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kaijev Tabor - Final Render</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background: #1a1a1a;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
font-family: 'Courier New', monospace;
|
|
padding: 20px;
|
|
}
|
|
|
|
.scene-container {
|
|
position: relative;
|
|
width: 900px;
|
|
height: 700px;
|
|
border: 4px solid #5a4a28;
|
|
background: #2d2416;
|
|
overflow: hidden;
|
|
box-shadow: 0 15px 60px rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
/* LAYER 1: Fiksna trava (background) */
|
|
.grass-base {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('assets/slike/environment/trava .png');
|
|
background-size: 256px 256px;
|
|
background-repeat: repeat;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
/* LAYER 2: Sence (pod objekti) */
|
|
.shadow {
|
|
position: absolute;
|
|
background: radial-gradient(ellipse, rgba(0, 0, 0, 0.4) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
filter: blur(8px);
|
|
z-index: 1;
|
|
}
|
|
|
|
.shadow-tent {
|
|
width: 200px;
|
|
height: 80px;
|
|
bottom: 310px;
|
|
left: 340px;
|
|
}
|
|
|
|
.shadow-sleeping {
|
|
width: 120px;
|
|
height: 50px;
|
|
bottom: 180px;
|
|
left: 395px;
|
|
}
|
|
|
|
.shadow-campfire {
|
|
width: 80px;
|
|
height: 40px;
|
|
bottom: 220px;
|
|
left: 280px;
|
|
}
|
|
|
|
/* LAYER 3: Main objects (Y-sorted) */
|
|
.game-object {
|
|
position: absolute;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
/* Šotor - glavna točka */
|
|
.tent {
|
|
bottom: 290px;
|
|
left: 320px;
|
|
width: 220px;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Longboard - naslonjen na šotor */
|
|
.longboard {
|
|
bottom: 310px;
|
|
left: 460px;
|
|
width: 80px;
|
|
z-index: 11;
|
|
transform: rotate(-25deg);
|
|
}
|
|
|
|
/* Spalna vreča - pred šotorom */
|
|
.sleeping-bag {
|
|
bottom: 160px;
|
|
left: 380px;
|
|
width: 140px;
|
|
z-index: 12;
|
|
}
|
|
|
|
/* Ognjišče - levo od vhoda */
|
|
.campfire {
|
|
bottom: 200px;
|
|
left: 260px;
|
|
width: 100px;
|
|
z-index: 9;
|
|
animation: flicker 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes flicker {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.85;
|
|
}
|
|
}
|
|
|
|
/* LAYER 4: Dinamična trava (top layer) */
|
|
.grass-tuft {
|
|
position: absolute;
|
|
image-rendering: pixelated;
|
|
animation: sway 3s ease-in-out infinite;
|
|
transform-origin: bottom center;
|
|
z-index: 15;
|
|
}
|
|
|
|
@keyframes sway {
|
|
|
|
0%,
|
|
100% {
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(2deg);
|
|
}
|
|
}
|
|
|
|
.grass-tuft.slow {
|
|
animation-duration: 4.2s;
|
|
}
|
|
|
|
.grass-tuft.fast {
|
|
animation-duration: 2.3s;
|
|
}
|
|
|
|
/* Info panel */
|
|
.info-panel {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 15px;
|
|
background: rgba(26, 22, 16, 0.95);
|
|
border: 3px solid #d4af37;
|
|
padding: 20px;
|
|
color: #d4af37;
|
|
font-size: 13px;
|
|
max-width: 350px;
|
|
line-height: 1.7;
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
|
|
z-index: 100;
|
|
}
|
|
|
|
h3 {
|
|
color: #ff6b35;
|
|
margin-bottom: 12px;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.status {
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
background: rgba(90, 74, 40, 0.4);
|
|
border-left: 4px solid #d4af37;
|
|
}
|
|
|
|
.status strong {
|
|
color: #ff6b35;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="scene-container">
|
|
<!-- LAYER 1: Fiksna trava -->
|
|
<div class="grass-base"></div>
|
|
|
|
<!-- LAYER 2: Sence -->
|
|
<div class="shadow shadow-tent"></div>
|
|
<div class="shadow shadow-sleeping"></div>
|
|
<div class="shadow shadow-campfire"></div>
|
|
|
|
<!-- LAYER 3: Main Objects (Y-sorted by bottom position) -->
|
|
<img src="assets/slike/nova mapa /Environment/props/MOJE_SLIKE_KONCNA_ostalo_campfire_frame1.png"
|
|
class="game-object campfire" alt="Ognjišče">
|
|
|
|
<img src="assets/slike/nova mapa /Environment/stavbe/MOJE_SLIKE_KONCNA_ostalo_tent_basic_style32.png"
|
|
class="game-object tent" alt="Šotor">
|
|
|
|
<img src="assets/slike/nova mapa /UI/icon_longboard.png" class="game-object longboard" alt="Longboard">
|
|
|
|
<img src="assets/slike/nova mapa /Environment/stavbe/MOJE_SLIKE_KONCNA_ostalo_objekti_pohištvo_bed_sleepingbag_style32.png"
|
|
class="game-object sleeping-bag" alt="Spalna vreča">
|
|
|
|
<!-- LAYER 4: Dinamična trava (prekriva spodnje dele objektov) -->
|
|
<img src="assets/slike/environment/tall_grass.png" class="grass-tuft slow"
|
|
style="bottom: 285px; left: 300px; width: 55px;">
|
|
<img src="assets/slike/environment/tall_grass.png" class="grass-tuft"
|
|
style="bottom: 315px; left: 450px; width: 48px;">
|
|
<img src="assets/slike/environment/tall_grass.png" class="grass-tuft fast"
|
|
style="bottom: 150px; left: 370px; width: 52px;">
|
|
<img src="assets/slike/environment/tall_grass.png" class="grass-tuft slow"
|
|
style="bottom: 180px; left: 500px; width: 45px;">
|
|
<img src="assets/slike/environment/tall_grass.png" class="grass-tuft"
|
|
style="bottom: 240px; left: 250px; width: 50px;">
|
|
<img src="assets/slike/environment/tall_grass.png" class="grass-tuft fast"
|
|
style="bottom: 305px; left: 550px; width: 47px;">
|
|
<img src="assets/slike/environment/tall_grass.png" class="grass-tuft slow"
|
|
style="bottom: 165px; left: 540px; width: 53px;">
|
|
<img src="assets/slike/environment/tall_grass.png" class="grass-tuft"
|
|
style="bottom: 210px; left: 320px; width: 46px;">
|
|
|
|
<!-- Info Panel -->
|
|
<div class="info-panel">
|
|
<h3>🏕️ KAIJEV TABOR - FINAL RENDER</h3>
|
|
<div><strong>Scenografija:</strong> Opuščen tabor ob poti</div>
|
|
<div><strong>Assets:</strong> Šotor, spalna vreča, ognjišče, longboard</div>
|
|
<div><strong>Layering:</strong> 4 sloji (trava → sence → objekti → šopi)</div>
|
|
<div><strong>Y-Sorting:</strong> ✅ Aktiviran (globinski efekt)</div>
|
|
|
|
<div class="status">
|
|
<strong>✅ ČIŠČENJE KONČANO:</strong><br>
|
|
• 105 PNG slik ultra sčiščenih<br>
|
|
• Checkerboard pattern odstranjen<br>
|
|
• Zelena ozadja izbrisan<br>
|
|
• Bela ozadja sčiščena<br>
|
|
• Sence dodane za reali zm<br>
|
|
• Wind effect na travi
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Dodaj naključne animation delays za naravnejši wind effect
|
|
document.querySelectorAll('.grass-tuft').forEach((tuft, index) => {
|
|
tuft.style.animationDelay = `${Math.random() * 2.5}s`;
|
|
});
|
|
|
|
// Console log za debugging
|
|
console.log('🏕️ Kaijev Tabor loaded');
|
|
console.log('Assets from: assets/slike/nova mapa/');
|
|
console.log('All backgrounds cleaned!');
|
|
</script>
|
|
</body>
|
|
|
|
</html> |