Mori Sprite Studio
從一張角色 ref 圖，按一下即可生成 1024×1024 的 4×4 sprite 動畫包。 AI 驅動。純瀏覽器。透明背景。多種匯出格式。
真實 sprite-sheet 正以 CSS steps() 播放 — 跟 mori-desktop 用同一套技術。看看 Mori 是否從下方走過。
這個工具做什麼
給它一張角色參考圖，就能產生完整 sprite 動畫包：6 個必要 + 2 個可選 state，每個 state 都是 1024×1024 的 4×4 sprite sheet。匯出的 .moripack.zip 可載入獨立的 Mori Pet Player，或放進 mori-desktop 使用。
- 必要 6 個:idle(站著)/ sleeping(睡覺)/ recording(聽)/ thinking(思考)/ done(完成歡呼)/ error(出包慌張)
- 可選 2 個：walking（走路）/ dragging（被滑鼠拎起來）— 循環運動類，走獨立的 W/Dr pipeline
這個專案是為 Mori 而生。「Iron Man 有 Jarvis，我有 Mori。」Studio 負責製作 Mori 的角色動畫：想要單純的桌面小寵物，可用 Mori Pet Player；想要完整的 AI 助理，則使用 mori-desktop。
當然這工具也適合任何你想給「可見身體」的角色:你自己的 AI 夥伴 / 個人精靈 / 直播 overlay / 角色 mascot 都可以。Mori demo 只是一個範例。
也可以單獨把每個 state 匯出成 APNG / GIF / WebM / 原始 sheet PNG — 用在 LINE 動態貼圖、Discord、OBS overlay、影片剪輯等等。
Mori 的使用方式
Mori Pet Player｜獨立桌面小寵物
匯入 .moripack.zip，Mori 就會在桌面散步、休息和睡覺，也能用滑鼠抓起來移動。提供 Linux、macOS、Windows 可攜版。Player 只負責播放角色動畫，不包含聊天、AI 助理、生圖或音樂功能。
下載 Mori Desktop — 完整桌面 AI Agent，可執行任務，並支援 Claude、Codex CLI 等 provider。
Live Demo｜聊天、生圖與音樂
在 Studio 的「Output → Live Demo」開啟瀏覽器版。填入你自行部署的 Gemini-Web Base URL 和 API Key 後，Mori 可以聊天、查新聞與天氣，也能生成圖片和音樂。自架服務需允許 mori-sprite-studio.vercel.app 的跨來源請求（CORS），瀏覽器才能生圖與製作音樂；Live Demo 和桌面 Player 分開運作。
工作流程
- 上傳角色 ref — 任何 PNG / JPG、任何背景都行。
- 生 6 個靜態 — 一次 AI call 出 3×2 grid，自動切成 6 個 state pose。
- 每 state 生動畫（必要 6 個） — 用 pre-tile placeholder + 多 anchor identity ref，把角色位置鎖住，只加微擾（眨眼、呼吸、小手勢）。
- 可選的 walking + dragging — 走獨立 W/Dr pipeline（不 pre-tile，因為步行循環需要每格都不同 pose）。「反向順序」+「換位模式」按鈕可讓你手動調整順序。
- 細調 — 每格獨立重生、loop 設定、跨 state normalize 尺寸、scale / offset sliders。
- 角色背板（可選） — 上傳 Light + Dark 兩張背板。用桌面預覽分頁查看所有 state 疊在背板上的樣子，可切換 shape / theme。
- 匯出
.moripack.zip給 Mori Pet Player 或 mori-desktop，或每個 state 單獨匯出 APNG / GIF / WebM 給其他平台。
功能
3 個 AI provider(BYOK)
Google Gemini Direct(AI Studio key)、Codex-Image(用你 ChatGPT Plus 額度)、Vertex Gemini — 全部自帶 key。
防抖動
Pre-tile placeholder sheet 當 AI ref,鎖住角色 16 格內位置不會飄。
防角色 drift
多 anchor identity ref — 其他 state 的 staticBase 都當 outfit anchor 一起送給 AI,衣服 / 髮型不會亂變。
Walking + Dragging 獨立 pipeline
W / Dr template 不走 pre-tile。AI 從 character ref + neutral 全身站姿自由設計 16 格,template 內含逐格 gait 結構。
反向順序
按一下即可反轉 16 格，修正「動畫看起來在後退」的情況。
換位模式
點 cell A → 點 cell B → 兩格內容互換。手動排到走路順暢為止。
桌面預覽分頁
8 個 state 同時排成 floating widget mockup,可切 shape(圓 / 圓角 / 方)× backplate(顯示 / 關閉)× App theme × OS theme。跟 mori-desktop 真實 render 1:1 對應。
身體結構無關 prompt
人形 / 植物 / 機器人 / 史萊姆 / 寶石都能用。Semantic 描述抽象 motion,不綁定 anatomy。
One-shot 兩種 pattern
BURST-AND-SETTLE(歡呼)vs SUSTAINED-ENERGY(慌張)— 自動依 state semantic 選對的。
每格獨立重生
點任一 frame → 只重生那格，用前後 frame + static base 當 context smooth 過渡。
色幕去背與邊緣修色
綠、洋紅、藍、青、黃或自訂色；依色幕覆蓋率估算透明度以保留髮絲，再修正邊緣色溢。支援 3 級 tolerance 與 0-10 px erosion，可從原始輸出重新去背。
跨 state Normalize
按一下即可掃描每個 state 的角色 bbox，算出 per-state transform（scale + offset），讓 mori-desktop 切換 state 時尺寸穩定。
多種匯出格式
.moripack.zip / APNG / GIF / WebM(VP9 + alpha)/ 原始 sheet / .moriproject.zip 存讀檔。
角色背板
Light + Dark 兩張背板 PNG 一起打包，並對應 mori-desktop PR #107 的 3-tier backplate chain。
Demo loader
按一下即可載入完整 27 MB Mori demo，讓新訪客立刻查看完整功能。
檔案格式
| 格式 | 用途 | 哪裡能播 |
|---|---|---|
.moripack.zip | 可直接匯入 Mori Pet Player，或放進 mori-desktop 的 characters 資料夾 | 桌面 Player 小寵物或 mori-desktop 浮動視窗 |
.moriproject.zip | Author 格式 — 之後可載回繼續編輯 | 本 studio(「載入」按鈕) |
| APNG (.png) | 透明 + 循環。LINE 動態貼圖、Discord、Slack、Twitter inline | 瀏覽器 + LINE + Discord |
| GIF (.gif) | 相容性最廣。1-bit alpha 所以邊緣稍粗 | Mac Preview、Windows Photos、什麼都行 |
| WebM (.webm) | VP9 + alpha。OBS 串流 overlay、QuickTime | 瀏覽器、OBS、影片剪輯 |
| 原始 sheet (.png) | 1024×1024 4×4 sheet 本身 | Photoshop / 外部編輯 |
快速上手
用線上 app
- 開 mori-sprite-studio.vercel.app
- 在專案頁按「載入 Mori 預設範本」（按一下即可載入完整 Mori 角色包 — 27 MB）
- 到處逛逛看怎麼跑
- 要做自己的角色：清除資料（或開啟無痕視窗），上傳角色 ref，點
生 6 狀態靜態→ 每個 state 再點生動畫
所有 provider 都要自帶 key(BYOK)— 免費試用通道(Author Fallback)已停止提供。在 sidebar 的 AI Provider 區選一個 provider 填自己的 key(Google Gemini Direct 只要一把免費的 AI Studio API key)。
自架
git clone https://github.com/yazelin/mori-sprite-studio
cd mori-sprite-studio
npm install
npm run dev # Vite dev server
架構
| Layer | Tech |
|---|---|
| UI | Vite + React 19 + TypeScript + Tailwind CSS + shadcn/ui |
| State | Zustand + IndexedDB(idb-keyval)Blob 原生持久化 |
| AI providers | 抽象 ImageProvider 介面 + 4 個實作 |
| 動畫 pipeline | C template(pre-tile,idle 類)+ W/Dr template(獨立,gait/swing 類) |
| Chroma key | 覆蓋率 alpha matte + 內部細節保護 + 邊緣 despill + 選用 erosion |
| Cell 操作 | Canvas 為基底的 reorder / swap / reverse(imageOps.ts) |
| 動畫預覽 | Canvas + requestAnimationFrame(16-frame row-major) |
| 匯出 encoder | upng-js(APNG)、gifenc(GIF)、MediaRecorder + VP9(WebM)、JSZip |
| AI 呼叫 | Sprite 生圖由瀏覽器呼叫所選 provider。Live Demo 使用你設定的 Gemini-Web；聊天經 Studio proxy 轉送，生圖與音樂則由瀏覽器直接呼叫。 |
輸出規格:1024×1024 PNG-32,4×4 grid,每格 256×256,row-major frame order,透明背景。對應 mori-desktop 的 character-pack.md v1.0。
以熱情和咖啡維護
這是個人 passion project。如果你覺得實用，可以：
自掏腰包做的。咖啡錢直接拿去支應 Vercel / domain 開銷，以及持續開發所需的時間與咖啡。
跟 codex-image-service 串接(用你自己的 ChatGPT 訂閱額度)
如果你有 ChatGPT Plus / Pro 訂閱，可以把這個 studio 跟 codex-image-service 串起來 — 它是 FastAPI wrapper，把 Codex CLI 的 $imagegen 包成 HTTP endpoint，讓你訂閱的 image quota 直接用於 studio。
| Setup | 你要準備什麼 | 適合誰 |
|---|---|---|
| A. 線上 studio + 自己的 Gemini key | 一把免費的 AI Studio API key | 剛接觸 / 嚐鮮 / 偶爾用 |
| B. 線上 studio + 自架 codex-image-service | 部署 service + 發給自己一把 Bearer key | 有 ChatGPT Plus 想無限用 |
| C. 兩個都自架 | clone 兩個 repo 本機跑 | 全掌控、離線、不靠別人 |
設定步驟(B / C)
- 部署 / 跑 codex-image-service(repo 說明)
- 在它的 admin UI 發一把 Bearer API key(格式
cimg_…) - studio sidebar → AI Provider section → 選 Codex-Image
- 填 Base URL(例
https://your-domain.example/codex-image)、API Key、Quality(auto預設) - 正常生圖 — 走你自己的 service,消耗你訂閱的額度
CORS:yazelin 部署的版本允許任何 origin(用 Access-Control-Allow-Origin reflect);自架請參考 codex-image-service repo 加 CORS middleware。
相關專案
- Mori Pet Player — 匯入本 Studio 的
.moripack.zip，讓角色在桌面活動的獨立小程式；不含 AI 助理功能。原始碼。 - mori-desktop — Mori 的完整桌面 AI 助理，使用 Rust + Tauri 2、Whisper 與 LLM。這個 Studio 負責製作她的角色動畫。
- world-tree — Mori 的源頭 / 世界樹。Mori 來自的地方。
- codex-image-service — 自架 ChatGPT Plus/Pro quota 當 image-gen API。跟這個 studio 天生對接(看上方串接 section)。
- line-sticker-studio — 姐妹專案,LINE 貼圖製作(共用一些 prompt engineering pattern)
- emoji-slot-machine — 姐妹專案,3×3 emoji 拉霸生成器(共用一些 sprite-sheet 動畫 pattern)