- 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!
182 lines
4.5 KiB
Markdown
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!
|