見出し画像

フロントエンドエンジニアがUE4を触って気づいた勘所

PARTYで主にフロントエンドを開発している清滝です。今年のフジロックに合わせてリリースされた「FUJI ROCK `19 EXPerience by SoftBank 5G」というアプリの開発に携わりました。

このアプリは、Unreal Engine 4というゲームエンジンでフジロック会場を完全再現しました。フジロック開催中は、ステージの生中継やステージの盛り上がりがリアルタイムにアプリ内に反映されるなど、フジロックに行けなくても会場を感じられるアプリとして話題になりました。

詳しくはこちらも御覧ください。

今回のお話では、UE4の便利なTipsというよりも、フロントエンドエンジニアが初めてUE4を触ったときにどんなことをしていったらうまく学習することができるのか、というところをメインにお伝えします。
そして、今回はUIの実装をメインに行っていたので、3Dの話はあまりでてきません!

UE4独特な言葉

・BluePrint
・Level


・BluePrint
ビジュアルベースのプログラミング。
何かのプログラム言語に精通していればそれほど難しいこともない。

ブループリントは基本的に、スクリプトをゲームに視覚的に追加していくシステムです。ノード、イベント、関数、そして変数をワイヤーと接続して複雑なゲームプレイ要素を作成します。 ブループリントは、オブジェクト構築、個々の関数、一般的なゲームプレイ イベントなど、様々な目的を持つノードのグラフを使って機能します。これらのノードは各インスタンスに固有で、動作や様々な機能を実装します。

 "ブループリント ビジュアル スクリプティング | Unreal Engine ...."
https://docs.unrealengine.com/latest/ja/Engine/Blueprints/。
アクセス日: 25 9月. 2019。

画像1


・Level 

ビデオ ゲームでプレイする場合、見える、またはインタラクションするすべてのオブジェクトは、レベル に存在します。UE4 の用語では、レベルは スタティックメッシュ、ボリューム、ライト、ブループリントなどの集まりで構成され、これらが連携して機能することで、プレイヤーにとって望ましい体験を実現します。UE4 のレベルは、広大な テレインベースのワールドからいくつかのアクタを含むごく小さなレベルまで幅広いサイズになります。

"レベル | Unreal Engine ドキュメント."
https://docs.unrealengine.com/ja/Engine/Levels/index.html。
アクセス日: 25 9月. 2019。


「見える、またはインタラクションするすべてのオブジェクトは、レベル に存在します。」とUE4のドキュメントで記述のあるように、見た目として出力したいものはレベルに配置する必要がある。
複数のレベルを分けておいて、必要になったときにロードするような仕組みなど、分業して作業を進める際にもとっても大切。
だけど、概念がわかりづらい、、


ビジュアルエディタを使う

2D系のソフトに慣れた人たちは、一旦その知識を捨てます。
2Dと比べると、なぜこんな簡単なことができないんだ、なんでこんなにUIが使いにくいんだ、重い、など文句を言いたくなるけれど、比べてはいけません。
3Dはまた、別の世界なのです。
その世界に自分を合わせてください。

画像2

3D系ソフトはビジュアルエディタの操作がとっても大切、まずはひたすらトレーニングする。
最初に覚えておくことでその後の工数を大きく削減することができるかも。

●エディタの各種視点移動(マウスのボタンをフル活用)
・平行移動(両マウスボタンを押しながらドラッグ)
・回転(右マウスボタンを押しながらドラッグ)
・選択したオブジェクト周りの回転(Alt+左マウスボタン押しながらドラッグ)
●レベルの切り替え方(面倒くさくない方法がきっとある)
・ContentBrowserからではなく、Levelsウィンドウから切り替えるとさくさく切り替えることができる。


UIの構築

オブジェクトのサイズ
Anchorという考え方。どこを起点にして、オブジェクトのサイズを決定するのか。
選ぶアンカーによってtop, bottom, left, right, width, heightなど設定できる項目が変わる。

画像3


auto Layout的なVerticalBox, HorizontalBox

前の要素に応じて自動的にそれ以降のオブジェクトの位置を変更する。
可変な要素がでてくるときなどはこれらを使ってうまくレイアウトする。ここら辺はWebのコーディングの知識があると割とすんなり理解できたし、どんなときに使えばいいのかも大体想像がつく。

画像4


Grid Layout
CSSならfloat:leftとかで一発だが、自力でどの場所に表示するかを計算する。

画像5

画像6

4つずつならべるために計算する。Flashの時はよく書いたロジック。


ブループリント

ビジュアルでロジックを組んでいくという大きな違いはあれど、このプログラム部分に関しては関数の処理をつないでいくやり方なのでおそらくみんなすぐできる。


アニメーション

フジロックEXPerienceアプリでは、プログラムにより位置を変更するようなアニメーションは一切していません。
アニメーションのエディタを使用してすべて作っています。操作感としてはAfterEffectsに近い。

画像7

スライドショーの動きもすべてキーフレームアニメーション。
・左にスライドが消えていく
・左からスライドが出てくる
・右にスライドが消えていく
・右からスライドが出てくる
任意のタイミングでイベントも送出することができるので、見た目はエディタ、ロジックとかかわる部分はイベントで連携、というのがよいとおもう。


恐る恐るプロジェクトを触る

開発者の人数が多いプロジェクトだったので、UE4を触るときには大きくこんな不安がありました。

・変な風に触ってプロジェクトがこわれる
・SVNでロックしてしまって、ほかの人の作業をストップさせてしまう


・変な風に触ってプロジェクトがこわれる
いろいろな操作をする中でたまにプロジェクトに自分の意図しない変更が入ってしまうことがあった。よくよく考えれば依存関係にあるものに修正が入っていることがわかったので完全に自分の知識不足。
その際には、ごり押しせずに一旦再度プロジェクトをSVNのリポジトリからチェックインして、再度操作をやり直すということをしていた。


・SVNでロックしてしまって、ほかの人の作業をストップさせてしまう
できる限り同じファイルを操作しないような構造および開発の環境づくり
・どこからもつながっていないテスト用レベルの作成し、その中で開発
・単体で大丈夫そうだったら、素早く結合


まとめ

今回UE4をつかったプロジェクトに初めて参加させてもらいました。私は普段はWebのフロントエンドエンジニアとして業務を行っており、UE4に限らずゲームエンジンをほとんど触ったことのないレベルだったので本当に苦労しました。しかもネットに情報が少ない…

振り返ってみると大きく時間がかかったというところは以下の点になります。

・UE4の操作の仕方
・UE4独特な用語・概念の把握

逆に言うと、これらに慣れてしまえば、ロジックを組んでいくことはほかのプログラミングとさほど変わらずいける。

今回はとても時間がかかってしまいましたが、次からはコンテンツに集中して実装を進められるのではないかと思います。


______________________________________
PARTYでは未来の体験を社会にインストールすべく、好奇心旺盛なエンジニアを募集してます!


この記事が気に入ったらサポートをしてみませんか?