ブログ Luki
スプライトシートゲーム開発チュートリアル

スプライトシートの作り方：初心者向け完全ガイド

スプライトシートの作り方：初心者向け完全ガイド

このガイドでは、スプライトシート（sprite sheet）の作り方をゼロから解説します。スプライトシートとは何か、描き始める前に必ず決めておくべき3つの数値、Aseprite でフレームを描いて書き出す手順、バラバラのフレームを1枚の画像にまとめる方法、そして Unity・Godot・RPG Maker それぞれの正確なインポート設定まで。最後に、シートが素人っぽく見えてしまう典型的なミスと、その避け方をひとつずつ挙げます。

すでにフレームは手元にあって、まとめるだけでいいという方はフレームを1枚にまとめるへ飛んでください。フレームそのものを AI に描いてほしいなら、記事末尾の AI スプライト作成ツールがその役目です。

スプライトシートとは？

スプライトシートとは、アニメーションの全フレームを1枚の画像に収め、同じサイズのセルを1列またはグリッド状に並べたものです。ゲームエンジンはセル1個分の窓を画像の上にかざし、その窓を1セルずつずらして描画します。それでキャラクターが歩き出します。

スプライトシートは均一なセルのグリッドで、1セルに1ポーズ

8枚の PNG を別々に用意するのではなく、わざわざ1枚にまとめる理由は、GPU がバインドするテクスチャが8枚ではなく1枚で済むからです。画面上に40体のアニメーションするエンティティがいる 2D ゲームなら、この差はフレーム時間に直接現れます。さらに、バージョン管理するファイルが1つで済み、アートの方向性が変わったときに差し替えるファイルも1つで済みます。

フォーマット自体はとっくに固まっています。均一なセル、隙間なし、1ファイル。まだ固まっておらず、初心者がつまずくのは、着手前に選ぶいくつかの数値のほうです。

ステップ1：まず数値を決める

3つの決定が、その後のすべてを左右します。ここで正しく決めれば、このチュートリアルの残りは機械的な作業です。間違えれば、全フレームを描き直すことになります。

フレーム数：6・8・12

アニメーションの手触りを最も大きく変える決定です。

  • 6フレーム：キャラクターの脚の構造がシンプルで、ゲームを引いた視点で見せるなら、歩行サイクルにはこれで十分です。32px スプライトの見下ろし型 RPG は何十年も4フレームで出荷されてきて、誰も気にしませんでした。
  • 8フレーム：主力の選択肢。接地、沈み込み、通過、持ち上げ、これを2回、左右反転で。しっかりした重心移動が表現でき、後で4フレームの低ディテール版を作りたくなっても割り切れます。
  • 12フレーム：「動いている」ではなく「アニメーション」に見え始めます。キャラクターが画面上で大きい場合、マントや髪をなびかせたい場合、あるいはプレイヤーが実際に見入る一回きりの動作（死亡、詠唱、変身）に使います。プレイ時間6時間ずっとループする歩行サイクルに12フレームを使うのは、ほとんど無駄な労力です。

信頼できる経験則：常時ループする動作は、フレームを視認性に使う。めったに再生されない動作は、フレームを滑らかさに使う。

セルサイズ：画面から逆算して選ぶ

セルサイズとは、1フレームのピクセル寸法です。よく使われるのは 16、32、64、96、128 です。

「どれくらい細かく描きたいか」で選んではいけません。「スプライトがプレイヤーの画面上で何ピクセルを占めるか」で選びます。1920×1080 をターゲットにするとして、カメラが横に30タイル映すなら、1タイルは画面上で 64 ピクセルです。1.5タイル分の背丈のキャラクターなら、およそ 96 ピクセルの絵が必要になります。32 で描いて3倍に拡大すれば、狙い通りのカクカクした質感が得られます。128 で描いて縮小すると、ぼやけた塊になります。ドット絵を縮小すると、ドット絵たらしめている硬いエッジが壊れるからです。

避けるべき失敗パターンは、表示倍率が整数でないことです。32px の絵を2倍で表示すればくっきりします。2.4倍だと、斜めの線がすべてちらつき、一度気づいたら永遠に気になり続けます。

視点：最初のフレームを描く前に決める

2D ゲームのほぼすべては、次の4つの視点でカバーできます。

  • サイドビュー：真横からの視点。プラットフォーマー、格闘ゲーム、エンドレスランナー。1方向、ときどき左右反転。
  • トップダウン：カメラが真上から見下ろす。ツインスティックシューターやローグライク。通常4方向。
  • グリッド RPG：キャラクターがカメラのほうを向きつつ、グリッド上を移動する4分の3視点。RPG Maker の見た目がこれです。4方向。
  • アイソメトリック：菱形の4分の3視点。歩行サイクルに通常8方向が必要なため、最もコストがかかります。

