308 lines
7.4 KiB
Markdown
308 lines
7.4 KiB
Markdown
# 🎮 DEMO INTEGRATION GUIDE
|
|
**Step-by-step za playable demo**
|
|
**Datum**: 2026-01-04 21:55
|
|
|
|
---
|
|
|
|
## ✅ ASSETS READY - KAJ ZDAJ?
|
|
|
|
Demo ima vse assets (444 total).
|
|
Zdaj jih moramo integrirati v game!
|
|
|
|
---
|
|
|
|
## 📋 INTEGRATION STEPS:
|
|
|
|
### **STEP 1: Verify Asset Manifest** ✅
|
|
```bash
|
|
python3 scripts/generate_asset_manifest.py
|
|
```
|
|
**Result**: `tools/asset_manifest.json` updated!
|
|
|
|
---
|
|
|
|
### **STEP 2: Load Assets v Game Scene**
|
|
|
|
Odpri: `src/scenes/GameScene.js`
|
|
|
|
V `preload()` metodi dodaj:
|
|
```javascript
|
|
preload() {
|
|
// UI Assets
|
|
this.load.image('health_bar_frame', 'assets/slike 🟢/vmesnik/vrstice/vmesnik_vrstice_health_bar_frame_style32.png');
|
|
this.load.image('health_bar_fill', 'assets/slike 🟢/vmesnik/vrstice/vmesnik_vrstice_health_bar_fill_style32.png');
|
|
this.load.image('energy_bar_fill', 'assets/slike 🟢/vmesnik/vrstice/vmesnik_vrstice_energy_bar_fill_style32.png');
|
|
|
|
this.load.image('dialogue_box', 'assets/slike 🟢/vmesnik/okna/vmesnik_okna_dialogue_box_style32.png');
|
|
this.load.image('panel_window', 'assets/slike 🟢/vmesnik/okna/vmesnik_okna_panel_window_style32.png');
|
|
|
|
this.load.image('inventory_slot', 'assets/slike 🟢/ostalo/inventory_slot_style32.png');
|
|
|
|
// Item Icons
|
|
this.load.image('wood_icon', 'assets/slike 🟢/vmesnik/ikone/wood_log_icon_style32.png');
|
|
this.load.image('stone_icon', 'assets/slike 🟢/vmesnik/ikone/stone_icon_style32.png');
|
|
this.load.image('bread_icon', 'assets/slike 🟢/vmesnik/ikone/bread_icon_style32.png');
|
|
this.load.image('coin_icon', 'assets/slike 🟢/vmesnik/ikone/vmesnik_ikone_coin_icon_style32.png');
|
|
|
|
// Buildings
|
|
this.load.image('shack', 'assets/slike 🟢/ostalo/shack_basic_style32.png');
|
|
this.load.image('campfire', 'assets/slike 🟢/ostalo/campfire_basic_style32.png');
|
|
this.load.image('chest', 'assets/slike 🟢/objekti/shranjevanje/objekti_shranjevanje_storage_chest_style32.png');
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
### **STEP 3: Create UI Scene**
|
|
|
|
Kreiraj: `src/scenes/UIScene.js`
|
|
|
|
```javascript
|
|
export default class UIScene extends Phaser.Scene {
|
|
constructor() {
|
|
super({ key: 'UIScene', active: true });
|
|
}
|
|
|
|
create() {
|
|
const { width, height } = this.cameras.main;
|
|
|
|
// Health Bar
|
|
this.healthBarFrame = this.add.image(20, 20, 'health_bar_frame').setOrigin(0, 0);
|
|
this.healthBarFill = this.add.image(22, 22, 'health_bar_fill').setOrigin(0, 0);
|
|
|
|
// Energy Bar (below health)
|
|
this.energyBarFill = this.add.image(22, 52, 'energy_bar_fill').setOrigin(0, 0);
|
|
|
|
// Coin display
|
|
this.coinIcon = this.add.image(20, 100, 'coin_icon').setOrigin(0, 0).setScale(0.5);
|
|
this.coinText = this.add.text(60, 110, '0', {
|
|
fontSize: '24px',
|
|
fill: '#FFD700',
|
|
fontFamily: 'Arial'
|
|
}).setOrigin(0, 0.5);
|
|
|
|
console.log('✅ UI Scene loaded!');
|
|
}
|
|
|
|
updateHealth(current, max) {
|
|
const percentage = current / max;
|
|
this.healthBarFill.setScale(percentage, 1);
|
|
}
|
|
|
|
updateEnergy(current, max) {
|
|
const percentage = current / max;
|
|
this.energyBarFill.setScale(percentage, 1);
|
|
}
|
|
|
|
updateCoins(amount) {
|
|
this.coinText.setText(amount);
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
### **STEP 4: Register UI Scene**
|
|
|
|
Odpri: `src/main.js`
|
|
|
|
Najdi `scene:` array in dodaj:
|
|
```javascript
|
|
import UIScene from './scenes/UIScene.js';
|
|
|
|
const config = {
|
|
// ...
|
|
scene: [
|
|
BootScene,
|
|
GameScene,
|
|
UIScene // ← DODAJ TO!
|
|
]
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
### **STEP 5: Connect Player Stats to UI**
|
|
|
|
Odpri: `src/scenes/GameScene.js`
|
|
|
|
V `create()` dodaj:
|
|
```javascript
|
|
create() {
|
|
// ... existing code ...
|
|
|
|
// Reference to UI scene
|
|
this.uiScene = this.scene.get('UIScene');
|
|
}
|
|
```
|
|
|
|
V `update()` dodaj:
|
|
```javascript
|
|
update(time, delta) {
|
|
// ... existing code ...
|
|
|
|
// Update UI
|
|
if (this.player && this.uiScene) {
|
|
this.uiScene.updateHealth(this.player.health, this.player.maxHealth);
|
|
this.uiScene.updateEnergy(this.player.energy, this.player.maxEnergy);
|
|
this.uiScene.updateCoins(this.player.gold || 0);
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
### **STEP 6: Test Run!**
|
|
|
|
```bash
|
|
# Start game server (če še ni)
|
|
python3 -m http.server 8000
|
|
|
|
# Open browser
|
|
open http://localhost:8000
|
|
```
|
|
|
|
**Expected:**
|
|
- ✅ Health bar visible (top left)
|
|
- ✅ Energy bar visible (below health)
|
|
- ✅ Coin counter visible
|
|
- ✅ Player can move
|
|
- ✅ UI updates with player stats
|
|
|
|
---
|
|
|
|
### **STEP 7: Add Inventory (Optional Enhancement)**
|
|
|
|
Kreiraj: `src/scenes/InventoryScene.js`
|
|
|
|
```javascript
|
|
export default class InventoryScene extends Phaser.Scene {
|
|
constructor() {
|
|
super({ key: 'InventoryScene' });
|
|
this.visible = false;
|
|
}
|
|
|
|
create() {
|
|
const { width, height } = this.cameras.main;
|
|
|
|
// Inventory panel (centered)
|
|
this.panel = this.add.image(width / 2, height / 2, 'panel_window').setVisible(false);
|
|
|
|
// 9 inventory slots (3x3)
|
|
this.slots = [];
|
|
const startX = width / 2 - 96;
|
|
const startY = height / 2 - 96;
|
|
|
|
for (let row = 0; row < 3; row++) {
|
|
for (let col = 0; col < 3; col++) {
|
|
const x = startX + (col * 64);
|
|
const y = startY + (row * 64);
|
|
|
|
const slot = this.add.image(x, y, 'inventory_slot')
|
|
.setVisible(false)
|
|
.setInteractive();
|
|
|
|
this.slots.push(slot);
|
|
}
|
|
}
|
|
|
|
// Toggle with 'I' key
|
|
this.input.keyboard.on('keydown-I', () => {
|
|
this.toggleInventory();
|
|
});
|
|
}
|
|
|
|
toggleInventory() {
|
|
this.visible = !this.visible;
|
|
this.panel.setVisible(this.visible);
|
|
this.slots.forEach(slot => slot.setVisible(this.visible));
|
|
}
|
|
}
|
|
```
|
|
|
|
Dodaj v `main.js`:
|
|
```javascript
|
|
import InventoryScene from './scenes/InventoryScene.js';
|
|
|
|
scene: [
|
|
BootScene,
|
|
GameScene,
|
|
UIScene,
|
|
InventoryScene // ← DODAJ
|
|
]
|
|
```
|
|
|
|
---
|
|
|
|
## 🧪 TESTING CHECKLIST:
|
|
|
|
### **Basic Functionality:**
|
|
- [ ] Game loads without errors
|
|
- [ ] Player character visible
|
|
- [ ] Player can move (WASD/Arrow keys)
|
|
- [ ] Health bar displays
|
|
- [ ] Energy bar displays
|
|
- [ ] Coin counter displays
|
|
|
|
### **UI Functionality:**
|
|
- [ ] Health bar decreases when damaged
|
|
- [ ] Energy bar decreases when running
|
|
- [ ] Coin counter updates when collecting
|
|
- [ ] Inventory opens with 'I' key
|
|
|
|
### **Gameplay:**
|
|
- [ ] Can interact with NPCs
|
|
- [ ] Can plant crops
|
|
- [ ] Can harvest crops
|
|
- [ ] Can build structures
|
|
- [ ] Can save/load game
|
|
|
|
---
|
|
|
|
## 🐛 TROUBLESHOOTING:
|
|
|
|
### **Assets not loading?**
|
|
```bash
|
|
# Check asset paths
|
|
ls -la "assets/slike 🟢/vmesnik/"
|
|
|
|
# Regenerate manifest
|
|
python3 scripts/generate_asset_manifest.py
|
|
```
|
|
|
|
### **UI not showing?**
|
|
- Check browser console (F12)
|
|
- Verify UIScene is in scene array
|
|
- Check asset keys match filenames
|
|
|
|
### **Player stats not updating?**
|
|
- Verify `this.uiScene` reference exists
|
|
- Check `update()` method calls UI updates
|
|
- Ensure player has health/energy properties
|
|
|
|
---
|
|
|
|
## ✅ INTEGRATION COMPLETE WHEN:
|
|
|
|
- [x] All assets loaded
|
|
- [x] UI visible on screen
|
|
- [x] Player stats connected
|
|
- [x] No console errors
|
|
- [x] Gameplay loop works
|
|
|
|
---
|
|
|
|
## 🎮 NEXT STEPS:
|
|
|
|
1. **Test basic demo** (5 min)
|
|
2. **Fix any issues** (10-20 min)
|
|
3. **Add polish** (sound, particles)
|
|
4. **Record demo video** 📹
|
|
5. **Prepare for Kickstarter!** 🚀
|
|
|
|
---
|
|
|
|
**Integration time**: ~1 hour
|
|
**Testing time**: ~30 min
|
|
**Total**: ~1.5 hours do playable demo! 🎉
|