157 lines
3.5 KiB
Markdown
157 lines
3.5 KiB
Markdown
# 🎨 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!** 🎨✨
|