ブループリントとレンダー ターゲットでハイト フィールド ペインターを作成する

ブループリントとレンダー ターゲットを使ってハイト フィールド ペインターを作成する方法

Windows
MacOS
Linux

HFP_Header_Image.png

様々なサーフェスを上げ下げする機能があるので、ゲームプレイ エレメントを面白くユニークにすることができます。以下の操作ガイドでは、ブループリントとレンダー ターゲットを使って、プレイヤーが撃つとオブジェクトのサーフェスが上がるハイト フィールド ペインターの作成方法を説明します。まず最初に、ユーザーがハイト フィールド ペインターとインタラクトできるように、Game Mode および HUD ブループリントの新規作成および設定を行います。次に、必要なレンダー ターゲットとマテリアルの作成および設定を行います。最後に、個々の構成要素をすべてまとめるブループリントを作成します。このブループリントが Unreal Engine 4 (UE4) に適用するオブジェクトのサーフェスを高くします。

1 - プロジェク設定

作業を開始する前に、プロジェクト設定の一部としていくつかのアセットを作成する必要があります。

ハイト フィールド ペインターに必要なアクタの作成と設定を開始する前に、Gamemode Override の作成と設定が必要になります。プロジェクトで行う手順を次のセクションで説明します。

コンテンツ サンプル マップを使用していない場合は、このステップは飛ばして MyGame ゲーム モードを使ってください。場所は [Content] > [Blueprints] > [MyGame] です。

HFP_PS_00.png

新規ゲームモードおよび HUD の作成

どこに向かって撃っているのかをユーザーに知らせるクロスヘアを確認するために、新規ゲームモードと HUD ブループリントの作成と設定が必要になります。次のセクションでは、これらのすべてを設定する方法を見て、ハイト フィールド ペインターを使って作業できるようにします。

  1. コンテンツ ブラウザ を右クリックして、[Create Basic Asset (基本アセットの作成)] セクションの [Blueprint Class] オプションをクリックします。

    HFP_BP_Setup_00.png

  2. [Pick Parent Class] ウィンドウの [Game Mode] オプションをクリックして、新規ゲームモードに HighFieldPainterGameMode と名前を付けます。

    HFP_PS_01.png

  3. コンテンツ ブラウザを再度クリックして [Create Basic Asset] メニューを開いて [Blueprint Class] オプションをクリックします。

    HFP_BP_Setup_09.png

  4. [Pick Parent Class] ウィンドウが表示されたら [All Classes] オプションを展開して、検索ボックスに 「HUD」 と入力します。検索結果で見つかった [HUD] オプションをクリックして [Select (選択)] ボタンを押して作成します。

    HFP_PS_02.png

  5. 新規作成した HUD ブループリントに HeightFieldPainterHUD という名前を付けて、HighFieldPainterGameMode ブループリントをダブルクリックして開きます。

    HFP_PS_04.png

  6. HighFieldPainterGameMode の [Details (詳細)] パネルの [Classes] セクションで、[HUD Class] を新規作成した [HeightFieldPainterHUD Blueprint] に設定します。

    HFP_PS_03.png

  7. 次に、HeightFieldPainterGameMode ブループリントを コンパイル および 保存 して、コンテンツ ブラウザでダブルクリックして HeightFieldPainterHUD ブループリントを開きます。

    HFP_PS_05.png

  8. HeightFieldPainterHUD ブループリント内の イベント グラフ をコピーして、以下のブループリント コードをグラフにペーストします。

    Copy Node Graph

    HFP_PS_06.png

    ブループリントは必ずコンパイルおよび保存して、使える状態にしておきましょう。

    このブループリントは、ゲームの実行中にプレイヤーの画面の中央にくるように特定のマテリアルを描画するように HUD に命令します。すべて正しく設定されているか確認するために、[Play (再生)] ボタンを押してゲームを実行します。以下の画像のように画面のど真ん中にクロスヘアがあるはずです。

    HFP_PS_07.png

クロスヘアが画面上にない場合、Draw Material ノード上の Material 入力が Material 入力への何かしら入力になっているかを確認してください。 

HFP_PS_08.png

レベルと HUD の作成はこれで完了です。次のセクションでは、UE4 で使用する設定について説明します。

2 - 必要なアセットの作成と設定

Height Field Painter ブループリントを作成する前に、UE4 コンテンツ ブラウザで以下のアセット タイプを作成する必要があります。次のセクションでは、これらのアセットの設定方法と、認識しておく必要のある特別なプロパティについて説明します。

ここから先の手順は UE4 プロジェクトの特定のタイプに限定されず、4.13 以降の UE4 を使ったすべてのプロジェクトで使用できます。

  • Render Target

  • Material

  • Blueprint (アクタのベース)

レンダー ターゲットの作成と設定

  1. 手順は、コンテンツ ブラウザ の右クリックで表示されるメニューから [Create Advanced Asset (詳細アセットの作成)] > [Materials & Textures (マテリアルとテクスチャ)] を選んで [Render Target] オプションを選択します。

    HFP_RT_Creation_00.png

  2. 新規作成したレンダー ターゲットに RT_Height_Filed_Painter という名前を付けて [Save All (すべて保存)] ボタンを押して保存します。

    HFP_RT_Creation_01.png

