diff --git a/README.md b/README.md index a61e3fa..6f2750d 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ ## 🎯 功能概述 -SpriteTool 是一個整合式的 Web 應用程式,集合了四個專業級工具於一身: +SpriteTool 是一個整合式的 Web 應用程式,集合多個專業級工具於一身: ### 📏 Grid Tool(網格工具) 用於在圖片上定義規則的網格區域並進行批量選取。 @@ -116,6 +116,22 @@ SpriteTool 是一個整合式的 Web 應用程式,集合了四個專業級工 --- +### 🗂️ Folder Sprite Builder(資料夾合併工具) +指定資料夾後,將圖片依檔名排序、自動縮放並合併成 Sprite 圖。 + +**功能特性:** +- 一次載入整個資料夾內的圖片 +- 輸入 Columns 與總寬度後,自動計算單格寬度 +- 圖片依比例縮放並置中貼入格位 +- 自動換行排版(不足整列時保留最後一列) +- 輸出順序依檔名自然排序(例如 1, 2, 10) +- 同名檔案會以相對路徑作為次排序,確保順序穩定 +- 一鍵輸出並下載 PNG + +**使用場景:** 批次素材整理、資料夾圖片快速拼表、動畫圖集打包 + +--- + ## 🚀 快速開始 ### 環境需求 @@ -146,6 +162,7 @@ python tool.py - **Shiny Maker**: `http://localhost:8000/shiny/` - **Sprite Flipper**: `http://localhost:8000/flipper/` - **Sprite Merger**: `http://localhost:8000/merger/` +- **Folder Sprite Builder**: `http://localhost:8000/folder-builder/` - **Inset Crop Tool**: `http://localhost:8000/inset/` - **Sprite Splitter**: `http://localhost:8000/splitter/` @@ -162,6 +179,7 @@ SpriteTool/ ├── rotate_webtool.py # Sprite Flipper 子應用 ├── rotate.py # Flipper 核心處理邏輯 ├── sprite_merger.py # Sprite Merger 子應用 +├── folder_sprite_builder.py # Folder Sprite Builder 子應用 ├── inset_crop_tool.py # Inset Crop Tool 子應用 ├── sprite_splitter.py # Sprite Splitter 子應用 ├── remove_pink_background.py # 色彩去除工具(獨立使用) @@ -245,6 +263,13 @@ SpriteTool/ 2. **設定網格** - 輸入行列數,預覽圖會即時顯示藍色分割線 3. **下載** - 點擊「下載 ZIP」取得所有格子檔案 +### Folder Sprite Builder 工作流 + +1. **選擇資料夾** - 載入資料夾內所有圖片 +2. **設定輸出** - 輸入 Columns 與總寬度(px) +3. **確認排序** - 系統會依檔名自然排序後合併(同名時以路徑次排序) +4. **輸出下載** - 點擊「輸出並下載」取得合併後 PNG + --- ## 🛠️ 技術架構 diff --git a/README_EN.md b/README_EN.md index 8015c33..2fd7b7c 100644 --- a/README_EN.md +++ b/README_EN.md @@ -4,7 +4,7 @@ A powerful suite of game development tools providing a complete solution for Spr ## 🎯 Feature Overview -SpriteTool is an integrated web application that combines four professional-grade tools into one: +SpriteTool is an integrated web application that combines multiple professional-grade tools into one: ### 📏 Grid Tool Used to define regular grid areas on an image and perform batch selections. @@ -114,6 +114,22 @@ The simplest tool to split a Sprite Sheet into grid cells and package them into --- +### 🗂️ Folder Sprite Builder +Select a folder, then auto-scale and merge images into a sprite sheet with filename-based ordering. + +**Key Features:** +- Load all images from a selected folder at once. +- Input Columns and total output width to auto-calculate cell width. +- Keep aspect ratio while scaling images and center them in each cell. +- Automatic row wrapping (including incomplete last row). +- Output order uses natural filename sort (e.g., 1, 2, 10). +- Files with identical names are stabilized using relative-path tie-break sorting. +- One-click PNG export and download. + +**Use Cases:** Batch asset organization, folder-to-sprite-sheet pipelines, animation atlas packing. + +--- + ## 🚀 Quick Start ### Prerequisites @@ -144,6 +160,7 @@ Visit the home page to see all available tools, or access them directly: - **Shiny Maker**: `http://localhost:8000/shiny/` - **Sprite Flipper**: `http://localhost:8000/flipper/` - **Sprite Merger**: `http://localhost:8000/merger/` +- **Folder Sprite Builder**: `http://localhost:8000/folder-builder/` - **Inset Crop Tool**: `http://localhost:8000/inset/` - **Sprite Splitter**: `http://localhost:8000/splitter/` @@ -158,6 +175,7 @@ SpriteTool/ ├── rotate_webtool.py # Sprite Flipper sub-app ├── rotate.py # Flipper core processing logic ├── sprite_merger.py # Sprite Merger sub-app +├── folder_sprite_builder.py # Folder Sprite Builder sub-app ├── inset_crop_tool.py # Inset Crop Tool sub-app ├── sprite_splitter.py # Sprite Splitter sub-app ├── remove_pink_background.py # Color removal tool (standalone use) @@ -241,6 +259,13 @@ SpriteTool/ 2. **Set Grid** - Enter row and column counts; the preview will show blue split lines instantly. 3. **Download** - Click "Download ZIP" to get all individual cell files. +### Folder Sprite Builder Workflow + +1. **Select Folder** - Load all image files from a folder. +2. **Set Output** - Enter Columns and total width (px). +3. **Confirm Ordering** - Images are merged in natural filename order (path tie-break if duplicate names exist). +4. **Export** - Click "Export and Download" to get the merged PNG. + --- ## 🛠️ Technical Architecture