SpriteTree Manager - 差分まるごと見渡しツール

作業の途中でふと思う——このキャラのスカート差分、何着作ったっけ?
フォルダを延々と開いていって、横顔の瞬きがまだ描いてなかったことに気づく。

全部の素材を付箋みたいに机の上に広げられたらいいのに。SpriteTree Managerは、その机です。

ADV・ビジュアルノベル・TRPGなど分岐型ゲームのキャラクター差分やスプライトアニメーション制作に特化し、美術担当が制作中にいつでも素材の全体像を把握できます。

本ツールは、私こと変色君がゲーム開発の実務で感じた「こういうのが欲しい」から生まれました。コードの実装と多言語翻訳は AI アシスタント Claude の協力を得ています。既存ツールを探し回っても丁度いいものが見つからず、それなら自分で作ろうと。同じ悩みを抱えている方のお役に立てれば幸いです。

『 広げれば、足りないものが見える 』
キャラの差分・表情・アクションをキャンバスにぜんぶ並べて、マインドマップみたいに自由に配置。描いたもの、まだのもの、やるか迷ってるもの——ひと目でわかります。新しいアイデアが浮かんだらノードを追加、いらなければ消すだけ。単なる管理ツールではなく、考えとキャンバスが一緒に育っていく思考スペースです。

『 とりあえず描いたら貼っちゃおう 』
ラフのスクショでも、落書きでも、ネットで拾った参考画像でも、そのまま貼り付ければ差分パーツとして使えます。自動背景除去機能を搭載し、除去する色も自由に選べるので、わざわざ画像編集ソフトを開く必要がありません。まずざっくり仮組みして全体の雰囲気を見て、「うん、この方向でいい」と思えたら本制作へ。そのほうがずっと楽でしょう。

『 差分合成リアルタイムプレビュー 』
ベース画像に複数レイヤーの差分パーツを重ねて、即座にプレビュー。この上着にあの髪型を合わせたらどうなる?クリックひとつで確認できます。各パーツグループには属性やグループを設定でき、実際の組み合わせ数はツールが自動計算——どれだけ多くても数える必要はありません。

『 スプライトアニメーション再生 』
スプライトシートをそのまま投入すれば、キャンバス上でアニメーション再生。動きがスムーズか、テンポは合っているか、見ればすぐわかります。差分パーツにスプライトシートを使えば、重ねた状態でそのまま動きます。水平・垂直・グリッド配列、FPS・フレームサイズのカスタマイズに対応。別のソフトを開く必要はありません。

『 ワンクリックで書き出し 』
好きな組み合わせを選んで、PNG合成画像・GIFアニメ・一式ZIPで書き出し。各パーツはツール内でリネーム・分類でき、書き出し時にはその名前とフォルダ構造がそのまま反映されます。出力解像度は最長辺のピクセル数を指定するだけ——縦でも横でも正方形でも自動で等比率スケーリング、サイズは常にぴったり。そのままゲームエンジンに投入できます。

『 思いついたことはその場でメモ 』
各ノードの下に折りたたみ式のメモ欄。配色案、アイデア、TODO——好きな色で印をつけて、忘れないように。

『 どこでも使える、手間いらず 』
HTMLファイルひとつ、ブラウザで開くだけ。PCでもタブレットでも、インストール不要。途中で閉じても次回ちゃんと復元されます。デバイスを変えたい?JSONで持ち出すだけ。

日本語 / 繁體中文 / English ワンクリック切替

畫到一半突然想不起來——這個角色的裙子差分,到底做了幾件?
翻資料夾翻半天,才發現側臉的眨眼根本還沒畫。

如果所有素材能像便利貼一樣攤在桌上就好了。SpriteTree Manager 就是那張桌子。

專為 ADV / 視覺小說 / TRPG 等分歧型遊戲的角色差分與精靈圖動畫設計,讓美術在製作過程中隨時掌握素材全貌。

本工具由我本人變色君根據自身遊戲開發中的實際需求設計,程式碼撰寫與多語翻譯由 AI 助手 Claude 協助完成。找遍市面上的工具都沒有剛好符合的,只好自己動手做了。如果你也有類似的困擾,希望這個工具能幫上忙。

『 攤開來,就知道缺什麼了 』
把角色的差分、表情、動作全部丟到畫布上,像心智圖一樣隨手排列。畫好的、沒畫的、還在考慮要不要做的——看一眼就清楚。想到新點子就加一格,覺得多餘就刪掉。這不只是管理工具,更是讓想法跟著畫布一起成長的思考空間。