マテリアルの作成と設定

  1. コンテンツ ブラウザを右クリックして [Create Basic Asset (基本アセットを作成)] リストから [Material] オプションから新規マテリアルを作成し、MAT_HeighfieldPainter という名前を付けます。

    HFP_Material_Creation_00.png

  2. コンテンツ ブラウザで MAT_HeightfieldPainter マテリアルを選択して右クリックします。表示されたメニューの [Common (共通)] セクションで [Duplicate (複製)] オプションを選択してマテリアルのコピーを作成し、それに MAT_ForceSplat という名前をつけます。

    HFP_Material_Creation_01.png

  3. MAT_HeighfieldPainter マテリアルをダブルクリックして開き、Main Material Node を選択します。[Details (詳細)] パネルの [Material] セクションで以下のパラメータを設定します。

    • Shading Model: Unlit (ライティング無し)

    HFP_Material_Creation_04.png

  4. MAT_HeighfieldPainter マテリアルは World Position Offset 入力を使って、適用しているスタティックメッシュ頂点の Z の高さを上げます。以下の画像の上にマウスを当てて、[Copy Expression Graph] オプションをクリックし、与えられたマテリアル コードを MAT_HeighfieldPainter に貼り付ければ、自分のマテリアルへコピーすることができます。

    Copy Expression Graph

    HFP_Material_Creation_05.png

    完了したら、必ずマテリアルを適用および保存して、使えるようにしてください。

  5. MAT_ForceSplat マテリアルを開いて Main Material Node を選択します。[Details (詳細)] パネルの [Material] セクションで以下のパラメータを設定します。

    • Blend Mode: 加算ブラシ

    • Shading Model: Unlit (ライティング無し)

    • Allow Negative Emissive Color: チェックを入れる

    HFP_Material_Creation_02.png

  6. MAT_ForceSplat マテリアルはハイト フィールドのサーフェスを高くするためのペイント ブラシの役割をするので、サイズと強度を制御するオプションが必要になります。以下の画像の上にマウスを当てて、[Copy Expression Graph] オプションをクリックし、与えられたマテリアル コードを MAT_ForceSplat に貼り付ければ、自分のマテリアルへコピーすることができます。

    Copy Expression Graph

    HFP_Material_Creation_03.png

    完了したら、必ずマテリアルを適用および保存して、使えるようにしてください。

必要なアセットの作成はこれで完了です。次のセクションでは、ハイトマップ ペインターを作成するために、これらのアセットをすべてリンクさせるブループリントの作成方法を説明します。

3 - ブループリントの設定

レンダー ターゲットと必要なマテリアルを設定して使用可能な状態になったら、ブループリントでそれらを全部つなげます。次のセクションでは、Height Field Painter ブループリントの各部分の設定方法を説明します。

ブループリントの作成と変数の設定

  1. コンテンツ ブラウザ を右クリックして、[Create Basic Asset (基本アセットの作成)] セクションの [Blueprint Class] オプションをクリックします。

    HFP_BP_Setup_00.png

  2. [Pick Parent Class] ウィンドウから [Actor] を選択して、HeightFieldPainter と名前を付けます。

    HFP_BP_Setup_01.png

  3. HeightFieldPainter ブループリントをダブルクリックして開き、[Event Graph] タブをクリックします。イベント グラフが開いたら、次の変数を追加します。

    HFP_BP_Setup_02.png

    変数名

    変数型

    デフォルト値

    HeightfieldRT

    Texture Render Target 2D

    N/A

    PainterMaterialInstance

    Material Instance Dynamic

    N/A

    MouseDown

    Bool

    N/A

    ForceSplatMID

    Material Instance Dynamic

    N/A

    InteractionDistance

    Float

    1000.0

    BrushSize

    Float

    0.04

    BrushStrength

    Float

    1.0

コンポーネントの設定

[Components] タブでの中の [Add Component (コンポーネントを追加)] ボタンを押して、Static Mesh コンポーネントをブループリントに追加します。Static Mesh コンポーネントを追加したら、その Static Mesh コンポーネントを選択して次のオプションを設定します。

HFP_BP_Setup_06.png

セクション

プロパティ

必要なアセット

Transform

Mobility

N/A

Movable

Static Mesh

Static Mesh

SM_Plane1000_512

N/A

Materials

Material

HeightfieldPainterMaterial

N/A

Collision

Generate Overlap Events

N/A

Checked

Collision

Collision Presets

N/A

OverlapOnlyPawn

コンストラクション スクリプトの設定

コンストラクション スクリプトは、2D レンダー ターゲットの作成と割り当てに加えて、必要な動的マテリアルインスタンスの作成と割り当てに使用します。まだ設定が済んでいない方は、[Construction Script] タブをクリックして、次のコードをブループリント コンストラクション スクリプトをコピーします。

Copy Node Graph

HFP_BP_Setup_03.png

Trace From Camera 関数の設定

