みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

話しかけるときなんかのマーカーみたいなやつを作ってみる

※ この記事は 内容に誤りがあったため 内容を一部加筆修正しています。 Ver 4.17で検証・作成しています(2019/4/25)

 

今回は、3DのRPGで、NPCに話しかける時なんかに、頭の上につくマーカーみたいなやつを作ってみます。

UIのプロトタイプ的に気軽に試そうと思うので、材料はエンジン内のものだけで作ります。またワールド内に複数配置するのを前提として「タグ」を利用してみます。

 

f:id:hiyokosabrey:20171006002127j:plain

 

新しいプロジェクトから

プロジェクトのテンプレを Third Person にしてスターターコンテンツありで始めます。

f:id:hiyokosabrey:20171004232538p:plain

f:id:hiyokosabrey:20171004231630j:plain

 

ポップするやつを用意

こんな▼三角形のマーカーとキャラ名という構成にします。

まずは名前表示用のWidget Blueprintから。名前は適当で。

f:id:hiyokosabrey:20171006192049p:plain

まずはキャンバスにテキストブロックを一つ配置します。

f:id:hiyokosabrey:20171006190653p:plain

アンカーは上端中央。

f:id:hiyokosabrey:20171006191023p:plain

アライメント X0.5 にするとポジション X0.0 でセンタリングされます。

f:id:hiyokosabrey:20171006191045p:plain

f:id:hiyokosabrey:20171006191205p:plain

isVariable にチェックを付けて、関数で中身を書き換えるようにします。

f:id:hiyokosabrey:20171006191540p:plain

関数のInputs(引数)は、String型やText型でも問題ないですが、値を渡すときのことを考えてここでName型からText型にキャストします。

 

 Widgetブループリントはここで完成です。

 

 

次に、マーカーのブループリント。

Blueprint (Actor型)を一つ用意します。名前は適当で。

f:id:hiyokosabrey:20171006192347p:plain このブループリントがポップアップすることになります。

 

▼のキャラは、プリセットで用意されている Cone(円錐) を利用します。

f:id:hiyokosabrey:20171006192713p:plain

コンポーネントを追加して、サイズをイイ感じに変更します。

f:id:hiyokosabrey:20171006193003p:plain

Location の Zは高さです。基本上向き ▲ なので、Rotation X を回転させて ▼ にします。

ここで点滅させるためのマテリアルを用意します。

f:id:hiyokosabrey:20171006193348p:plain

光源処理はしないので Unlit です。

f:id:hiyokosabrey:20171006193546p:plain

 

これを ▼ に適用します。エディタのDtailes(詳細)パネルにあるMaterials です。

f:id:hiyokosabrey:20171006193835p:plain

続けてコリジョンの設定を変更します。

f:id:hiyokosabrey:20190425235227p:plain

Generate Overlap Events のチェックを外すだけでもいいのですが、このマーカー自体コリジョンは不要なので、Collision Presets を No Collision にしておきます。

 

 

次に、Widgetを追加します。検索すると見つけやすいです。

f:id:hiyokosabrey:20171006194245p:plain

Detailsタブで、作ってあったWidgetをセットします。

f:id:hiyokosabrey:20171006194629p:plain

Widgetのポジションは、▼ の少し上あたりにします。

 

Widgetにもコリジョンの設定があるので、▼同様に外しておきます。

f:id:hiyokosabrey:20190425235227p:plain

 

 

キャラがの用意が整ったので、ブループリントを触っていきます。

 

まず変数を2つ用意します。一つは▼の回転用(Float型)、もうひとつはキャラ名(Name型)を受け取るようです。

f:id:hiyokosabrey:20171006194945p:plain

Name型の変数は、Expose on SpawnInstans Editable にチェックを付けておきます。

f:id:hiyokosabrey:20171006195246p:plain

Expose on Spawn にチェックをつけておくと、スポーンさせられた時点で値を受け取ることができます。

そこで Event BeginPlay でこの変数の中身をWidgetの中の関数に渡します。

f:id:hiyokosabrey:20171006195757p:plain

あとは▼をくるくる回してやります。

f:id:hiyokosabrey:20171006200208p:plain

SetRelativeRotation ノードは 引数の Rotate ピンを分解して使います。

上下逆さまにするために、X軸に固定値の 180 を。 Yは変化しなくていいので 0。

Z軸は Event Tick から出力される値をもらって利用しています。ただ値が小さすぎるので100倍しています。スピードを変えるならこの倍率を調整します。

再生中、永遠に加算され続けるので、 (剰余)ノードを入れて 0~360 で循環するようにしています。

右に続いているのは、キャラ名のWidgetが常にカメラの方を向く処理です。

f:id:hiyokosabrey:20171006200932p:plain

ひとまずこれでポップするやつは完成です。