『 畫了什麼就先貼上去吧 』
管它是草稿截圖、隨手的塗鴉、還是從網路上抓的參考圖,直接貼進來就能當組件使用。內建自動去背功能,還能自選要去除的背景顏色,不用特地開繪圖軟體處理。先把大概的感覺組出來,覺得「嗯,這個方向對了」再回去畫正式版。這樣不是輕鬆多了嗎。

『 差分合成即時預覽 』
基底圖加上多層差分組件,即時預覽合成結果。選這件上衣配那個髮型會怎樣?點一下就看到了,不用開繪圖軟體手動合圖。每個組件組都能標記屬性和分組,工具會自動算出實際的排列組合數——組合再多也不用自己數。

『 精靈圖動畫直接播放 』
精靈圖丟進來,直接在畫布上播放動畫。跑起來順不順、節奏對不對,看一眼就知道。差分組件也能用精靈圖,疊上去就會跟著動。支援水平、垂直、網格排列,自訂幀率與單幀尺寸,不用另外開軟體確認。

『 一鍵打包匯出 』
挑好喜歡的組合,一鍵匯出 PNG 合成圖、GIF 動圖、或整組素材 ZIP。每個組件都能在工具裡重新命名和分類,匯出時自動按照你整理好的名稱和資料夾結構打包——不用再手動改流水號、不用再整理散亂的檔案。輸出解析度只要填最長邊的像素數,直的橫的正方形的都會自動等比縮放,尺寸永遠對得上。直接丟進遊戲引擎就能用。

『 想到什麼就寫在旁邊 』
每個格子底下都能展開註解欄,用喜歡的顏色標記設計想法、待辦事項、或任何備忘。東西不會忘,靈感不會丟。

『 隨處可用,沒有門檻 』
就是一個 HTML 檔案,用瀏覽器打開就能用。電腦、平板都行,不需要安裝任何東西。做到一半關掉也不怕,下次打開還在。想換裝置?存個 JSON 帶走就好。

日本語 / 繁體中文 / English 一鍵切換

You're halfway through a character and suddenly you can't remember — how many skirt variants did I actually finish? You dig through folders for five minutes only to realize the side-view blink was never drawn.

If only you could just spread everything out on a table and see it all at once. SpriteTree Manager is that table.

Built for ADV / visual novel / TRPG character diffs and sprite animation workflows, giving artists a clear view of their entire asset landscape at any stage of production.

This tool was designed by me, Henshoku-kun, based on real needs encountered during my own game development. Code implementation and multilingual translations were created with the help of Claude, an AI assistant. After searching everywhere and finding nothing that quite fit, the only option was to build it. If you've been struggling with the same workflow, hopefully this helps.

『 Spread It Out, See What's Missing 』
Toss all your character diffs, expressions, and poses onto a canvas and arrange them like a mind map. What's done, what's not, what you're still deciding on — it's all right there. Had a new idea? Add a node. Changed your mind? Delete it. More than a management tool, it's a thinking space where your ideas grow alongside your canvas.

『 Just Paste Whatever You've Got 』
Rough screenshot, quick doodle, reference image from the internet — paste it in and it becomes a usable component. Built-in background removal with customizable target color means no need to open image editors for masking. Mock up the general vibe first, and when it finally feels right, go back and draw the real thing. Way less pressure, right?

『 Live Diff Composite Preview 』
Layer multiple diff components over a base image with instant preview. What does this jacket look like with that hairstyle? One click and you'll see. Each slot can be tagged and grouped, and the tool automatically calculates the real number of combinations — no matter how many, you never have to count them yourself.

『 Sprite Sheet Animation Playback 』
Drop in a sprite sheet and it animates right on the canvas. Is the motion smooth? Does the timing feel right? You'll know at a glance. Use sprite sheets as diff overlays and they'll animate in place. Supports horizontal, vertical, and grid layouts with custom FPS and frame dimensions — no extra software needed.

『 One-Click Export 』
Pick your favorite combination, export as PNG, animated GIF, or a full ZIP bundle. Every component can be renamed and categorized right inside the tool — file names and folder structure follow exactly what you've organized. Output resolution is just one number: the longest edge in pixels. Portrait, landscape, square — everything scales proportionally and sizes always match. Ready to drop straight into your engine.

