GIF作成
複数の画像フレームやスプライトシートからGIFを作成し、FPSとサイズを調整できます。
GIFアニメーション
開く無料画像ツールキット
スプライトシート作成
PNGフレームを1枚のスプライトシートにまとめ、ピクセル間隔、メタデータ、アニメーションプレビューを調整できます。
登録や支払いなしで使え、ファイルは可能な限りブラウザ上で処理されます。
画像をアップロード
クリックまたはファイルをドロップ
大きな画像ではブラウザが遅くなる場合があります。
スプライトシートはブラウザのcanvasで生成されます。非常に大きなcanvasはブラウザ制限にかかる場合があります。
推定canvasサイズ: アップロード後に自動計算 / 列数: 4 / 行数: -
フレーム間隔は各フレームの間の距離です。ゲームエンジンで自動スライスしやすくする場合は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ファイルが必要ですか？
フレームアニメーションをGIFとして保存したい場合はGIF作成ツールを使ってみましょう。
GIF作成ツールを開く使い方
- 1.PNGフレームを順番にアップロードします。
- 2.列数、フレーム間隔、背景オプションを調整します。
- 3.アニメーションプレビューとメタデータを確認します。
- 4.スプライトシートPNGと補助ファイルをダウンロードします。
注意事項
- 1.処理時間はブラウザや端末性能によって変わる場合があります。
- 2.このツールはゲーム素材向けのスプライトシート作成に重点を置いています。フレームアニメーションをGIFで保存したい場合はGIF作成ツールを使ってください。
- 3.ダウンロード前にプレビューで結果を確認してください。
FAQ
ファイルはサーバーに保存されますか？
ファイルは可能な限りブラウザ上で処理され、サーバーには保存されません。
大きなファイルも使えますか？
このツールはゲーム素材向けのスプライトシート作成に重点を置いています。フレームアニメーションをGIFで保存したい場合はGIF作成ツールを使ってください。