製作 PNG 精靈圖集及 JSON 地圖

將兩到六十四個受支持的光柵圖像排列在固定單元格中,並下載一個 PNG 及左上原點的 JSON 坐標地圖 ZIP。

何時此工具有用

將小型遊戲精靈、圖標、縮略圖或 UI 狀態打包到一個可預測的位圖中,並附上機器可讀的單元格坐標。

本地處理如何運作

輸入保持所選順序,列數受實際輸入數量限制,每幀獲得固定單元格,contain 將完整圖像置中,cover 則填滿後裁剪,間隙保持選擇的 RGBA 背景,ZIP 包含 sprite-sheet.png 及確定性的 sprite-sheet.json 坐標。

使用方法

  1. 準備來源: 將小型遊戲精靈、圖標、縮略圖或 UI 狀態打包到一個可預測的位圖中,並附上機器可讀的單元格坐標。
  2. 本地處理: 輸入保持所選順序,列數受實際輸入數量限制,每幀獲得固定單元格,contain 將完整圖像置中,cover 則填滿後裁剪,間隙保持選擇的 RGBA 背景,ZIP 包含 sprite-sheet.png 及確定性的 sprite-sheet.json 坐標。
  3. 下載並驗證: 解壓兩個文件,確認 PNG 尺寸、左上原點、幀順序及 JSON 上的單元格矩形,檢查 contain 填充或 cover 裁剪,並在目標應用中加載地圖。

重要限制

PNG 是單一平面光柵圖集:動畫、向量、圖層、來源元數據、獨立容器及色彩配置意圖不保留。cover 可裁剪邊緣,contain 可保留背景,且需遵守來源影像、總像素、畫布、內存、PNG、JSON 與 ZIP 限制。

驗證下載的結果

解壓兩個文件,確認 PNG 尺寸、左上原點、幀順序及 JSON 上的單元格矩形,檢查 contain 填充或 cover 裁剪,並在目標應用中加載地圖。

設計上保密

您的檔案將保存在此瀏覽器中。工具不會將來源或輸出上傳到我們的伺服器。

問答

這個工具什麼時候有用?

將小型遊戲精靈、圖標、縮略圖或 UI 狀態打包到一個可預測的位圖中,並附上機器可讀的單元格坐標。

瀏覽器實際上做了什麼?

輸入保持所選順序,列數受實際輸入數量限制,每幀獲得固定單元格,contain 將完整圖像置中,cover 則填滿後裁剪,間隙保持選擇的 RGBA 背景,ZIP 包含 sprite-sheet.png 及確定性的 sprite-sheet.json 坐標。

我必須理解哪些限制?

PNG 是單一平面光柵圖集:動畫、向量、圖層、來源元數據、獨立容器及色彩配置意圖不保留。cover 可裁剪邊緣,contain 可保留背景,且需遵守來源影像、總像素、畫布、內存、PNG、JSON 與 ZIP 限制。

我應該如何驗證結果?

解壓兩個文件,確認 PNG 尺寸、左上原點、幀順序及 JSON 上的單元格矩形,檢查 contain 填充或 cover 裁剪,並在目標應用中加載地圖。

相關工具