GIF 製作
用多張圖片幀或精靈圖製作 GIF，並調整 FPS、尺寸、預覽與下載。
GIF動畫
開啟工具免費圖片工具箱
精靈圖製作
將 PNG 幀合併為精靈圖，並調整像素間距、輸出中繼資料與動畫預覽。
無需註冊或付款即可使用，檔案會盡可能在瀏覽器中處理。
上傳圖片
點擊或拖放檔案到這裡
大型圖片可能會讓瀏覽器變慢。
精靈圖會使用瀏覽器 canvas 產生。過大的 canvas 可能碰到瀏覽器限制。
預估 canvas 尺寸: 上傳後自動計算 / 欄數: 4 / 列數: -
幀間距是每個幀之間的距離。如果要讓遊戲引擎容易自動切割，可以使用 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 檔案嗎？
如果想將幀動畫儲存為 GIF，可以使用 GIF 製作工具。
開啟 GIF 製作工具使用方法
- 1.依序上傳 PNG 幀。
- 2.調整欄數、幀間距與背景選項。
- 3.查看動畫預覽與中繼資料。
- 4.下載精靈圖 PNG 與輔助檔案。
注意事項
- 1.處理時間可能會因瀏覽器與裝置效能而有所不同。
- 2.此工具著重於遊戲素材用精靈圖製作。若要將幀動畫儲存為 GIF，請使用 GIF 製作工具。
- 3.下載前請先透過預覽確認結果。
FAQ
檔案會儲存在伺服器上嗎？
檔案會盡可能在瀏覽器中處理，且不會儲存在伺服器上。
可以使用大型檔案嗎？
此工具著重於遊戲素材用精靈圖製作。若要將幀動畫儲存為 GIF，請使用 GIF 製作工具。