🎮 Dark-Chibi Noir Demo Scene v1.0 - Kaijev Svet
✨ Glavne Features: - Main Demo Scene (main_demo_scene.html) s Kaijem, campfire, trees, tent - Kai Camp Showcase (kai_camp_showcase.html) - isoliran showcase - Asset cleanup & transparency fix za vse PNG assete - Nova struktura: 'assets/slike/nova mapa faza 0-1/' - Glavne reference v 'assets/slike/glavna_referenca/' 🔧 Technical: - Python scripts: complete_visual_cleanup.py, remove_green_bg.py - Transparency fix za vse karakterje, trees, props (brez zelenih ozadij) - Dokumentacija: TENT_FOUND_REPORT, TRANSPARENCY_FIX_REPORT, VISUAL_CLEANUP_REPORT 🎨 Assets: - Kai z dreadi (standalone sprite) - Animated campfire (frame1 + frame2) - Dead trees (10 variants) - Tent, grass texture, wood logs - Full Dark-Chibi Noir aesthetic 🚀 Demo Ready: HTML5 Canvas 2D Scene with WASD movement controls
This commit is contained in:
454
kai_camp_showcase.html
Normal file
454
kai_camp_showcase.html
Normal file
@@ -0,0 +1,454 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kaijev Tabor - Dark Chibi Noir</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 100%);
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #e0e0e0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-bottom: 3px solid #ff6b6b;
|
||||
box-shadow: 0 4px 20px rgba(255, 107, 107, 0.3);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
color: #ff6b6b;
|
||||
text-shadow: 0 0 10px rgba(255, 107, 107, 0.8),
|
||||
0 0 20px rgba(255, 107, 107, 0.5);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.2em;
|
||||
color: #a0a0a0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 40px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.info-panel {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border: 2px solid #ff6b6b;
|
||||
border-radius: 10px;
|
||||
padding: 25px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 0 30px rgba(255, 107, 107, 0.2);
|
||||
}
|
||||
|
||||
.info-panel h2 {
|
||||
color: #ff6b6b;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
border-left: 4px solid #ff6b6b;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #a0a0a0;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
color: #ff6b6b;
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.scene-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
|
||||
border: 3px solid #ff6b6b;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 50px rgba(255, 107, 107, 0.3);
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.scene-layer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.asset {
|
||||
position: absolute;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: crisp-edges;
|
||||
transition: transform 0.3s ease, filter 0.3s ease;
|
||||
}
|
||||
|
||||
.asset:hover {
|
||||
transform: scale(1.05);
|
||||
filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.6));
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
|
||||
.asset-info {
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
color: #ff6b6b;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.asset:hover .asset-info {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.campfire {
|
||||
animation: flicker 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes flicker {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border: 2px solid #444;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.gallery-item:hover {
|
||||
border-color: #ff6b6b;
|
||||
box-shadow: 0 0 20px rgba(255, 107, 107, 0.4);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.gallery-item img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
background: repeating-conic-gradient(#2a2a2a 0% 25%, #1a1a1a 0% 50%) 50% / 20px 20px;
|
||||
}
|
||||
|
||||
.gallery-item h3 {
|
||||
color: #ff6b6b;
|
||||
margin-top: 10px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.gallery-item p {
|
||||
color: #a0a0a0;
|
||||
font-size: 0.9em;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
border: 2px solid #ff6b6b;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 0 30px rgba(255, 107, 107, 0.4);
|
||||
}
|
||||
|
||||
.controls button {
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
margin: 5px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.9em;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.controls button:hover {
|
||||
background: #ff8787;
|
||||
box-shadow: 0 0 15px rgba(255, 107, 107, 0.6);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>🏕️ KAIJEV TABOR</h1>
|
||||
<p class="subtitle">Dark-Chibi Noir Style | Mrtva Dolina</p>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="info-panel">
|
||||
<h2>📊 Cleanup Report</h2>
|
||||
<div class="stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">JPG → PNG Converted</div>
|
||||
<div class="stat-value">34</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">JPG Files Deleted</div>
|
||||
<div class="stat-value">34</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">PNG Files Cleaned</div>
|
||||
<div class="stat-value">1,907</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">Status</div>
|
||||
<div class="stat-value">✅ COMPLETE</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-panel">
|
||||
<h2>🌲 Tabor Scene - Live View</h2>
|
||||
<p style="color: #a0a0a0; margin-bottom: 15px;">
|
||||
Vsi asseti so zdaj v PNG formatu s prosojnim ozadjem.
|
||||
Drevesa so 512px, camp elementi 256px.
|
||||
</p>
|
||||
|
||||
<div class="scene-container" id="campScene">
|
||||
<!-- Assets se naložijo z JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-panel">
|
||||
<h2>🎨 Asset Gallery</h2>
|
||||
<div class="gallery" id="assetGallery">
|
||||
<!-- Gallery items se naložijo z JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button onclick="toggleAnimation()">🔥 Toggle Fire</button>
|
||||
<button onclick="resetScene()">🔄 Reset</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Asset paths
|
||||
const trees = [
|
||||
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed.png',
|
||||
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed-1.png',
|
||||
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed-2.png',
|
||||
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed-3.png',
|
||||
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed-4.png',
|
||||
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed-5.png',
|
||||
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed-6.png',
|
||||
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed-7.png',
|
||||
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed-8.png',
|
||||
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed Kopie.png'
|
||||
];
|
||||
|
||||
const campfire = [
|
||||
'assets/slike/nova mapa faza 0-1/Environment/props/MOJE_SLIKE_KONCNA_ostalo_campfire_frame1.png',
|
||||
'assets/slike/nova mapa faza 0-1/Environment/props/MOJE_SLIKE_KONCNA_ostalo_campfire_frame2.png'
|
||||
];
|
||||
|
||||
const otherProps = [
|
||||
'assets/slike/nova mapa faza 0-1/Environment/props/wood_log.png',
|
||||
'assets/slike/nova mapa faza 0-1/Environment/props/MOJE_SLIKE_KONCNA_predmeti_oprema_orodja_tool_bucket_old.png',
|
||||
'assets/slike/nova mapa faza 0-1/Environment/stavbe/MOJE_SLIKE_KONCNA_ostalo_tent_basic_style32.png'
|
||||
];
|
||||
|
||||
// Build scene
|
||||
const scene = document.getElementById('campScene');
|
||||
|
||||
// Add trees (background layer)
|
||||
const treePositions = [
|
||||
{ x: 100, y: 100, size: 250 },
|
||||
{ x: 850, y: 80, size: 280 },
|
||||
{ x: 1100, y: 150, size: 220 },
|
||||
{ x: 200, y: 500, size: 260 },
|
||||
{ x: 1000, y: 480, size: 240 },
|
||||
{ x: 50, y: 300, size: 230 },
|
||||
{ x: 1200, y: 350, size: 270 },
|
||||
{ x: 400, y: 50, size: 200 },
|
||||
{ x: 700, y: 550, size: 250 },
|
||||
{ x: 600, y: 200, size: 210 }
|
||||
];
|
||||
|
||||
trees.forEach((treePath, index) => {
|
||||
const pos = treePositions[index];
|
||||
const treeEl = document.createElement('div');
|
||||
treeEl.className = 'asset tree';
|
||||
treeEl.style.left = pos.x + 'px';
|
||||
treeEl.style.top = pos.y + 'px';
|
||||
treeEl.style.zIndex = Math.floor(pos.y);
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.src = treePath;
|
||||
img.style.width = pos.size + 'px';
|
||||
img.style.height = 'auto';
|
||||
|
||||
const info = document.createElement('div');
|
||||
info.className = 'asset-info';
|
||||
info.textContent = `Dead Tree ${index + 1} (512px)`;
|
||||
|
||||
treeEl.appendChild(img);
|
||||
treeEl.appendChild(info);
|
||||
scene.appendChild(treeEl);
|
||||
});
|
||||
|
||||
// Add TENT (šotor) first
|
||||
const tentEl = document.createElement('div');
|
||||
tentEl.className = 'asset';
|
||||
tentEl.style.left = '450px';
|
||||
tentEl.style.top = '320px';
|
||||
tentEl.style.zIndex = '320';
|
||||
|
||||
const tentImg = document.createElement('img');
|
||||
tentImg.src = otherProps[2]; // tent
|
||||
tentImg.style.width = '200px';
|
||||
tentImg.style.height = 'auto';
|
||||
|
||||
const tentInfo = document.createElement('div');
|
||||
tentInfo.className = 'asset-info';
|
||||
tentInfo.textContent = '⛺ Šotor / Tent (512px PNG)';
|
||||
|
||||
tentEl.appendChild(tentImg);
|
||||
tentEl.appendChild(tentInfo);
|
||||
scene.appendChild(tentEl);
|
||||
|
||||
// Add campfire (center, animated)
|
||||
const campfireEl = document.createElement('div');
|
||||
campfireEl.className = 'asset campfire';
|
||||
campfireEl.style.left = '600px';
|
||||
campfireEl.style.top = '400px';
|
||||
campfireEl.style.zIndex = '400';
|
||||
campfireEl.id = 'campfireElement';
|
||||
|
||||
const campImg = document.createElement('img');
|
||||
campImg.src = campfire[0];
|
||||
campImg.style.width = '150px';
|
||||
campImg.style.height = 'auto';
|
||||
campImg.id = 'campfireImg';
|
||||
|
||||
const campInfo = document.createElement('div');
|
||||
campInfo.className = 'asset-info';
|
||||
campInfo.textContent = '🔥 Campfire (256px, Animated)';
|
||||
|
||||
campfireEl.appendChild(campImg);
|
||||
campfireEl.appendChild(campInfo);
|
||||
scene.appendChild(campfireEl);
|
||||
|
||||
// Campfire animation
|
||||
let campfireFrame = 0;
|
||||
let animationActive = true;
|
||||
|
||||
setInterval(() => {
|
||||
if (animationActive) {
|
||||
campfireFrame = (campfireFrame + 1) % 2;
|
||||
document.getElementById('campfireImg').src = campfire[campfireFrame];
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// Add props
|
||||
const logEl = document.createElement('div');
|
||||
logEl.className = 'asset';
|
||||
logEl.style.left = '500px';
|
||||
logEl.style.top = '500px';
|
||||
logEl.style.zIndex = '500';
|
||||
|
||||
const logImg = document.createElement('img');
|
||||
logImg.src = otherProps[0];
|
||||
logImg.style.width = '120px';
|
||||
|
||||
const logInfo = document.createElement('div');
|
||||
logInfo.className = 'asset-info';
|
||||
logInfo.textContent = '🪵 Wood Log (256px)';
|
||||
|
||||
logEl.appendChild(logImg);
|
||||
logEl.appendChild(logInfo);
|
||||
scene.appendChild(logEl);
|
||||
|
||||
// Gallery
|
||||
const gallery = document.getElementById('assetGallery');
|
||||
|
||||
const allAssets = [
|
||||
...trees.map((path, i) => ({ path, name: `Dead Tree ${i + 1}`, type: '512px PNG' })),
|
||||
...campfire.map((path, i) => ({ path, name: `Campfire Frame ${i + 1}`, type: '256px PNG (Animated)' })),
|
||||
{ path: otherProps[2], name: 'Šotor / Tent', type: '512px PNG' },
|
||||
{ path: otherProps[0], name: 'Wood Log', type: '256px PNG' },
|
||||
{ path: otherProps[1], name: 'Bucket', type: '256px PNG' }
|
||||
];
|
||||
|
||||
allAssets.forEach(asset => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'gallery-item';
|
||||
item.innerHTML = `
|
||||
<img src="${asset.path}" alt="${asset.name}">
|
||||
<h3>${asset.name}</h3>
|
||||
<p>${asset.type} | Transparent BG</p>
|
||||
`;
|
||||
gallery.appendChild(item);
|
||||
});
|
||||
|
||||
// Controls
|
||||
function toggleAnimation() {
|
||||
animationActive = !animationActive;
|
||||
}
|
||||
|
||||
function resetScene() {
|
||||
location.reload();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user