LoginSignup
2

More than 3 years have passed since last update.

posted at

updated at

UE4でホワイトボードを作る

はじめに

こちらの動画(Unreal Engine 4 Tutorial - Making a Usable Whiteboard)を参考に、以下のようなホワイトボードを作ったので、復習も兼ねて記事を書いてみることにしました。

どんなことしてるの?

まず、ホワイトボードを作るにあたって大まかな処理の流れを見てみましょう。
1.png

つまり、線を書いているように見えますが無数の円の連なりで線のように見せているということです。

つくってみる

今回は動画と同様、FirstPersonテンプレートで作成します。また、StarterContentのアセットを使用するので追加しておきましょう。

レンダーターゲットを作成

2.png
まずは、コンテンツブラウザ右クリックから「Material & Textures」の項目から上の画像のアイコンの「Canvas Render Target」を作成します。名前は「RT_WhiteBoard」としておきます。
3.png
作ったアセットを開き、Deteailsタブの「SizeX」と「SizeY」を512にしておきます。
4.PNG
次に、Project Settingsを開き上の画像の項目にチェックを入れます。
検索ボックスで「UV」と打ち込むと出てきます。
5.PNG
この項目にチェックを入れないと後で使用するこちらのノードが正常に動作しません。

マテリアルを作成

まず、コンテンツブラウザ右クリックからマテリアルを作成します。名前は「M_WhiteBoard」としておきます。
6.PNG
このようにノードを組みます。「Texture Sample」には先程作成したレンダーターゲットを指定します。
「PenColor」の値を変更することで、ペンの色を変えることができます。また、その上の3Vectorが背景色にあたります。今回はホワイトボードを作るので白色で固定にします。
これでホワイトボード側のマテリアルは完成です。

次にマーカーの役割をするマテリアルを作成します。名前は「M_WhiteBoardMaker」としておきます。
7.PNG
8.PNG
このようにノードを組みます。「DrawSize」の値を変更することで線の太さを変化させることができます。「DrawLocation」にはUVのどの地点に円を描画するのかという座標の情報を渡します。
これでマーカーの役割をするマテリアルは完成です。

UVについて

ここで「UVの座標ってなんだ?」とか「さっきもUVなんとかの設定とかしたなぁ...」とか思う方もいるのではないでしょうか。
ブループリントの作成に入る前に先程のノードを交えて説明しておきたいと思います。
9.PNG
UV座標とは例えば先程のテクスチャの左上が原点だとすると、右下は(512 , 512)ではなく(1 , 1)となる座標です。例えば真ん中であれば(0.5 , 0.5)となります。
5.PNG
そして先程のこのノードですが、ライントレースなどで得られた結果(Hit Result型)からUV上の座標を取得するノードになります。つまりこのノードのおかげでUV座標上の正確な位置が取得できるということです。

これを踏まえてライントレースをしたりするブループリントを組んでいきましょう。

ホワイトボードアクターを作成

まず、コンテンツブラウザ右クリックからアクタークラスのブループリントを作成します。名前は「BP_WhiteBoard」としておきます。
10.PNG
Static Meshコンポーネントを追加し、Deteailsタブからスタティックメッシュとマテリアルを設定します。今回はStarterContentの「SM_GlassWindow」を使用します。
StarterContent入れてなかったという方はコンテンツブラウザの「Add New」から「Add Feature or Content Pack to the project」からStarterContentを追加しましょう。
14.PNG
設定したスタティックメッシュ(今回はSM_GlassWindow)を開き、「Collision Complexity」を「Use Complex Collision as Simple」にしておきます。これも正確なUV座標を取得するために必要な設定です。
複雑なコリジョンなどについてはヒストリアさんがわかりやすい記事を公開されています。
[UE4]コリジョンの作成方法のまとめ

11.PNG
このようにノードを組みます。「WhiteBoardMaker」変数はMaterialInstance型です。また、DrawOnWhiteBoardイベントの引数「LocationToDraw」はVector2D型です。
BeginPlayの時には動的にマーカー用のマテリアルを変化させるので、ダイナミックマテリアルインスタンスを作成しています。その次の「ClearRenderTarget2D」関数ではレンダーターゲットの初期化を行っています。書いたものを全削除するような機能を付ける際はこのノードを使うとよさそうです。
DrawOnWhiteBoardイベントでは、イベントの引数がVector2D型、「SetVectorParameterValue」関数の引数はLinerColor型なので
Vector2D --> Vector --> LinerColor
という風に変換しています。そして次の「DrawMaterialToRenderTarget」関数でレンダーターゲットにマテリアルを書き込んでいます。

書き手の処理を作成

今回はテンプレートの「FirstPersonCharacter」に処理を追加します。
12.PNG
ボタンを押しているかの真偽値を格納するbool型の変数を作成し、このようにノードを組みます。変数名は「IsDrawing」としておきます。これでボタンを押している間だけtrueになる変数ができました。
13.PNG
次にTickイベントでこのようにノードを組みます。ここでは、ボタンを押している間、視点カメラからライントレースをして当たったアクターがホワイトボードならUV座標を求めて「DrawOnWhiteBoard」イベントを呼び出してあげます。
注意点として「LineTraceByChannel」関数の「TraceComplex」にチェックを入れておきましょう。これをしないとせっかく複雑なコリジョンを使用しているのにライントレースでは簡易的なコリジョンを使用することになります。

ホワイトボードを配置

ホワイトボードアクターをレベルに配置して、それに向かって右クリックを押すと線が書けます。
15.png

おわりに

VRで作れば色んな色でお絵かきできるだけでも面白いものになりそうです。
この機能を使うと、移動した跡のつく雪やキャラクターのメッシュの撃たれた箇所に傷をつけるなど色々なことができそうですね。
また、この方法の問題点として冒頭で説明した通り円を連ねて線に見せているため、すばやく線を引くと下の画像のように途切れてしまいます。
16.png
何か良い対策をご存じの方が居ましたら、教えて頂けると嬉しいです!

綺麗な線を引けるように改良しました!

UE4でホワイトボードを作る -改-

7.png

サンプルプロジェクト

今回作成したプロジェクトはこちらからダウンロードできます。
https://github.com/Naotsun19B/WhiteBoard

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2