2015年4月27日

BLUI: UE4で使えるHTMLベースのUIプラグイン

ニュース

作成 Aaron Shea

大学でコンピューターサイエンスを専攻している現在18歳の Aaron Shea と申します。インディゲームの開発は僕の長年の夢でした。アンリアルエンジン4は、3D ゲームの開発と自身のアイデアのプロトタイプ化を現実のものにしてくれました。 

重要な UI

リッチかつ上手にまとめられた UI は、プレイヤーがゲームを楽しむためにすごく役立つことに気づきました。ゲーム体験を損なわずに、特定のタイトルに必要な機能をすべて兼ね備える UI と言った感じでしょうか。僕はもともとウェブ開発の経歴があります。ビデオゲームにとって重要であると同様に、 UI や UX はウェブにとっても開発の中心であると捉えられています。満足のいくユーザー体験を提供できなければ、ゲームの購買層全体を長期間引き止めることはできません。

ウェブ上には、 CSS3 アニメーション、ダイナミックコンテント、 JavaScript、 WebRTC、 WebAudio など、リッチで応答性がある UI を機能させるテクノロジーが満載です。しかし小さなチームでこれらと同等の機能をゲームに実装することは決して簡単ではありません。

僕がたどり着いた解決法は、ウェブをエンジンへ移動させることでした。

Web + UE4 = Awesome

animated

HTML ベースの UI システムに関する情報を検索している際に、商用ライセンスソリューションをたくさん見かけましたが、オープンソースの妥当な代替ソリューションがあるべきだと思いました。これが HTML ベースのインターフェースの描画を、単純で邪魔にならない API を用いてアンリアルエンジンで実行するプラグイン、 BLUI の開発を始めるきっかけです。BLUI は僕のお気に入りプロジェクトで次回のプロジェクトにも使用する予定です。アンリアルの開発コミュニティへの恩返しとして、誰もが利用できるように Github にソースコードを公開する決定をしました。現時点はまだ開発中ですが、とても便利でフレキシブルなツールに仕上がっています。優れたプラグインシステムが BLUI に "ドロップ・アンド・ゴー" 的な体験を有効にしてくれるため、アンリアルエンジン4の拡張は大変な作業ではありませんでした。

ほとんどの UI システムは (BLUIのような) Chromium Embedded Framework を利用します。つまり、ウェブブラウザで扱う WebAudio、 WebRTC、 Web Sockets などすべての機能を利用します！エンジン内部でミニブラウザを実行するような感じです。独自のユーザーインターフェースを作成する際に、柔軟性の高いウェブページにすることができます。Google Chrome でウェブページを検査するみたいに、エンジンの UI のエレメントを検査するリモートデバッガもあります！

Debugger

ユーザーインターフェースの開発に HTML を利用する魅力は、簡単で興味を引くメインメニューを開発するにあたり、何かを新しく学ばなくてもよい点です。チームにウェブ開発者やデザイナーがいる場合は、そっくりそのまま彼らに開発を任せられます。そして BLUI には彼らが問題なく作業をこなせる全てのテクノロジーを搭載しています。それゆえに、通常のインターフェースビルダーよりもずっと早くインターフェースのプロトタイプを作成することができるのです。

上図は、HTML/Web ベースのインターフェースを使用すると UI システムの実装をいかに迅速に行えるかを示すビデオクリップです。コンパイルやビルドプロセスは一切必要なく、単に保存して使用するだけです。シミュレーションを停止しないで変更の確認を行うために、ブループリントでページをリフレッシュしたりも出来ます。

ほとんどのライブラリはブラウザを通じて何かしらのコミュニケーションを行います。BLUI は C++ メソッドか Blueprint ノードコールを通じて JavaScript を実行します。同様にブラウザからイベントをバインドして、データをエンジンへ送信するために JavaScript で特別なネイティブメソッドをコールします。ゲームシーンのオブジェクトの直接操作さえも可能です。

楽しい機能

アンリアルエンジン4と並行してウェブテクノロジーを利用すると、面白いアイデアが浮かんできます。Node.js を利用すると、クロスプラットフォーム上で機能するチャットを設定します。1つのクライアント（ウェブページ）を必要とするのみです。ゲームとブラウザの両ユーザーは、同じチャットを表示してゲームワールド内のユーザーとお話することができます。

Live Chat

スムーズでアニメートしたメニューの作成に既存ツールを使用することも出来ます。Adobe Edge Animate がこの作業に一番おススメのツールです。このツールを使用すると、まとまり感のある UI をゲームとすぐに接続してくれます。エンジン外部の UI 部分のくテストもできます。つまり、デベロッパーやデザイナーはすばやく起動や実行を行えます。

最終ヒント

UI の開発に HTML の使用を決断されたユーザーに役立つヒントをいくつか紹介します。

  • UMG のように、ページは必ずスケーリング機能と応答性があるデザインにします。UI は複数のスクリーン解像度に対応しなくてはいけません。
  • アセットをゲームへ再度追加する前に、ブラウザウィンドウでアセットをオンザフライで編集およびリロードができるように、開発マシーンでローカルウェブサーバーを実行をお勧め致します。
  • 外部サーバーから外部のリソースをロードする場合でも、プレイヤーのマシーンで実行するブラウザだということを忘れないでください。セキュリティも考慮してくださいね！
  • ローカルストレージや JavaScript を活用します。BLUI には特別なキャッシュディレクトリパスがあります。つまりローカルストレージへ情報を実際に保存して、次にゲームを起動した時にこの情報を使用することができます。JavaScript は記述が簡単で、 HTML をすばやくダイナミックに変更できます。
  • 限りなく柔軟にスケーリングができて JavaScript ライブラリや Adobe Edge などのツールでアニメートできるため、SVG 画像を推奨しています。
  • 創造性を発揮してください！HUD の作成、インタラクティブな PC スクリーン、アニメートしたゲームのビルボードなどを作成するために、ウェブの最高テクノロジーを備えています。！

 

まだ開発中の BLUI ですが、つい先日アンリアルのデブグランツ（支援基金）を獲得したことが分かりました！この受賞を受けて、 BLUI をより洗練させて出来る限り多くのプラットフォームと互換性を持たせるように、開発にさらに時間を割いていく予定です。

BLUI の詳細は、 UE4 開発サイトをご覧ください。

http://ue4.ninja/blui

https://github.com/aaron524/BLUI

フィードバックもお待ちしております。僕の個人のサイトはこちらです。

http://aaronshea.me & https://blog.aaronshea.me

UI 開発を一緒に楽しみましょう！