ShoeBox:精靈圖和遊戲美術的免費瑞士刀

renderhjs 的 ShoeBox 是免費拖放工具組,做 sprite sheet、bitmap font、texture atlas 等——許多引擎上的遊戲和 UI 開發者都愛用。

  • Windows
  • macOS

做遊戲或 UI,你就認識這套磨:把精靈打進圖集、把表切成幀、產生 bitmap font、從截圖摳精靈。renderhjs 的 ShoeBox 把這些放進一個免費拖放應用程式——多年來一直是遊戲開發工具鏈裡安靜的經典。

它是什麼

帶全部工具的 ShoeBox 工具箱網格
每個工具都是一次拖放。

ShoeBox 是 Windows 和 macOS 上的免費 Adobe AIR 應用程式,裝滿遊戲和 UI 工具。每個工具都用簡單的 拖放或剪貼簿:把檔案丟到工具上,或複製影像/文字再點一下。整個流程就是這樣——快、可摸,不用建專案。

和你已經在用的引擎、框架合得來:Unity、Starling、Sparrow、Cocos2D、NGUI、pixi.js、HTML5、Corona、andEngine 等。

最關鍵的那些工具

  • Pack Sprites — 把許多影像、動畫 SWF 或 GIF 打成一個 texture atlas。
輸入影像已準備好打圖集的 Pack Sprites 工具
丟下精靈——帶著圖集出來。
  • Read Sprites — 從表或 bitmap font 匯出每個精靈(需要影像加 lookup 檔)。

  • Bitmap Font — 產生在 Photoshop 裡設計的、相容 AngelCode .fnt 的 bitmap font。

ShoeBox 打好的 sprite sheet 和輸出中繼資料
圖集影像加給你引擎的中繼資料。
ShoeBox 裡 Bitmap Font 產生器預覽
相容 AngelCode .fnt 的 bitmap font。
  • Extract Sprites — 在透明影像裡偵測精靈並自動裁切。
從透明表上切幀的 Extract Sprites 工具
在透明表上自動偵測幀。
  • Extract Tiles — 從遊戲截圖抽出 tile map 和 tile bank。
  • Split PSD — 把 Photoshop 圖層拆成單獨 PNG。
  • Texture Ripper — 從照片或截圖抽出矩形紋理。
  • Ani Frames / Frame Sheet — 把 GIF、SWF 或 PNG 序列變成逐幀動畫或一張表。
  • Sprite Pivots — 一次改許多精靈的註冊點(pivot)。
  • Slice 9 — 建立和讀取可縮放 UI 的 9-patch(slice-9)套件。
  • Mask Image — 從剪貼簿把影像遮罩並羽化進複雜合成。

每個工具都可設定:右鍵工具,選一個符合引擎期望輸出的範本。

怎麼安裝

ShoeBox 跑在 Adobe AIR 上,所以:

  1. 安裝 Adobe AIR 執行階段。
  2. 先解除安裝 3.6.3 之前的任何版本(較新建置更新了憑證)。
  3. 安裝 ShoeBox.air 檔。

給誰用

獨立開發者、技術美術,以及任何交付 2D 內容的人會得到最多。ShoeBox 不替代美術工具——它替代那些通常吃掉你一下午的無聊中間步驟

好工具不替你做創意;它們清掉周圍的例行工作。ShoeBox 是教科書例子。

renderhjs 的 ShoeBox 頁面取得。