視点は後からかけるフィルターではありません。どの手足が見えるか、影がどこに落ちるか、方向違いのバリエーションをいくつ用意しなければならないかを決めるものです。サイドビューのキャラクターは歩行サイクル1セットで済みますが、グリッド RPG のキャラクターは4セット必要です。

ステップ2：Aseprite でフレームを描く

Aseprite はドット絵アニメーションの標準ツールで、以下のワークフローはほとんどのスプライトアーティストが使っているものです。フレームとオニオンスキン機能のあるエディター（Piskel、Pyxel Edit、LibreSprite）なら、どれでも同じやり方で進められます。当サイトの無料ドット絵メーカーも同様で、インストール不要でブラウザー上で動きます。

  1. セルサイズでキャンバスを新規作成する。 File → New で、幅と高さを上で選んだセルサイズ（例：32×32）に設定し、背景は透明にします。大きいキャンバスに描いて後で切り抜くのはやめてください。セルサイズはエンジンとの契約です。
  2. 接地ポーズを描く。 フレーム1は、片足を前に出して地面に着いているキャラクターです。ここでシルエットをきっちり決めます。他のすべてのフレームはこれのバリエーションだからです。
  3. フレームを追加する。 Frame → New Frame（または Alt+N）で現在のフレームが複製されるので、描き直すのではなく少しずつ動かせます。接地 → 沈み込み → 通過 → 持ち上げの順で歩行を組み立て、もう片方の脚のために左右反転で繰り返します。
  4. オニオンスキンをオンにする。 View → Show Onion Skin で、前後のフレームが半透明で重なって表示されます。フレーム間で頭の高さを揃え、足を同じラインに置き続けるための手段です。
  5. ループをプレビューする。 Enter を押して再生。足と頭のてっぺんを見てください。どちらかが不均一に上下していたら、シートになる前の1フレームのうちに今すぐ直します。
  6. シートを書き出す。 File → Export Sprite Sheet（Ctrl+E）。Layout タブで、1列なら Horizontal Strip、グリッドなら By Rows を選んで列数を固定します。Borders タブでは Trim をオフのままにし（タイトなバウンディングボックスより均一なセルのほうが重要です）、エンジンがテクスチャにフィルターをかけるなら Spacing を 1–2 px 加えます。Output タブで JSON Data を有効にすると、Phaser のようなエンジン向けにフレーム矩形を出力できます。

書き出すと、全フレームが等しいセルに収まった1枚の PNG が得られます。それがスプライトシートです。個別の画像しか書き出せないツールで描いたなら、次のステップでまとめます。

ステップ3：フレームを1枚にまとめる

多くのワークフローは、バラバラの PNG が入ったフォルダーで終わります。スプライトパックの walk_01.png から walk_08.png、3D モデルからレンダリングしたフレーム、ジェネレーターの出力など。これらを均一なセルの1ファイルにする必要があります。

任意の画像エディターで手作業でもできます。列数 × セル幅 × 行数 × セル高さ のキャンバスを作り、各フレームをセルサイズのちょうど整数倍の位置に配置します。できますが、面倒で、1ピクセルずれやすい作業です。

より速い方法は、当サイトの無料スプライトシートメーカーです。フレームをドロップすると、ファイル名順に並べ替え、最大のフレームに合わせてセルを決め、すべてのフレームを共通のベースラインに揃えて、PNG とエンジンに入力するセルサイズを返します。何もアップロードされず、結合はブラウザー内で完結します。手元のアニメーションがバラバラのフレームではなくアニメーション GIF なら、GIF をスプライトシートに変換するツールが全フレームを取り出し、1枚の PNG シートとして書き出します。

フレームはベースラインを共有する必要がある：足が一直線なら正しく、高さがばらつくと歩行時に上下に揺れる

どちらの方法を取るにせよ、先へ進む前に2点を確認してください。すべてのセルが完全に同じサイズであること、そしてキャラクターの足がどのフレームでも同じラインに乗っていること。2点目は静止画では見えませんが、アニメーションを再生した瞬間に明らかになります。

ステップ4：シートをエンジンにインポートする

どのエンジンも求めるものは同じです。すべてのセルが同じサイズで、隙間のサイズを指定しない限り隙間のないシート。設定がどこにあるかを示します。

Unity

  1. PNG を選択します。Inspector で Texture Type を Sprite (2D and UI) に、Sprite Mode を Multiple に設定します。
  2. ドット絵の場合は Filter Mode を Point (no filter) に、Compression を None に設定します。デフォルトのバイリニアフィルターがドット絵をぼやけさせる元凶で、誰もが一度は引っかかります。
  3. Pixels Per Unit をセルサイズに設定して、1セル = 1ワールドユニットにし、Apply をクリックします。
  4. Sprite Editor を開き、Slice → Grid By Cell Size を選んで、セルの幅と高さ（スペーシングを加えたなら padding も）を入力してスライスします。
  5. できたスプライトをまとめて Scene にドラッグすると Animation Clip が作られます。あるいは Animation ウィンドウで組み立てます。

