From 99f9aa063d9d07b09eb8f01567f381732e840df3 Mon Sep 17 00:00:00 2001 From: David Kotnik Date: Mon, 5 Jan 2026 23:47:37 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Asset=20Manager=20Desktop=20App?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- asset_manager_main.js | 49 +++++++++++ package.json | 3 +- tools/ASSET_MANAGER_README.md | 156 ++++++++++++++++++++++++++++++++++ 3 files changed, 207 insertions(+), 1 deletion(-) create mode 100644 asset_manager_main.js create mode 100644 tools/ASSET_MANAGER_README.md diff --git a/asset_manager_main.js b/asset_manager_main.js new file mode 100644 index 000000000..eb5b36ea9 --- /dev/null +++ b/asset_manager_main.js @@ -0,0 +1,49 @@ +const { app, BrowserWindow } = require('electron'); +const path = require('path'); + +let assetManagerWindow; + +function createAssetManagerWindow() { + assetManagerWindow = new BrowserWindow({ + width: 1600, + height: 1000, + title: '🎨 NovaFarma Asset Manager', + backgroundColor: '#1a1a1a', + icon: path.join(__dirname, 'build', 'icon.png'), + webPreferences: { + nodeIntegration: true, + contextIsolation: false, + enableRemoteModule: true + } + }); + + // Load the Asset Browser HTML + assetManagerWindow.loadFile(path.join(__dirname, 'tools', 'asset_browser.html')); + + // Open DevTools in development + if (process.env.NODE_ENV === 'development') { + assetManagerWindow.webContents.openDevTools(); + } + + assetManagerWindow.on('closed', () => { + assetManagerWindow = null; + }); + + console.log('🎨 Asset Manager window created'); +} + +app.whenReady().then(() => { + createAssetManagerWindow(); + + app.on('activate', () => { + if (BrowserWindow.getAllWindows().length === 0) { + createAssetManagerWindow(); + } + }); +}); + +app.on('window-all-closed', () => { + if (process.platform !== 'darwin') { + app.quit(); + } +}); diff --git a/package.json b/package.json index 1a301013d..8cc9cb316 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "license": "MIT", "scripts": { "start": "electron-forge start", + "asset-manager": "electron asset_manager_main.js", "watch-maps": "node scripts/watch_map.js", "build": "electron-builder --dir", "build:win": "electron-builder --win portable", @@ -53,4 +54,4 @@ "electron": "^39.2.7", "electron-packager": "^17.1.2" } -} +} \ No newline at end of file diff --git a/tools/ASSET_MANAGER_README.md b/tools/ASSET_MANAGER_README.md new file mode 100644 index 000000000..8ffa32c19 --- /dev/null +++ b/tools/ASSET_MANAGER_README.md @@ -0,0 +1,156 @@ +# 🎨 NovaFarma Asset Manager + +**Standalone Desktop Application** for browsing and managing game assets. + +--- + +## 🚀 Quick Start + +### Launch Asset Manager (Desktop App) +```bash +npm run asset-manager +``` + +This will open a **standalone Electron window** with the Asset Manager interface. + +--- + +## ✨ Features + +- 🖼️ **Visual Asset Browser** - Browse all game assets with previews +- 📋 **One-Click Copy** - Click any asset to copy its path to clipboard +- 🔍 **Search** - Find assets by name or path +- 📂 **Category Filters** - Filter by Teren, Narava, Zgradbe, Objekti, Crops, Biomi +- 🎨 **Dark UI** - Beautiful purple gradient theme matching the game +- 🖥️ **Desktop App** - No browser needed! + +--- + +## 🎮 Usage + +### Running the Asset Manager + +**Method 1: Desktop App (Recommended)** +```bash +npm run asset-manager +``` + +**Method 2: Browser (Legacy)** +Open `tools/asset_browser.html` directly in a browser. + +### Browsing Assets + +1. Launch the Asset Manager +2. Use **category buttons** to filter by type: + - 🌍 Teren (Ground Tiles) + - 🌿 Narava (Nature - trees, grass, etc.) + - 🏚️ Zgradbe (Buildings) + - 📦 Objekti (Objects) + - 🌾 Crops (All crop growth stages) + - 🗺️ Biomi (Biome-specific assets) + +3. Use the **search box** to find specific assets +4. **Click any asset** to copy its path to clipboard +5. **Paste** the path directly into Tiled or your code + +### Copy Path Example + +When you click on an asset like `Dirt Path`, the following path is copied: +``` +assets/slike 🟢/teren/teren_dirt_path_style32.png +``` + +You can paste this directly into: +- Tiled tileset configuration +- Game code (`scene.load.image()`) +- Documentation + +--- + +## 🛠️ Development + +### File Structure +``` +/tools/ + asset_browser.html # Main HTML interface +/asset_manager_main.js # Electron main process +/package.json # Script: "asset-manager" +``` + +### Adding New Assets + +The Asset Manager will automatically show assets from these directories: +- `assets/slike 🟢/teren/` +- `assets/slike 🟢/narava/` +- `assets/slike 🟢/zgradbe/` +- `assets/slike 🟢/objekti/` +- `assets/crops/faza1/` +- `assets/slike 🟢/biomi/` + +To add new assets: +1. Place your PNG files in the appropriate category folder +2. Edit `tools/asset_browser.html` and add the asset to `knownAssets` array +3. Restart the Asset Manager + +--- + +## 📦 Building Standalone App + +To package the Asset Manager as a standalone .app or .exe: + +```bash +# macOS +npm run build:mac + +# Windows +npm run build:win + +# Linux +npm run build:linux +``` + +This will create a distributable application in the `dist/` folder. + +--- + +## 🎨 Customization + +### Change Window Size +Edit `asset_manager_main.js`: +```javascript +width: 1600, // Change width +height: 1000, // Change height +``` + +### Change Theme Colors +Edit `tools/asset_browser.html` CSS: +```css +background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +``` + +--- + +## 🐛 Troubleshooting + +### Assets Not Loading +- Make sure asset paths in `asset_browser.html` match your actual file structure +- Check that images are in PNG format +- Verify paths use forward slashes `/` + +### Window Not Opening +- Ensure Electron is installed: `npm install` +- Check console for errors +- Try running: `npm run asset-manager` again + +--- + +## 📝 Notes + +- Asset Manager is a **development tool** - not shipped with the game +- Paths are automatically copied to clipboard on click +- Use pixel-perfect rendering for crisp sprite previews +- Dark theme reduces eye strain during long asset browsing sessions + +--- + +**Enjoy browsing your assets!** 🎨✨