このブループリントに出現の演出と、消える時の演出を加えるとより豪華になります。

 

NPCのブループリントを仕込む

つぎにNPCとなる、 Blueprint (Actor型)を一つ用意します。名前は適当で。

f:id:hiyokosabrey:20171004232411p:plain

作ったBlueprint は空っぽなので、何かオブジェクトを持たせます。

左上の +Add Componet ボタンでスタティックメッシュを呼び出します。

f:id:hiyokosabrey:20171004233852p:plain

コンポーネントにスタティックメッシュが追加できたら、それを選択して Details(詳細)タブから適当なスタティックメッシュを選択します。とりあえずあのよく見る椅子をチョイス。

f:id:hiyokosabrey:20171004233839p:plain

↓こうなります。

f:id:hiyokosabrey:20171004234113j:plain

ついでにこのモデル自身のコリジョン設定を変更しておきます。

DetailsタブにCollisionの項目があるので、そこの Collision Preset を Default にしておきます。

f:id:hiyokosabrey:20171004234634p:plain

 

もう一つ必要なコンポーネントがあります。マーカーを表示するためのトリガーとなるコリジョンです。

f:id:hiyokosabrey:20171004234941p:plain

Viewportで確認しながら、コリジョンのサイズと位置を調整します。

f:id:hiyokosabrey:20171004235238p:plain

 

この後イベントを仕込んでいきます。

専用のイベントノードを2つ使います。 

f:id:hiyokosabrey:20171006203143p:plain

これを取り出す方法が2つあって、一つはコンポーネントのリストで右クリックする方法。Add Event > Add On ~

f:id:hiyokosabrey:20171006202655p:plain

もう一つは、Detailsタブの下の方にあるEvent項目の緑のボタン。

f:id:hiyokosabrey:20171006203041p:plain

どちらも対象のコンポーネントを選択している状態で取り出すことになります。

 

イベントノードが取り出せたら、ノードをつないでいきます。

 

まずは、On Component Begin Overlap イベントから。

f:id:hiyokosabrey:20190425234628p:plain

 


自身にタグが設定されていれば、▼をスポーンするという流れです。

右端は、Spawn Actor from Class ノードのReturn(戻り値)ピンから、Promote to Variable(変数へ昇格)したものです。

この変数化したものは用が済んだら消す処理で使います。

 

で、さっそく On Component End Overlap イベントで使います。

f:id:hiyokosabrey:20190425231923p:plain

コリジョンから出たらこのイベントが発動して、スポーンされていたマーカーは消えます。

スポーンしてなくても、このイベントは発動するので、Destroyする対象が無いということで、Warning と Error が Outputログに吐き出されてしまいます。中身が有効かどうかを、 Is Valid ノードで調べています。

  

これで、準備完了です。

 

 

ワールドに置いていく

できたブループリントをワールドに配置していきます。

f:id:hiyokosabrey:20171006205158j:plain

置いたら、このNPC(椅子)のDetailsタブからタグを設定します。

タグを設定したいアクターを選んだ状態で、Actor 項目の Tags を探します。

f:id:hiyokosabrey:20171006205441p:plain

ここに名前を入れていきます。

f:id:hiyokosabrey:20171006205736p:plain

他のNPCにもいろんな名前をセットしていきます。

 

再生して動作を確かめます。

f:id:hiyokosabrey:20171006210349j:plain

 

 この方法の最大のメリットは、同じ共通のアセットでも、ワールドに配置してから自由にタグを使って情報管理できる点です。タグは配列なので複数の値を扱うことができます。文字で持たせることになりますが、セリフなどのテーブルを参照するためのIDを仕込んだり、ストーリーの進行などに応じたステータス情報なんかも持たせると便利だと思うのですがいかがでしょうか。

 

f:id:hiyokosabrey:20171006212108j:plain

 

 

今回はこの辺にしておきます。

ではでは ステキにポップする▼ライフを!

 

 

 

ちょっと言い訳とか

だんだん更新間隔が広がっていますな・・・。

いろいろネタを思いつくものの、最近エンジンを起動すると発熱がすごくて、扇風機をすぐ横に置いてるんだけど腕ばっかりが冷えてきて、気合を入れるためのなんかいい感じのBGMを探してるうちに結局寝落ち、みたいな日々が続いていました。

ブログの更新が、忙しい時のストレス発散になってたんだと思う。忙しさが一段落してちょっと時間にゆとりができた途端、滞ってた他のものを消化し始めて、気が付くともう神無月。あと3か月もしたら年が明けてるという・・・

世の中のゲームUIデザイナーの一助になれば、そしてそこからUE4のユーザーが増えて、UE4がUI開発の でふぁくとすたんだーど になればいいなぁ。という壮大な野望を夢見て始めたので、まだまだ頑張らねば。