Paper 2D スプライト

Paper 2D のプライマリ アセット タイプは スプライト と呼ばれるものです。スプライトは、Unreal Engine でのプロジェクトの開発時にキャラクターやオブジェクトを表現するために使用できる、静的な 2 次元テクスチャです。

スプライトは スプライト シート、つまり 1 つのスプライトの多数のバリエーションが入っている単一の画像ファイルの形であることが多く、それを使用してキャラクターやオブジェクトをアニメートできます。

このドキュメントに記載されているサンプル スプライトは、画像を右クリックしてコンテキスト メニューから [名前を付けて保存] を選択すると、ダウンロードできます。これらの画像ファイルは、独自のプロジェクトやサンプル コンテンツで使用できます。

このドキュメントで使用されているすべてのサンプル スプライトをまとめた画像ファイルは、「サンプル コンテンツ」セクションを参照してください。

アニメーション スプライトの詳細については、「フリップブック」のドキュメントを参照してください。

タイル

タイル は、2D レベルや環境をビルドするために使用できる特定の種類のスプライトです。

タイル セットやタイル マップの詳細については、タイルのドキュメントを参照してください。

スプライトをインポートする

プロジェクトでスプライトの使用を開始するには、最初にアセットを Unreal Engine にインポートする必要があります。スプライトやスプライト シートをインポートするには、コンテンツ ブラウザ で [Import (インポート)] をクリックし、ファイル ブラウザでスプライトの画像ファイルに移動します。このファイルが Unreal Engine に テクスチャ アセット としてインポートされます。

Paper 2D テクスチャ設定

デフォルトでは、Unreal Engine にインポートされる 2D 画像はすべて テクスチャ アセット としてインポートされます。デフォルトの画像処理は 3D モデルやオブジェクトのテクスチャを処理するように設計されており、2D キャラクターやオブジェクトのような低解像度ファイルは滑らかでソフトになります。

スプライトの低解像度の見え方を保存するため、アセットに Paper 2D テクスチャ 設定を適用できます。

Paper 2D テクスチャ 設定は、コンテンツ ブラウザ でテクスチャ アセットを 右クリック し、コンテキスト メニューで [Sprite Actions (スプライト アクション)] > [Apply Paper 2D Import Settings (Paper 2D インポート設定を適用)] の順に移動します。

Paper 2D テクスチャ設定では、ミップマップ を削除し、[Filter (フィルタ)] を [Nearest (最近接)] に設定して、[Editor Icon (エディタ アイコン)] を [Compression Setting (圧縮設定)] で使用します。デフォルトの Paper 2D テクスチャ設定は、[Project Settings (プロジェクト設定)] の [Paper 2D - Import (Paper 2D - インポート)] セクションで変更できます。

また、他の マテリアル をスプライトに適用して、アピアランス、色、ライティングの動作を変更することもできます。

アセットを 右クリック して [Sprite Actions] > [Create Sprite (スプライトを作成)] の順に選択して、テクスチャ アセットを個別のスプライトに変換できるようになりました。新しいスプライト アセットは、命名規則に NameOfTextureAsset_Sprite を使用して作成されます。

スプライトを抽出する

単一のキャラクターやオブジェクトのアニメーション フレームを多く含むスプライト シートをインポートする場合は、テクスチャ アセットを 右クリック し、[Sprite Actions] > [Extract Sprites (スプライトを抽出)] の順に選択して [Extract Sprites] パネルを開き、それぞれのフレームを固有のスプライトとして抽出できます。

スプライトの命名規則は フリップブック の実装で重要となるため、後からエラーが発生しないように、名前はスプライト シートからスプライトを抽出する 前 に決定することをお勧めします。[Extract Sprites] ウィンドウの Naming Template プロパティを使用して、抽出したスプライトのセットに名前を付けることができます。

[Sprite Extract Mode (スプライト抽出モード)] 設定を使用して、スプライト シート内のスプライトを分離する方法を選択できます。[Auto (自動)] を使用すると、Unreal Engine では透明な背景やアルファ レイヤーで囲まれているピクセルのグループの輪郭を描画します。この機能で自動的にスプライトの適切なグループ化が検出されない場合、スプライト シートに透明な背景やスプリント間のアルファ空間が含まれない場合、またはサイズを均一にする必要がある場合は、[Sprite Extract Mode] を [Grid (グリッド)] に設定できます。

[Grid] を [Sprite Extract Mode] に使用する場合は、抽出処理にスプライトのサイズと分布が均一なスプライト シートを使用することが重要です。

また、個々のスプライトの X と Y のピクセル長でのサイズと、スプライト間に均一な間隔があるかどうかを知っておくと便利です。

Naming Template プロパティを使用して、スプライトに名前を付ける際に使用する命名規則を定義できます。中括弧 ({}) の外のフィールドは生成された各スプライトで一貫しています。中括弧内では、Naming Start Index プロパティ値から始まる数値が生成され、後に続くスプライトごとに 1 増加します。スプライトを抽出するとき、最初のスプライトは左上のボックスとして認識され、その後は左から右へ進み、新しい行ごとに左に戻ります。

この命名規則は、特にスプライトのセットを使用してフリップブックを作成する場合に考慮することが重要です。選択したスプライトのグループからフリップブックを作成する場合、Unreal Engine では自動的に英数字順にスプライトを整理します。順番は後から変更することができますが、スプライトの抽出中に設定するのが最も便利です。

スプライトのサイズとプロパティへの調整がすべて完了したら、[Extract (抽出)] を選択し、輪郭の各ボックスから固有のスプライト アセットを作成します。

スプライトの抽出プロパティのリファレンス

次の表に、Extract Sprites プロパティとその説明について示します。

サンプル コンテンツ

このドキュメントで使用されているサンプル スプライトをダウンロードして使用できます。画像ファイルを保存するには、画像を右クリックしてコンテキスト メニューから [名前を付けて保存] を選択します。画像ファイルは .png ファイル形式に変換する必要があります。また、背景を削除するには、アルファ レイヤーを追加する必要があります。次に、「スプライトをインポートする」セクションで説明されているメソッドを使用して、画像ファイルをインポートできます。

指定したスプライト シートから スプライト抽出モードの [Grid] を使用してスプライトを抽出する場合、各スプライトは 95 ピクセル × 95 ピクセル になり、それぞれを Cell Width と Cell Height プロパティとして使用して、スプライト シートから均一なサイズのスプライトを抽出できます。

スプライト シートには、スプライト間の間隔が含まれません。

スプライト シートには、次のアニメーション フレームが抽出順に含まれます。

アニメーション	フレーム数
アイドル	4
実行	10
ジャンプ スタート	5
ジャンプ ループ	1
ジャンプ着地	7