import fs from 'fs'; import path from 'path'; import { fileURLToPath } from 'url'; import texturePacker from 'free-tex-packer-core'; // ---------------------------------------------------------------------- // ES-Modul Workaround für __dirname // Da Vite standardmäßig ES-Module verwendet (type: "module" in package.json), // müssen wir __dirname manuell nachbauen, um absolute Pfade zu generieren. // ---------------------------------------------------------------------- const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); // ---------------------------------------------------------------------- // Pfad-Konfiguration // ---------------------------------------------------------------------- // Hier definieren wir, woher die rohen Bilder kommen und wohin der // fertige Textur-Atlas gespeichert werden soll. const RAW_ASSETS_DIR = path.resolve(__dirname, '../src/raw-assets/ui'); const OUTPUT_DIR = path.resolve(__dirname, '../src/assets'); const ATLAS_NAME = 'ui-atlas'; // Der Basisname für unsere Ausgabe (ui-atlas.png / ui-atlas.json) // ---------------------------------------------------------------------- // Hauptfunktion zum Generieren des Sprite-Sheets // ---------------------------------------------------------------------- async function buildSpriteSheet() { console.log(`[Packer] Lese Bilder aus: ${RAW_ASSETS_DIR}`); // Wir prüfen zunächst, ob der Quellordner existiert. Falls nicht, // legen wir ihn an und brechen ab, da noch keine Bilder da sind. if (!fs.existsSync(RAW_ASSETS_DIR)) { fs.mkdirSync(RAW_ASSETS_DIR, { recursive: true }); console.log('[Packer] Quellordner existierte nicht und wurde erstellt. Bitte füge Bilder hinzu und starte neu.'); return; } // Wir lesen alle Dateien im Quellordner aus. const files = fs.readdirSync(RAW_ASSETS_DIR); // Wir filtern nach Bilddateien (z. B. PNG) und bereiten sie für den Packer vor. const images = []; for (const file of files) { if (file.endsWith('.png')) { const filePath = path.join(RAW_ASSETS_DIR, file); // Der Packer benötigt den Dateipfad als "path" und den Dateiinhalt als "contents" images.push({ path: file, contents: fs.readFileSync(filePath) }); } } if (images.length === 0) { console.log('[Packer] Keine PNG-Bilder im Quellordner gefunden. Abbruch.'); return; } // ---------------------------------------------------------------------- // Packer-Konfiguration // ---------------------------------------------------------------------- const options = { textureName: ATLAS_NAME, width: 4096, // Maximale Breite des Atlases height: 4096, // Maximale Höhe des Atlases padding: 2, // Pixel-Abstand zwischen den Bildern (verhindert Rand-Bluten) allowRotation: false, // Für UI-Elemente oft besser deaktiviert, damit sie in PixiJS nicht gedreht geladen werden exporter: 'Pixi', // Generiert direkt ein Format, das PixiJS nativ lesen kann removeFileExtension: true // Entfernt das ".png" in den JSON-Keys (leichter in PixiJS aufzurufen) }; console.log(`[Packer] Verpacke ${images.length} Bilder...`); // Wir rufen den Packer asynchron auf texturePacker(images, options, (files, error) => { if (error) { console.error('[Packer] Fehler beim Erstellen des Sprite-Sheets:', error); return; } // Zielordner erstellen, falls er nicht existiert if (!fs.existsSync(OUTPUT_DIR)) { fs.mkdirSync(OUTPUT_DIR, { recursive: true }); } // Der Packer gibt ein Array von Dateien zurück (Bild + JSON). // Wir speichern diese direkt im Zielordner. for (const item of files) { const outPath = path.join(OUTPUT_DIR, item.name); fs.writeFileSync(outPath, item.buffer); console.log(`[Packer] Erfolgreich gespeichert: ${outPath}`); } console.log('[Packer] Sprite-Sheet erfolgreich erstellt!'); }); } // Skript ausführen buildSpriteSheet();