アニメーションと座標付きスプライトシート作成

01

専用ソフトなしでスプライトシート作成する手順

スプライトシート作成 — 順番、セル、動き、座標を一つの流れで確認

スプライトシート作成 — 再生順に画像を追加します。移動や削除はプレビューとメタデータの番号に反映されます。短いループは一列、長いシーケンスは横長になりすぎないグリッドが便利です。

スプライトシート作成 — 幅と高さが各セルを決めます。全体表示は元画像を保ち、全面表示はセルを満たして切り抜き、引き伸ばしは寸法を固定します。間隔と外側余白はx、y座標に含まれます。

スプライトシート作成 — 座標をコピーする前に生成してください。安全なCanvas上限を超える場合は画像と座標を一緒に縮小します。そのためCSSやJSONは保存した画像と正確に対応します。

• スプライトシート作成 — 構図をそろえて揺れを抑える。
• スプライトシート作成 — 輪郭には透明度を残す。
• スプライトシート作成 — ファイル名は座標キーになる。
• スプライトシート作成 — 保存後に実際の環境で確認する。

02

スプライトシート作成 — アトラス寸法を先に決める

スプライトシート作成 — セル、間隔、余白が座標を決定

スプライトシート作成では書き出し前に配置を確認できます。列数は改行位置を決め、横一列と縦一列は行または列を固定します。各セルの原点は外側余白から始まり、フレーム寸法と間隔の合計だけ進みます。Canvasを縮小する場合も画像と座標へ同じ出力倍率を適用します。

03

スプライトシート作成 — 公開前の素材をブラウザー内に保つ

スプライトシート作成 — ローカルAPIで処理用アップロードを回避

スプライトシート作成 — 選択ファイルはcreateImageBitmap()で読み込み、ローカルCanvasへ描画します。サムネイルはブラウザーが作るblob URLです。アップロード先、アカウント、クラウドプロジェクトは使いません。消去時にはbitmapを閉じてプレビューURLを破棄し、端末上の元ファイルは変更しません。

04

スプライトシート作成 — CSSまたはゲームエンジン用に出力

スプライトシート作成 — 3形式が同じアトラスを表現

JSON配列は再生順を保ち、JSONオブジェクトはファイル名で検索できます。CSSは共通の背景規則と、負のbackground-positionを持つ各フレームのクラスを作ります。PNGは透明度を保持し、WebPは品質を調整できます。寸法はすべて実際に保存するアトラスに対応します。

05

スプライトシート作成 — 出力を検証する方法

スプライトシート作成 — 公式仕様に基づく再現可能な確認

検証では公式資料と再現可能なブラウザーテストを組み合わせます。MDNのdrawImage()とtoBlob()、W3Cのbackground-positionを参照します。異なる寸法と透明度の単色画像を読み込み、順序と矩形を確認し、WebPを書き出して148×414pxを再読込し、ネットワークが静的資源とローカルblobだけであることを確かめます。

06

スプライトシート作成 — 最初に読む順番を決める

スプライトシート作成 — レイアウトは画像の物語に合わせる

スプライトシート作成 — 画像結合は最初に順番を決めます。キューが完成時の並びを示し、元ファイルを書き換えずに移動または削除できます。横並びは比較、縦並びは手順、グリッドは一覧、スマート長尺は連続するスクリーンショットに適します。