GIF 製作工具
你可以將多張圖片幀製作成 animated GIF。可以依序上傳 PNG、JPG、WebP 幀，也可以使用精靈圖中的幀來產生 GIF。檔案會盡可能在瀏覽器中處理。
GIF動畫
開啟工具圖片工具箱
精靈圖製作工具
將多個 PNG 幀合併成 spritesheet.png，並可直接在瀏覽器中像動畫一樣預覽。實際 GIF 檔案請使用 GIF 製作工具產生。
檔案不會上傳到伺服器，而是在瀏覽器中處理。
上傳圖片
點擊或拖放檔案到這裡
大型圖片可能會讓瀏覽器變慢。
幀間距是每個幀之間的距離。如果要讓遊戲引擎容易自動切割，可以使用 0px；如果想讓精靈圖更容易檢查，建議使用 2～4px。
建議使用 px 作為單位。精靈圖需要精確的像素座標，因此 px 比 %、rem 等相對單位更適合。
- - 0px：適合遊戲引擎或自動切割的緊密排列
- - 1～2px：避免像素圖幀看起來互相貼住
- - 4px：方便預覽與編輯的一般間距
- - 8px 以上：適合說明檔案或容易閱讀的精靈圖
動畫預覽
列可用於下、上、左、右等方向動畫，但實際意義可依你的圖片配置自由解讀。
幀座標說明
- 1.精靈圖會從一張大圖中裁切特定矩形區域來播放幀動畫。
- 2.frameX 與 frameY 代表幀在精靈圖中的起始位置。
- 3.frameWidth 與 frameHeight 是單一幀的尺寸。
- 4.幀間距是幀與幀之間的距離，儲存格內距是圖片周圍的內部留白，外側邊距是整張精靈圖外圍的留白。
- 5.metadata JSON 可供遊戲引擎或自訂渲染程式讀取精確幀座標。
JavaScript 使用範例
const image = new Image();
image.src = "spritesheet.png";
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.imageSmoothingEnabled = false;
const frameWidth = 32;
const frameHeight = 32;
const columns = 4;
const frameSpacing = 2;
const cellPadding = 0;
const outerMargin = 0;
let frame = 0;
let last = 0;
function drawFrame(index) {
const col = index % columns;
const row = Math.floor(index / columns);
const sx = outerMargin + col * (frameWidth + cellPadding * 2 + frameSpacing) + cellPadding;
const sy = outerMargin + row * (frameHeight + cellPadding * 2 + frameSpacing) + cellPadding;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, sx, sy, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
}
function loop(time) {
if (time - last > 125) {
drawFrame(frame);
frame = (frame + 1) % 1;
last = time;
}
requestAnimationFrame(loop);
}
image.onload = () => requestAnimationFrame(loop);CSS 動畫範例
CSS steps 範例最適合幀間距為 0px 的單列精靈圖。多列或有間距時，JavaScript 方式更有彈性。
.sprite {
width: 32px;
height: 32px;
background-image: url("spritesheet.png");
animation: play 0.13s steps(1) infinite;
}
@keyframes play {
from { background-position: 0 0; }
to { background-position: -32px 0; }
}Unity 使用提示
- - Texture Type = Sprite (2D and UI)
- - Sprite Mode = Multiple
- - 像素圖建議 Filter Mode = Point
- - 建議 Compression = None
- - 在 Sprite Editor 中使用 Slice
- - 固定儲存格大小可讓自動 Slice 更容易
- - Pivot 可依角色中心或腳底位置設定
- - 自動 Slice 時 0px 幀間距最單純
- - 如果使用間距，可能需要在 Unity Sprite Editor 中對齊 Grid By Cell Size 的 offset/spacing
需要 GIF 檔案嗎？
如果要將多個幀儲存為 animated GIF，請使用 GIF 製作工具。
開啟 GIF 製作工具使用方法
- 1.上傳 PNG 幀檔案。
- 2.檔案會依檔名遞增排序。
- 3.設定欄數、儲存格尺寸、幀間距、儲存格內距、外側邊距與背景。
- 4.下載精靈圖與幀資料。
- 5.使用動畫預覽檢查 FPS、幀範圍、列選擇與縮放倍率。
FAQ
精靈圖用在哪裡？
常用於遊戲與網頁動畫，從一張圖片中裁切幀矩形來播放動畫。
幀寬度與幀高是什麼？
它們定義單一動畫幀的尺寸。
幀間距幾 px 比較合適？
自動切割用 0px 最單純；若想方便檢查，2～4px 較適合；說明檔案可使用 8px 以上。
儲存格內距和幀間距有什麼不同？
儲存格內距是圖片周圍的內部空間，幀間距是儲存格之間的距離。
FPS 是什麼？
FPS 是每秒播放的幀數，用來控制預覽速度。
metadata JSON 用在哪裡？
可供遊戲引擎或 canvas 渲染程式讀取精確幀座標。
精靈圖和 GIF 有什麼不同？
精靈圖是幀動畫使用的來源圖片，GIF 是可直接播放的動畫檔案。