スプライトシートのフレームずれ・切れを修正
アニメーションが横に跳ねる、隣のフレームが見える、手足が切れる場合、多くはスプライトシートを切り出すセル計算が実際の画像と合っていません。このガイドでは、フレーム幅、間隔、パディング、トリム、エンジン側のインポート設定を順に確認します。
最初に見るフレーム整列チェック
まず、表示されている1フレームの実寸と、エンジンに設定したフレームサイズを比べます。シートが32x32セルなのにローダーが31x32で切ると、2列目以降がずれていきます。見た目の矩形は合っていても、トリムのオフセット情報が欠けると再生位置だけがずれることもあります。
均一グリッドの問題
同じずれが列や行ごとに繰り返されます。画像を直す前に frameWidth、frameHeight、spacing、margin、hframes、vframes を確認します。
トリム情報の問題
矩形は合っているのに再生中に位置がずれます。spriteSourceSize、pivot、origin、エンジンがトリム済みフレームを理解しているかを確認します。
ずれが始まる場所
フレームずれの主な5つの原因
多くのずれは、書き出したシートと読み込み側の前提が一致していないことで起きます。まずシートの幾何情報を確認し、その後にメタデータとエンジン固有設定を見ます。
フレームサイズの不一致
32x32で読む設定では、33x32のセルや小さく書き出された最終フレームを正しく切れません。
間隔やマージンを無視している
フレーム間に隙間がある場合、式には x = col * (frameWidth + spacing) + margin を含める必要があります。
トリム済みフレームにオフセット情報がない
トリムは画像を小さくできますが、各フレームを同じ論理ボックスに戻すオフセット情報が必要です。
ピボットや原点が揺れている
矩形が正しくても、origin や pivot が違うとキャラクターが跳ねて見えます。
padding と spacing の混同
padding はにじみ防止、spacing は次のセル開始位置です。混同すると座標がずれます。
エンジン別設定マップ
フレームずれを起こしやすいエンジン設定
Unity、Godot、Phaser、CSSでは名前が違っても、見るべき情報は同じです。フレーム寸法、隙間、マージン、トリム情報、原点が、書き出したPNGと一致している必要があります。
Unity Sprite Editor
均一シートでは Grid by Cell Size を使い、Cell Size、Offset、Padding が書き出しレイアウトと一致するか確認します。
Godot hframes / vframes
均一グリッドでは hframes と vframes が画像サイズを割り切る必要があります。AtlasTextureでは region_rect を確認します。
Phaser frameWidth と spacing
frameWidth、frameHeight、spacing、margin をセットで指定します。spacing が抜けると後続フレームが隙間や隣の絵を読みます。
CSS background-position
負のオフセットを使い、隙間を計算に含めます。固定サイズのスプライトシートでは percentage 指定を避けます。
再書き出し前に使うグリッド計算
均一シートでは、矩形の開始位置は x = margin + col * (frameWidth + spacing)、y = margin + row * (frameHeight + spacing) です。横と縦で spacing が違う場合は別々に計算します。この式がセル境界に合わないなら、個別に位置を動かすより、書き出し設定かインポート設定を直すべきです。
列方向の座標
x = marginX + column * (frameWidth + spacingX)。spacingX の抜けが右方向のずれの定番原因です。
行方向の座標
y = marginY + row * (frameHeight + spacingY)。spacingY が違うと上下のフレームが混ざります。
論理フレームボックス
トリム済みアニメーションでも、sourceSize、pivot、origin などで同じ論理ボックスを保つ必要があります。
いつスプライトシートを書き出し直すべきか
書き出し済みシートのセル寸法が不揃い、またはエンジンが必要とするメタデータがない場合だけ再パックします。単純なローダーには固定フレーム寸法と少しの spacing が安全です。絵の外接矩形が不揃いなら、トリムを切るか、トリムオフセットを保持するメタデータを書き出します。
単純なローダーには均一フレーム
CSS sprites、基本的な Phaser sheets、Godot hframes/vframes は、全セルが同じサイズだと最も安定します。
メタデータ対応時だけトリムを使う
Texture atlas のトリムは、ランタイムが元サイズとオフセットを読む場合だけ安全です。
padding と spacing を分ける
spacing はセル間の測定可能な隙間です。padding/extrusion はにじみ防止のための端ピクセルです。
フレームずれFAQ
一貫したフレーム寸法で再書き出し
Sprite Sheet Makerで均一グリッドやメタデータ付きアトラスを作り直し、Unity、Godot、Phaser、CSS側で同じ寸法を指定してください。