Paper 2D スプライト

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

Windows
MacOS
Linux

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

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

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

スプライトを作成する

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

ブランクの Sprite アセット

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

  1. コンテンツ ブラウザ[Add New (新規追加)] ボタンをクリックし、Paper2D[Sprite] を選択します。

    SpriteCB.jpg

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

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

    MySpriteCB.jpg

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

    SpriteSaveAll.jpg

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

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

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

    DetailsSprite.jpg

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

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

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

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

    ChooseSprite.jpg

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

    sprite_create_name.png

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

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

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

    sprite_extract_menu.png

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

    sprite_extract_result.png

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

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

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

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

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

customMaterial.png

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

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

Select Skin
Light
Dark

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback