スプライトシートの作り方：ドット絵アニメーションを1枚にまとめる実践ガイド

スプライトシートとは、複数フレームを1枚にまとめた画像

スプライトシートとは、キャラクター、アイテム、エフェクトなどの小さな画像を、1枚のPNGなどに規則的に並べた素材です。ゲーム制作では、歩くキャラクターの4コマ、攻撃モーションの6コマ、コインの回転アニメーションなどを、個別ファイルではなく1枚の画像として読み込むためによく使われます。

ドット絵の場合、1コマごとの輪郭や色数が小さいため、スプライトシートにまとめるメリットが特に大きくなります。ファイル管理が簡単になり、フレーム番号を指定しやすく、Unity、Godot、RPGツクール、WebのCSSアニメーションでも扱いやすくなります。

作る前に決める4つの設定

スプライトシート作成で一番多い失敗は、描き始めた後にセルサイズや余白を変えてしまうことです。最初に次の4点を固定しておくと、後からゲームエンジンに読み込むときも崩れにくくなります。

例えば、32×32の歩行アニメを6フレーム作るなら、横一列の画像サイズは 192×32 です。64×64で8フレームなら 512×64 になります。先にこの計算をしておくと、余白や切り出し位置のズレを防げます。

ドット絵スプライトシートの作り方

ドット絵 アニメーション 作り方としては、最初から滑らかな動きを狙うより、基準ポーズ、変化ポーズ、中間ポーズの順に増やすほうが安定します。ここでは小さなキャラクターの歩行アニメを例に進めます。

横一列・グリッド・余白ありの使い分け

スプライト シート 作成 ツールを使うと、自動で画像を詰めてくれる場合があります。ただし初心者は、見た目の詰め込み効率よりも、切り出しやすさを優先したほうが安全です。

作成ツールを選ぶポイント

スプライトシートは、専用ソフトでなければ作れないわけではありません。重要なのは、ピクセル単位で編集できること、フレームを並べやすいこと、透明PNGで劣化なく保存できることです。

• 手描き中心: ドット絵専用エディタやスプライトエディタを使うと、フレーム管理やオニオンスキンが便利です。
• ブラウザ中心: インストール不要のドット絵サイトでも、短いアニメーションやPNG書き出しに対応していれば練習できます。
• 写真・イラスト変換中心: 変換画像をそのまま動かすのではなく、まず静止画を整理してから手描きで差分を作ると自然です。
• ゲーム制作中心: UnityやGodotで使う場合は、セルサイズ、ピボット位置、透明背景、余白の扱いを先に確認しましょう。

これから描くツールを選ぶ段階なら、ドット絵制作ツール比較やブラウザで始めるドット絵サイトの選び方もあわせて見ると、制作環境を決めやすくなります。

PNG書き出しと読み込み前のチェック

スプライトシートを書き出すときは、JPGではなくPNGを使います。JPGは色がにじみやすく、透明背景も扱えないため、ドット絵の輪郭が崩れる原因になります。

完成後は、書き出した画像を一度読み込み直して、セル幅、行数、列数が想定どおりか確認します。例えば32×32の6フレームなら、画像全体の幅が192px、高さが32pxになっているかをチェックします。

よくある失敗と直し方

スプライトシートは小さなズレが再生時に目立ちます。次のような問題が出たら、描き込みよりも先に配置と書き出し設定を見直しましょう。

スプライトシート作成のFAQ

まとめ

スプライトシート 作り方の基本は、同じセルサイズのフレームを、決めた順番で1枚の画像に並べることです。最初は32×32または64×64、4から8フレーム、透明PNG、横一列というシンプルな条件で作ると、読み込みや再生確認まで迷いにくくなります。

静止画のドット絵制作に慣れてきたら、歩行、まばたき、点滅、簡単なエフェクトの順に挑戦してみてください。素材をゲームやWebで使う予定があるなら、描き込みの前にセルサイズ、余白、ピボット位置、書き出し形式を固定しておくことが、後工程を楽にする一番の近道です。

参考にした情報

• Adobe Animate ヘルプ: モバイルアプリおよびゲームエンジン用アニメーションの書き出し
• Qiita: JavaScriptでスプライトシートからアニメーションを表示する考え方

関連ガイド

• パソコンでドット絵を書く方法
• ドット絵描き方マスターガイド
• 32×32・64×64ドット絵変換の最適設定
• レトロゲーム風画像変換ツール