『 Scribble Notes Right Where You Need Them 』
Every node has a collapsible note panel. Color ideas, design thoughts, to-dos — mark them in your favorite color so nothing slips away.

『 Use Anywhere, Zero Setup 』
One HTML file. Open it in a browser. PC, tablet, whatever you have — no installation needed. Close it mid-session and it remembers everything. Switching devices? Just grab the JSON.

日本語 / 繁體中文 / English — switch instantly

『 開発・テスト環境について 』
このツールは主に Windows PC と Android タブレットで開発・テストしています。普段の作業環境もこの2つなので、機能や操作感はこのプラットフォームが一番安定しています。

Mac でも使えます。ブラウザで HTML ファイルを開くだけで動作し、ショートカットキーも ⌘ Command に対応しています。ただ Mac は手元でじっくりテストできていないため、細かい部分で気になる点があるかもしれません。ご了承ください。

iOS(iPad / iPhone)は少し事情が異なります。Apple の仕様でブラウザからローカル HTML を直接開けないため、サードパーティ製アプリ(HTML Viewer Q など)が必要ですが、すべての機能が完全に動作する保証はありません。iOS で完全な動作を求める場合は、HTML ファイルをご自身で「デプロイ」することも可能です(Netlify などの無料静的ホスティングにファイルをドラッグ&ドロップするだけで専用 URL が発行され、Safari からフル機能で利用できます)。
iOS ユーザー向けに、オンラインお試し版も用意しました:

オンライン版も機能は同じです。データはすべてお使いの端末内に保存され、外部に送信されることはありません。
対応プラットフォーム

✅ Windows PC(メインテスト環境・推奨)
✅ Android タブレット(メインテスト環境・推奨)
✅ Mac(ブラウザで HTML ファイルを直接開く)
⚠️ iOS iPad / iPhone(オンライン版の利用、または自己デプロイを推奨)

------------------------------------------------------------------------------------------------------------------------

『 開發與測試環境 』
這個工具主要在 Windows PC 和 Android 平板上開發與測試,日常作業也是用這兩個平台,所以功能和體驗應該是最完整的。

Mac 也可以使用,直接用瀏覽器開 HTML 檔就行,快捷鍵有對應 ⌘ Command。不過我手邊 Mac 不是主力機,沒辦法每個細節都測過,如果遇到小狀況還請見諒。

iOS(iPad / iPhone)比較特殊——Apple 不太讓瀏覽器直接開本地 HTML 檔案,需要透過第三方 App(例如 HTML Viewer Q),雖可執行但功能不一定能保證完整。如果你想要在 iOS 上獲得完整體驗,可以自行將 HTML 檔「部署」到網路空間(也就是把檔案上傳到免費的靜態網站託管服務,例如 Netlify——只要把檔案拖進去就會得到一個專屬網址,用 Safari 打開即可正常使用)。

為了方便 iOS 的使用者試用,我也準備了一個線上體驗版:

線上版功能完全一樣,資料存在你自己的裝置上,不會上傳到任何地方。
支援平台一覽

✅ Windows PC(主要測試平台,推薦)
✅ Android 平板(主要測試平台,推薦)
✅ Mac(瀏覽器直接開啟 HTML 檔案)
⚠️ iOS iPad / iPhone(建議使用線上版,或自行部署)

------------------------------------------------------------------------------------------------------------------------

『 Development & Testing 』
This tool was primarily developed and tested on Windows PC and Android tablet — that's my daily working environment, so these platforms have the most polished experience.

Mac works too. Just open the HTML file in your browser; keyboard shortcuts are mapped to ⌘ Command. That said, Mac isn't my main machine so I haven't tested every detail — please bear with any rough edges.

iOS (iPad / iPhone) is a different story — Apple doesn't let browsers open local HTML files directly. Third-party apps like HTML Viewer Q can run it, but full functionality isn't guaranteed. For a complete experience on iOS, you can "deploy" the HTML file yourself — just drag it into a free static hosting service like Netlify, and you'll get a dedicated URL that works perfectly in Safari.

To make things easy for iOS users to try it out, I've set up an online demo:

The online version has all the same features. Your data stays entirely on your device — nothing is uploaded anywhere.
Supported Platforms

✅ Windows PC (primary test platform, recommended)
✅ Android tablet (primary test platform, recommended)
✅ Mac (open HTML file directly in browser)
⚠️ iOS iPad / iPhone (online version or self-deploy recommended)

------------------------------------------------------------------------------------------------------------------------