novafarma/tools/ASSET_MANAGER_README.md

🎨 NovaFarma Asset Manager

Standalone Desktop Application for browsing and managing game assets.

---

🚀 Quick Start

Launch Asset Manager (Desktop App)

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)

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:

# 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:

width: 1600,  // Change width
height: 1000, // Change height

Change Theme Colors

Edit tools/asset_browser.html 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! 🎨✨