98 lines
4.1 KiB
JavaScript
98 lines
4.1 KiB
JavaScript
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(); |