Godotへスプライトシートを取り込む方法

テクスチャをプロジェクトへ取り込む

Godotは、ファイルシステムを監視して素材を取り込みます。プロジェクトのディレクトリー内のどこかへPNGをコピーすると、FileSystemドックに現れ、次が付きます .import 一緒に作られるファイルです。手で編集せず、Importドックで設定を変えて次を押します： 再取り込み.

何より先にフィルタリングを設定してください。ピクセルアートでは、最も見た目に影響する設定です。Godot 4では、テクスチャフィルターはインポートではなくノード側の次の場所にあります CanvasItem → Texture → Filter。次に設定してください Nearest 硬いピクセルの縁が硬いままになります。ノードごとの設定はすぐ面倒になるので、プロジェクトの標準設定を変更します：Project Settings → Rendering → Textures → rendering/textures/canvas_textures/default_texture_filter → Nearest。各CanvasItemが次のままなら Inherit その後取り込みます。

Importドックでは、次をそのままにします： Mipmaps 元寸法付近で描く2Dスプライトではオフにします。Godot 4でVRAM形式に圧縮するのは、次を選んだ場合だけです： VRAM Compressed。デフォルトの Lossless モードがピクセルアート向きです。VRAM圧縮は、単色アートで最も目立つブロック状の乱れを生みます。

方法1：AnimatedSprite2DとSpriteFrames

動くものにはこの方法を使い、ほとんどのプロジェクトはここから始めるべきです。 AnimatedSprite2D 次を保持するノードです： SpriteFrames リソースです。名前付きアニメーションの集合で、それぞれFPS値とループフラグを持つテクスチャの順序付きリストです。

1. 追加するもの： AnimatedSprite2D シーンへ。
2. Inspectorで、次をクリックします Sprite Frames プロパティを選び、 New SpriteFrames。エディターの下部にSpriteFramesパネルが開きます。
3. デフォルトのアニメーション名を次から変更 default 意味のあるものへ — walk, idle。これらの文字列はコードから参照することになります。
4. ツールバーの2つのボタンのいずれかでフレームを追加します。 スプライトシートからフレームを追加 （グリッドのアイコン）または ファイルからフレームを追加 （ファイルのアイコン）。
5. アニメーションのFPSとループを設定し、コードを組み込む前にパネルで再生してタイミングを確認します。

スプライトシートからフレームを追加

グリッドのアイコンを選ぶとダイアログが開き、PNGを選択してから配置を指定します。 Horizontal および Vertical 件数と、 Separation および Offset シートに余白や隙間がある場合です。プレビューは即時更新され、必要なセルを必要な順でクリックします。Shiftクリックで範囲選択します。

知っておくべき点は2つです。まず選択順がフレーム順になるので、順不同でクリックするとアニメーションも順不同になります。次に、このダイアログはUnityのGrid By Cell Countと同じく均等なグリッドを前提とします。内容検出モードはまったくなく、UnityのAutomatic分割に相当するものもありません。実際のグリッドでなければ、このダイアログでは解決できません。

ファイルからフレームを追加

複数の個別PNGを選択すると、Godotの並び順、つまりアルファベット順でフレームになります。ファイル名にはゼロ埋めを使用してください — walk_01.png 経由 walk_12.png — そうしないと、フレーム1の直後に10が来ます。この経路が最も正しく設定しやすく、特にGodotで事前に個別ファイルへ分割すると作業が滑らかになる理由です。

方法2：AtlasTextureの領域

1つの AtlasTexture 大きなテクスチャの一領域を参照するリソースで、Godotが受け付ける場所すべてで独立テクスチャとして働きます。テクスチャプロパティを次へ設定して作成します： New AtlasTexture、シートを次の項目に割り当てます atlas プロパティと、次の入力： region 矩形（x、y、width、height）。

最も柔軟で、最も手動の方法です。必要なスプライトが任意の位置にある場合、複数ノードが1テクスチャの異なる部分を使う場合、コード内のデータから領域を生成する場合に適しています：

• 1枚の共有テクスチャから、ナインパッチのパーツやアイコンを取り出すUIテーマ。
• シートと一緒に書き出されたJSONマニフェストから、スクリプトがAtlasTextureを構築するタイルセットやアイテムカタログ。
• 別ファイルの作成が大げさに感じられる、単発の静止スプライト。

その filter_clip プロパティは知っておく価値があります。有効にすると領域外のサンプリングを防ぎ、縁に隣のスプライトの細片がにじむ問題を直します。

方法3：Sprite2Dのhframesとvframes

単純な Sprite2D 追加リソースなしでシートを読む3つのプロパティがあります： hframes, vframes、そして frame。hframesを4、vframesを4に設定すると、Godotはテクスチャを4×4の格子に分割します。次を設定すると frame を0〜15のインデックスにすると、そのセルを表示します。

最も軽量な方法で、次の項目のAnimationPlayerトラックから、きれいにアニメーションにできます frame プロパティ、または次の数行から _process。ツールから書き出したシートなら、本当にこれだけで十分です。

不均一なシートが3方式すべてで失敗する理由と対策

上記のすべての方法は、シートを数式で表せるという前提を共有しています。Add Frames from Sprite Sheetは個数を求め、hframes/vframesも個数を求めます。AtlasTextureは明示的な矩形を求めます。正しく設定できますが、各矩形を手で測る必要があります。

画像生成モデルのシートは、この前提を満たしません。「4×4の歩行サイクル」を指示されたモデルがグリッドらしい画像を作るのは、セル境界を計算したからではなく、何千ものグリッドを見てきたからです。間隔は列ごとに数ピクセルずれ、左から右へずれが積み重なります。ポーズによってスプライトの大きさも変わり、想定上のセル内で内容が中央から外れます。hframesを4にすると、1列目は正常でも、2列目は少し切れ、4列目ではキャラクターを切断してしまいます。

確実な対策は、シートを説明するのをやめ、実際に読み取ることです。透明背景では、すべてのピクセルはスプライト（アルファがゼロより大きい）か背景（アルファがゼロ）です。スプライト間の完全透明な行と列が、位置に関係なく実際の境界を示します。その隙間の中央で切り、各部分を自身の内容までトリミングすれば、想定グリッドに依存しない個別フレームになります。

それを行うのが、当ツールのMagic Sliceタブです： スプライトシートスライサー 2つのスプライトや余分な余白が残る部分を見つけるため、数回の再調整も行います。個別PNGで書き出し、次で読み込みます： ファイルからフレームを追加。スプライトの接触、キャンバス全体に広がる光彩、パーツが離れたキャラクターなど、自動検出が難しい場合は、「手動・プリセット」タブで各グリッド線を正しい隙間までドラッグできます。16フレームのシートなら6回のドラッグで済みます。

シートが透明ではなく単色背景の場合は、次で処理してください 背景削除 先に行います。全シートで1回なら1つの処理と一貫した結果ですが、後で個別16フレームに行うと16回のばらつく機会になります。

個別PNGと1枚のシートの違い

2Dプロジェクトの大半では、ドローコールの差はボトルネックではなく、個別ファイルの使いやすさが勝ります。テクスチャの切り替えが重要になる段階へ到達したら、最初から巨大シートを手で切って制作するのではなく、完成フレームをビルド手順でアトラスへまとめるのが答えです。

よくある質問