妹でもわかるUnrealEngine4

毎日更新? 妹に説明するために書いてるけど、たまにわかってない場合もあるUnrealEngine4を中心としたゲーム制作の話。略すとイモリアル

毎日更新? 妹に説明するために書いてるけど、たまにわかってない場合もあるUnrealEngine4を中心としたゲーム制作の話。略すとイモリアル

3Dウィジェットにはポストプロセスマテリアルが効くし、ライトもあてられる

f:id:una_unagi:20171013224710p:plain

「3Dウィジェットってポストプロセスって効くのかな……と思って試してみたら、特に何もしなくても普通に効いた」

妹「普通のウィジェットは駄目だったよね。なんというか、一番手前の手前に来る感じだし」

「そういうモードもあるよ」

f:id:una_unagi:20171013225938p:plain

Widgetコンポーネントの設定で、Spaceの設定をWorldじゃなくScreenにすると、全てを無視して一番手前に来る。遠近感による大きさの違いもなくなる。ポストプロセスも効かなくなったけど。見た目は完全に普通にウィジェットみたいになる」

妹「こんなのも出来るんだ……キャラクターの上に表示する矢印とか、ウィジェットで表示しようとして色々計算しようとしたのに」

「表示位置が3D空間で設定されてるから、カメラやアクターを移動させても、ずっとアクターの上に見える。Screenモードだと、どの角度からでもまっすぐ見えるように、勝手にビルボード化もされる。こっちでは制御できないというのに注意が必要」

f:id:una_unagi:20171013231443p:plain

「あと3Dウィジェットのライティングというのも試してみた。マテリアルを変更しないと駄目だけど、これもできた。ちゃんと光る」

f:id:una_unagi:20171013231923p:plain

Widget3DPassThroughなんとかっていうマテリアルが3Dウィジェット用なんだけど、このマテリアルはUnlitの設定だから、ライティングが効かない。なのでDefaultLitに変更する必要があるんだけど、エンジン内蔵のマテリアルは変えたくないから、複製したやつを改造する。エミッシブカラーじゃなくベースカラーにつなげば、普通に平面ポリゴンとして光源処理される」

妹「マテリアルも使えるんだ。もうなんでもアリみたい」

「もちろんもっと色々マテリアルで細工もできる。ただこれもポストプロセスと同じで、Screenモードだとマテリアルが無効化されちゃうけど」

妹「これ全部3Dウィジェットでよかったりするのでは?」

「全部マウスで操作するなら普通のウィジェットが楽かもしれないけど、3Dウィジェットだと普通のアクターやコンポーネントと同じ感じで扱えるから、使えないノードとかもない。立体的な演出も普通に立体的に配置するだけでいいし。かなり便利だと思う」

3Dウィジェットで作ったボタンを押す

f:id:una_unagi:20171012230649p:plain

「3Dウィジェットの表示はいいとして、これって押したり出来るのか? というあたりを今日は調査」

妹「押せるの?」

「押せる」

f:id:una_unagi:20171012230833p:plain

「まず最初に思いついたのが、Widgetコンポーネントの中に入ってるウィジェットをGETしてきて、普通にSetInpoutModeで設定すれば動くのでは? という考え。これで別にエラーは出ないんだけど、反応もしなかったから駄目だった。仮に動いたとしても、操作対象が1つしかないのは困る」

ikagamedev.hatenablog.com

「それでこの記事とかを見ながら色々試したんだけど、どうもWidgetInteractionというコンポーネントを使うらしい。Widgetの方はそのままで、それとは別に追加する」

f:id:una_unagi:20171012231106p:plain

「今回はマウスでクリックできるようにしたかったから、普通にマウスをクリックすると、WidgetInteraction的にもマウスをクリックしたっぽい動作をさせるようにした。当然マウスカーソルは表示させる。InteractionDistanceでどの距離のウィジェットまで反応するのか設定」

f:id:una_unagi:20171012231303p:plain

「ちゃんとクリックできた。カーソルが上にある時にボタンの絵が変わる、ホバーの動きもする」

f:id:una_unagi:20171012231649p:plain

「MouseじゃなくてCenterScreenにした場合は、画面中央にマウスカーソルがあるイメージで操作出来る。マウスカーソル非表示+マウスがカメラ回転に割り当てられてるゲームでよくみかける方法」

妹「そのWidgetInteractionというコンポーネントはどこにくっつけるの?」

「多分どこでもいいんだと思う。レベル上に存在さえしていえれば。さっきみたいにマウスとか画面中央にする場合の話だけど。他の入力関係のブループリントがあるクラスにくっつけておけばわかりやすい」

docs.unrealengine.com

「この公式の例みたいに、武器の向いている先のウィジェットを操作とかだと、その武器にくっつけて、座標や回転をあわせる必要がありそう。VRでコントローラーを使って指し示すみたいな場合もこれ」

3Dウィジェットをビルボード化する

f:id:una_unagi:20171011211735p:plain

「昨日の表示でもいいんだけど、もっとビルボードっぽい表示も試してみることにした」

妹「これもカメラの方を向いてるんじゃないの?」

「カメラの方を向いてるといえば向いてるんだけど、カメラ自体を向くと昨日みたいに、横にあるやつは斜めに見える。そうでなく、カメラの画面に対して垂直な角度になっててほしい」

f:id:una_unagi:20171011212640p:plain

「で、カメラの向きとかを数学的に計算しないと駄目かとかちょっと考えたんだけど、カメラと逆の向きにするだけでOKだということに気付いた。どうやって回転させるかという問題はあるんだけど」

f:id:una_unagi:20171011213309p:plain

historia.co.jp

「角度関係はだいたいこの記事にのってるので、この中から適当に探してきて回転させる。そして昨日と同じでZだけつなげる。普通はXとYは0で固定で、別に元の数値をGETする必要ない気がするけど」

妹「全部つなぐと前後の傾きもつくの?」

「いやこのやり方だと前後のことを考慮せずに回転させてるから、つないじゃうと妙な感じになる」

f:id:una_unagi:20171011224721p:plain

「良い回転方法がわからなかったんで、いったんベクトルに変換してから回転させてる。Rotatorのままだと計算がわかりにくいけど、ベクトルなら-1を掛ければ逆向きになるから。もっと速い方法ありそうだけど。それとカメラのひねりは考慮してないから、ひねられると角度がずれちゃうはず」

f:id:una_unagi:20171011224746p:plain

「あとは、この方法だとビルボードの角度は全部同じになるから、アクターやウィジェットごとに計算する必要は全くなくて、どこか一箇所で全部済ませた方が効率よさそう」