この関数の実装方法は 2 通りあります。1 つ目のメソッドは計算が少し必要で、主に平面または他のフラットなサーフェス上で機能します。2 つ目のメソッドは Find Collisoin UV ノードを使ってさらにメモリが必要となりますが、形状に関係なく (UV シームでは依然としてアーティファクトが発生) すべての Static Mesh Component で機能します。以下の実装方法があります。

実装方法を選んでください。

Method 1

Method 2

スタティックメッシュ上で高くする位置を決めるために使う関数です。プレイヤーのカメラの中心からワールドの中へ光線をキャストして位置を決定します。その光線とスタティックメッシュの交差位置が、高くする位置になります。Trace from Camera 関数の設定は以下の手順に従います。

  1. [Functions (関数)] タブ上にある小さな (白い) プラス記号をクリックして、新規関数を作成し、「TraceFromCamera」 と名前を付けます。

    HFP_BP_Setup_04.png

  2. まだの場合は TraceFromCamera 関数を開き、以下の画像の上にマウスを当てて、[Copy Expression Graph] オプションをクリックし、コードを選択して、TraceFromCamera 関数へコピーペーストして、次のブループリント コードをブループリントへコピーします。

    Copy Node Graph

    HFP_BP_Setup_05.png

    ブループリントは必ずコンパイルおよび保存して、使える状態にしておきましょう。

イベント グラフの設定

必要な部分の作成と設定がすべて完了したら、これらすべてをイベント グラフの中で接続します。以下の画像の上にマウスを当てて、[Copy Node Graph] オプションをクリックし、与えられたブループリント コードを Height Field Painter ブループリントに貼り付ければ、完成したブループリントのコードを自分のブループリントへコピーすることができます。

Copy Node Graph

HFP_BP_Setup_07.png

ブループリント コードをコピー ペーストしても Event Begin Play ノードはグラフに追加されません。Event Begin Play ノードを追加する時に、それが Enable Input 入力に接続していることを確認してください。

HFP_BP_Setup_08.png

ブループリントの設定はこれで完了です。次のセクションでは、UE4 でハイトマップ ペインターを使用するための設定について説明します。

このメソッドを使うには、エディタで [Support UV from Hit Result] 機能を有効にします。この方法に関する詳細は、トレースから UV 座標を取得する を参照してください。

  1. [Functions (関数)] タブ上にある小さな (白い) プラス記号をクリックして、新規関数を作成し、「TraceFromCamera」 と名前を付けます。

    HFP_BP_Setup_04.png

  2. まだの場合は TraceFromCamera 関数を開き、以下の画像の上にマウスを当てて、[Copy Expression Graph] オプションをクリックし、コードを選択して、TraceFromCamera 関数へコピーペーストして、次のブループリント コードをブループリントへコピーします。

    Copy Node Graph

    HFP_BP_Setup_01.png

    ブループリントは必ずコンパイルおよび保存して、使える状態にしておきましょう。

イベント グラフの設定

必要な部分の作成と設定がすべて完了したら、これらすべてをイベント グラフの中で接続します。以下の画像の上にマウスを当てて、[Copy Node Graph] オプションをクリックし、与えられたブループリント コードを Height Field Painter ブループリントに貼り付ければ、完成したブループリントのコードを自分のブループリントへコピーすることができます。

Copy Node Graph

HFP_BP_Setup_02.png

ブループリント コードをコピー ペーストしても Event Begin Play ノードはグラフに追加されません。Event Begin Play ノードを追加する時に、それが Enable Input 入力に接続していることを確認してください。

HFP_BP_Setup_08.png

ブループリントの設定はこれで完了です。次のセクションでは、UE4 でハイトマップ ペインターを使用するための設定について説明します。

4 - 最終結果

Height Field Painter ブループリントで必要な部分がすべて準備できたら、Height Field Painter が動くかどうかを確認します。それでは、このツールを UE4 プロジェクトで使用する方法を説明します。

Height Field Painter ブループリントの使用方法

  1. コンテンツ ブラウザの Height Field Painter ブループリントをレベルにドラッグし、レベルのニーズを満たす位置に配置します。

    HFP_BP_Use_00.png

  2. メインツール バーの [Play (プレイ)] ボタンを押して、レベル内に置かれた Height Field Painter ブループリントの正面 (すぐそば) にプレイヤーをナビゲートします。

    HFP_BP_Use_01.png

最終結果

サーフェスの高さを上げるには、目標位置にクロスヘアがくるようにビューを調節して、マウスの左ボタンを押して、スタティックメッシュを高くします。マウスを移動しながらマウスの左ボタンを押し続ければ、スタティックメッシュの高さは上がり続けます。設定がすべて正常に行われると、以下の動画のようになるはずです。

ブループリントとレンダー ターゲットを使ってスタティックメッシュ頂点を操作する方法のひとつを紹介しましたが、これ以外にも用途は限りなく広がります。プレイヤーと背景の両方の変形を可能にする影響エフェクトの作成から、プレイヤーがプレイするワールドでリアルなエフェクトを与える機能まで、Height Field Painter ブループリントは様々なゲームプレイの役割や要件に合わせた使い方ができます。

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