GIF作成ツール
複数の画像フレームからanimated GIFを作成できます。PNG、JPG、WebPフレームを順番にアップロードしたり、スプライトシートのフレームを使ってGIFを生成できます。処理は可能な限りブラウザ上で行われます。
GIFアニメーション
開く画像ツールキット
スプライトシート作成ツール
複数のPNGフレームをspritesheet.pngに結合し、ブラウザでアニメーションのようにプレビューできます。実際のGIFファイルはGIF作成ツールで生成します。
ファイルはサーバーへ送信されず、ブラウザ内で処理されます。
画像をアップロード
クリックまたはファイルをドロップ
大きな画像ではブラウザが遅くなる場合があります。
フレーム間隔は各フレームの間の距離です。ゲームエンジンで自動スライスしやすくする場合は0px、見やすいシートにしたい場合は2〜4px程度がおすすめです。
推奨単位はpxです。スプライトシートは正確なピクセル座標が重要なため、%、remなどの相対単位よりpxが適しています。
- - 0px: tightly packed sheets for game engines or automatic slicing
- - 1-2px: helps pixel art frames avoid touching visually
- - 4px: comfortable spacing for preview and editing
- - 8px or more: documentation and human-readable sprite sheets
アニメーションプレビュー
行は下・上・左・右などの方向アニメーションとして使えますが、実際の意味は画像構成に合わせて自由に決められます。
Frame coordinate guide
- 1.A sprite sheet plays animation by drawing one rectangular frame from a larger image.
- 2.frameX and frameY mean where a frame starts inside the sheet.
- 3.frameWidth and frameHeight are the size of one frame.
- 4.Frame spacing is the gap between frames, cell padding is the inner space around an image, and outer margin is the space around the full sheet.
- 5.The metadata JSON can be used by a game engine or custom renderer to read exact frame coordinates.
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 import tips
- - Texture Type = Sprite (2D and UI)
- - Sprite Mode = Multiple
- - For pixel art, Filter Mode = Point
- - Compression = None is recommended
- - Use Slice in Sprite Editor
- - A consistent cell size makes automatic slicing easier
- - Set Pivot around the character center or feet depending on your game
- - 0px frame spacing is simplest for automatic slicing
- - If spacing is used, match Grid By Cell Size offset and spacing in Unity Sprite Editor
GIFファイルが必要ですか？
複数のフレームをanimated GIFとして保存するには、GIF作成ツールを使用してください。
GIF作成ツールを開く使い方
- 1.Upload PNG frame files.
- 2.Files are sorted by filename in ascending order.
- 3.Set columns, cell size, frame spacing, cell padding, outer margin, and background.
- 4.Build and download the sprite sheet and metadata.
- 5.Use animation preview to check FPS, frame range, row selection, and scale.
FAQ
What is a sprite sheet used for?
It is used in games and web animation to draw frame rectangles from one image.
What are frame width and height?
They define the size of one animation frame.
How many px should frame spacing be?
0px is simplest for automatic slicing. 2-4px is easier to inspect visually. 8px or more can be useful for documentation.
What is the difference between cell padding and frame spacing?
Cell padding is space inside each cell around the image. Frame spacing is the gap between cells.
What is FPS?
FPS means frames per second and controls preview playback speed.
What is the metadata JSON for?
It stores exact frame coordinates for game engines or custom canvas rendering.
How is a sprite sheet different from a GIF?
A sprite sheet is a source image for frame animation. A GIF is an exported animated file.