- 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!
4.5 KiB
4.5 KiB
🗺️ 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:
// 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:
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:
const config = {
// ...
scene: [
PreloadScene,
TiledTestScene, // ← DODAJ TO
StoryScene,
GameScene,
UIScene
]
};
Začasno spremeni PreloadScene.create():
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():
// Debug: Load Tiled map instead of procedural terrain
this.input.keyboard.on('keydown-M', () => {
this.loadTiledMap();
});
Dodaj metodo v GameScene:
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!
- Exportaj JSON iz Tiled
- Ustvari
TiledTestScene.js - Dodaj v
game.js - 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!