Paper 2D スプライト

UE4 のスプライトの説明とその作成方法。

Paper 2Dスプライト とは、完全に Unreal Engine 内で作成されるワールドでレンダリングできる Texture Mapped Planar Mesh (テクスチャ マッピングされる平面的なメッシュ) および関連マテリアルのことです。簡単に言うと、Unreal Engine で 2D 画像を迅速かつ簡単に描画する方法です。

スプライトは、 Unreal Engine の スプライト エディタ でも編集できます。スプライト エディタには以下の 4 つのモードがあります。View モードは、スプライトおよび一般統計をプレビューするためのものです。Edit Source Region モードはフルソーステクスチャを表示して、個別のスプライトを構成するソーステクスチャ内部の領域設定を可能にします。Edit Collision モードは、スプライトのコリジョン形状を表示し、編集できるようにします。Edit RenderGeom モードは、スプライトのレンダリング ジオメトリを編集できるようにします。

スプライト アセットのコレクションができたら、フリップブック を作成してアニメートできます。これにより、フリップブックに追加されたスプライトを順次再生します。詳細は「フリップブック」を参照してください。

スプライトを作成する

スプライトは他のアセットと同様に コンテンツ ドロワー で作成します。ブランク アセットとしてゼロから作成、他の既存アセットから作成、またはインポートしたデータを使用して作成することができます。

ブランクの Sprite アセット

ブランクの Sprite アセットの作成方法

  1. コンテンツ ドロワー[+Add (追加)] ボタンをクリックし、Paper2D[Sprite] を選択します。

    Under Paper2D select Sprite

    コンテンツ ドロワー 右クリック しても、同じコンテキスト メニューを表示させることができます。

  2. 作成された Sprite アセットに名前を付けます。

    Name the new Sprite asset

  3. スプライトは作成されましたが、まだ保存されていません (左下隅のアスタリスク記号が未保存であることを表します)。

    The Sprite has been created but has not been saved yet

    [Save All (すべてを保存)] ボタンをクリックして、インポートした画像を保存します。

  4. この新規の Sprite アセットを ダブルクリック して スプライト エディタ で開きます。

  5. [Details (詳細)] パネルで Source Texture プロパティを使用してテクスチャをスプライト アセットに割り当てることができます。

    You can assign a Texture to the Sprite asset using the Source Texture property

スプライト エディタ でのスプライトの作業の詳しい情報については「スプライト エディタ リファレンス」をご覧ください。

テクスチャからの単一スプライト

既存の Texture アセットからスプライトを作成する方法

  1. コンテンツ ドロワー で Texture アセットを 右クリック して、[Sprite Actions] で [Create Sprite (スプライトを作成)] を選択します。

     Right-click on the Texture asset then under Sprite Actions choose Create Sprite

  2. 作成された Sprite アセットに名前を付けます。

    Name the new Sprite asset

スプライトシート テクスチャからの一連のスプライト

スプライトシート テクスチャから一連のスプライトを作成する方法

  1. コンテンツ ドロワー でスプライト シートのテクスチャを 右クリック して、[Sprite Actions] で [Extract Sprites (スプライトを抽出)] を選択します。

    Right-click on the Sprite Sheet Texture then under Sprite Actions choose Extract Sprites

  2. 個々のスプライトが自動的に抽出され、コンテンツ ドロワー に追加されます。

    Individual Sprites will be automatically extracted and added to the Content Drawer

JSON ファイルからインポートする

Paper 2D には、 Adobe Flash CS6Texture Packer などのツールからエクスポート可能な JSON 形式のスプライト シートの記述のためのインポータが含まれます。参照されたテクスチャがあればインポートし、各スプライトのスプライト アセットを作成します。インポータは、すべてのスプライトはアニメーションのフレームであると見なします。そのため、個々のスプライトに加えて常にフリップブックを作成します。不要であれば、生成されたフリップブックを削除することができます。

インポートのオプションの詳細は Paper 2D インポートオプション を参照してください。

スプライト マテリアルを作成する

Paper 2D のプラグインには、基本マテリアル一式が含まれます。こうしたマテリアルでは、テクスチャをサンプリングし、頂点カラーで乗算し、不透明、マスク、半透明のテクスチャに対して Lit (ライティング有) と Unlit (ライティング無) のバリエーションがあります。スプライトとフリップブックのデフォルトのマテリアルは、Unlit Masked です。

The Paper 2D plugin includes a set of basic Materials that sample a Texture and multiply it by the Vertex Color

カスタム仕様のスプライト マテリアルを作成する

カスタム仕様のスプライト マテリアルの作成は、既存マテリアルの 1 つを複製して作成、または コンテンツ ブラウザ で新規マテリアルを作成して行います。スプライトがレンダリングされると、スプライト アセットで定義されたテクスチャはマテリアルの SpriteTexture という名前のテクスチャ パラメータに繋がります。マテリアル エディタSpriteTextureSampler ノードを配置することで、この作業が自動的に行えます。スプライト インスタンスはカラーを頂点カラーとして引き渡しますが、マテリアル内では色調を弱めるだけでなく全ての事に使用できます。

Unreal Engine のドキュメントを改善するために協力をお願いします!どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
キャンセル