Files
novafarma/docs/TILED_TESTIRANJE_PLAN.md
NovaFarma Dev 7eb1a5874a Avtomatska obdelava tileset slik - 3877 ločenih objektov in TSX datotek
- Ustvarjen skript za ločevanje objektov iz tileset slik (obdelaj_tilesete.py)
- Odstranjevanje zelenega ozadja (#00FF00) iz vseh slik
- Ločevanje posameznih objektov iz multi-object slik
- Pomanjševanje na 50% originalne velikosti
- Obdelanih 234 slik  3877 ločenih objektov

- Ustvarjen skript za generiranje TSX datotek (generiraj_tsx_datoteke.py)
- Avtomatsko generiranje 3877 TSX datotek za Tiled Map Editor
- Pravilna XML struktura za vsak tileset
- Avtomatska detekcija velikosti objektov
- Relativne poti do slik

Rezultati:
- assets/narezano_loceno/ - 3877 ločenih PNG objektov
- assets/tilesets_auto/ - 3877 TSX datotek za Tiled
- Dokumentacija in navodila za uporabo

Vse pripravljeno za uporabo v Tiled Map Editor!
2025-12-21 15:36:42 +01:00

182 lines
4.5 KiB
Markdown

# 🗺️ TESTIRANJE TILED MAPE V IGRI
**Cilj:** Naložiti `micro_farm_128x128.tmx` mapo v Phaser igro za testiranje
---
## 📋 KORAKI:
### 1. **EXPORT MAPE V JSON**
Da lahko Phaser naloži mapo, moraš:
```
Tiled → File → Open → micro_farm_128x128.tmx
File → Export As... → micro_farm_128x128.json
Lokacija: assets/maps/micro_farm_128x128.json
```
---
### 2. **DODAJ V PRELOAD SCENE**
Uredi `src/scenes/PreloadScene.js`:
```javascript
// Dodaj pod linijo 35 (farm_map):
this.load.tilemapTiledJSON('micro_farm_128x128', 'assets/maps/micro_farm_128x128.json');
```
---
### 3. **MOŽNOST A: Testna Scena (Najhitrejše)**
Ustvari novo sceno `src/scenes/TiledTestScene.js`:
```javascript
class TiledTestScene extends Phaser.Scene {
constructor() {
super({ key: 'TiledTestScene' });
}
create() {
console.log('🗺️ Tiled Test Scene: Loading micro farm...');
// Set background color
this.cameras.main.setBackgroundColor('#87CEEB');
// Load the tilemap
const map = this.make.tilemap({ key: 'micro_farm_128x128' });
// Add tilesets (imena morajo biti ENAKA kot v .tmx!)
const grassTileset = map.addTilesetImage('grass', 'tileset_grass');
const dirtTileset = map.addTilesetImage('dirt', 'tileset_dirt');
const waterTileset = map.addTilesetImage('water', 'tileset_water');
// Dodaj ostale tilesets po potrebi...
// Create tile layers
const groundLayer = map.createLayer('Ground', [grassTileset, dirtTileset, waterTileset], 0, 0);
// Dodaj ostale layerje...
// const fenceLayer = map.createLayer('Fences', [...tilesets], 0, 0);
// Set camera bounds
this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
this.cameras.main.setZoom(0.5); // Zoom out za 128x128
// Camera controls
const cursors = this.input.keyboard.createCursorKeys();
this.cursors = cursors;
console.log('✅ Micro Farm loaded!');
}
update() {
// Camera movement
const speed = 8;
if (this.cursors.left.isDown) {
this.cameras.main.scrollX -= speed;
} else if (this.cursors.right.isDown) {
this.cameras.main.scrollX += speed;
}
if (this.cursors.up.isDown) {
this.cameras.main.scrollY -= speed;
} else if (this.cursors.down.isDown) {
this.cameras.main.scrollY += speed;
}
}
}
```
Dodaj v `src/game.js`:
```javascript
const config = {
// ...
scene: [
PreloadScene,
TiledTestScene, // ← DODAJ TO
StoryScene,
GameScene,
UIScene
]
};
```
Začasno spremeni `PreloadScene.create()`:
```javascript
create() {
console.log('✅ PreloadScene: Assets loaded!');
window.gameState.currentScene = 'PreloadScene';
// ZAČASNO: Gre naravnost v TiledTestScene
this.time.delayedCall(500, () => {
console.log('🗺️ Starting TiledTestScene...');
this.scene.start('TiledTestScene'); // ← SPREMENI TO
});
}
```
---
### 4. **MOŽNOST B: Debug Način v GameScene**
Dodaj gumb za toggle v `GameScene.create()`:
```javascript
// Debug: Load Tiled map instead of procedural terrain
this.input.keyboard.on('keydown-M', () => {
this.loadTiledMap();
});
```
Dodaj metodo v `GameScene`:
```javascript
loadTiledMap() {
console.log('🗺️ Loading Tiled Map: micro_farm_128x128...');
// Hide procedural terrain
if (this.terrainSystem && this.terrainSystem.container) {
this.terrainSystem.container.setVisible(false);
}
// Load tilemap
const map = this.make.tilemap({ key: 'micro_farm_128x128' });
// Add tilesets
const grassTileset = map.addTilesetImage('grass', 'tileset_grass');
// Create layers
const groundLayer = map.createLayer('Ground', grassTileset, 0, 0);
// Set camera
this.cameras.main.setZoom(0.5);
console.log('✅ Tiled map loaded! Press M again to toggle.');
}
```
---
## 🎯 **PRIPOROČILO:**
**Uporabi MOŽNOST A** (Testna scena) - najhitrejše in najčistejše za testiranje!
1. Exportaj JSON iz Tiled
2. Ustvari `TiledTestScene.js`
3. Dodaj v `game.js`
4. Zaženi igro
Takrat boš videl samo svojo micro farm mapo brez ostalih sistemov! 🎉
---
## ✅ **KO DELUJE:**
Ko vidiš mapo:
- Premakni kamero s puščicami
- Preveri, da se prikazujejo vsi tilesets
- Preveri layerje (ograda, tla, player, etc.)
Potem lahko nazaj preklopiš na GameScene ali integriraš Tiled v glavni game!