Godot 4

  1. AnimatedSprite2D ノードを追加し、その Sprite Frames プロパティに新しい SpriteFrames リソースを作成します。
  2. SpriteFrames パネルで Add frames from a Sprite Sheet をクリックして PNG を選び、Horizontal に列数、Vertical に行数を設定します。Godot がグリッドをスライスしてくれます。
  3. アニメーションに属するフレームを選択し、FPS を設定して Loop を有効にします。
  4. ドット絵の場合は Project Settings → Rendering → Textures を開き、Default Texture Filter を Nearest に設定します。あわせてプロジェクトのストレッチモードを canvas_items にして整数スケーリングを有効にし、2倍がきっちり2倍のままになるようにします。

RPG Maker MV / MZ

RPG Maker は他の2つより厳格です。レイアウトを選ばせてくれません。キャラクターシートは固定グリッドです。

  • 1キャラクターは 3列 × 4行：方向ごとに3つの歩行フレームで、行は上から順に下向き、左向き、右向き、上向きです。
  • MV と MZ はデフォルトで 48×48 のセルを使うため、1キャラクター分のブロックは 144×192 ピクセルです。
  • 標準のシートには 8キャラクターが入り、ブロックを 4×2 に並べます（576×384 ピクセル）。
  • ファイル名の先頭に $ を付けると、ファイルに8体ではなく1体だけ入っていることをエンジンに伝えられます。! を付けると、エンジンがキャラクターにかける小さな上向きオフセットを無効にできます。オブジェクトやドアにはこれが必要です。

ファイルを img/characters/ に入れると、キャラクター選択に表示されます。フレームが 48×48 でないなら、（絵ではなく）セルのサイズを変えてグリッドを合わせてください。RPG Maker は任意サイズのシートをスライスしません。

Phaser（おまけ）

this.load.spritesheet("hero", "hero.png", { frameWidth: 32, frameHeight: 32 });
this.anims.create({
  key: "walk",
  frames: this.anims.generateFrameNumbers("hero", { start: 0, end: 7 }),
  frameRate: 10,
  repeat: -1,
});

ゲーム設定で pixelArt: true を指定すると、レンダラーが最近傍補間でスケーリングします。

シートが素人っぽく見える5つのミス

  1. セルが不均一。 各フレームをバウンディングボックスで切り詰めると整って見えますが、グリッドスライスが完全に壊れます。セルは均一に保ち、空白は空白のままにしておきます。
  2. 地面のラインが揃っていない。 フレーム1で足が y=60、フレーム5で y=58 だと、スプライトは歩きながら上下に揺れます。すべてのフレームに同じベースラインが必要です。
  3. 透明エッジのにじみ。 GPU がセルの端のピクセルをサンプリングするとき、バイリニアフィルターが隣のセルを引き込み、1ピクセル幅の色違いのフリンジが出ます。ポイントフィルターを使うか、各セルの周りに 1–2 px の透明な余白を加えてエンジンに padding を伝えます。
  4. 表示倍率が整数でない。 32px の絵を 2.4 倍で表示するとちらつきます。ちょうど2倍、3倍、4倍になるカメラサイズを選びます。
  5. シルエットのドリフト。 各フレームをゼロから描いたせいで、キャラクターがフレームごとに少しずつ太ったり痩せたりします。描き直すのではなくフレームを複製して微調整し、毎回オニオンスキンを使います。

あるいは、手作業を飛ばす

一貫性のある8フレームを手で描くのは本物のスキルで、多くのソロ開発者が仮アートのまま出荷する理由でもあります。ボトルネックはアイデアではありません。キャラクターのプロポーション、パレット、シルエットを全フレームで安定させ続けることです。

その一貫性の問題こそ、生成が得意とするところです。SpriteGen スプライト作成ツールは、テキストの説明を受け取り、このガイドで決めた視点・スタイル・フレーム数・セルサイズを選ばせて、フレームがすでに均一なグリッドに揃った完成済みのスプライトシートを返します。無料で試せて、登録不要、所要時間は1分ほどです。アニメーションではなく、アイテム、アイコン、NPC のような静止スプライトが1枚だけ必要なら、AI スプライトメーカーが透過背景のドット絵 PNG として描いてくれます。

何を使って作るにせよ、上で挙げた数値は最初に決めるべきものです。アニメーションのステートマシンをそれらの周りに組み上げてから直すより、最初に正しく決めておくほうがはるかに安上がりです。

[CTA] SIGN-OFF

キャラクターを動かしてみませんか？

キャラクターを説明するだけで、数分でゲームに使えるスプライトシートが完成。無料で始められます。

Sprite Creator を試す →