UE4でWebページを作ってみたかった
Unreal Engine 4 (UE4) その2 Advent Calender 2017
参加9日目の記事です。
今回は私のやってみたかったことをやった結果になります。
タイトルの通りUE4でWebページが作れるのかを試してみました。
結果を先に言うと作れます（軽くはない）
8日の朝に明日は私の番であるということに気がついたので、
バタバタ作ってみました。
その手順を紹介したいと思います。
（時間がなかったんだ！！）
ではやっていきましょう。
準備
今回はUE4 4.18.1を使用しています。
今回のプロジェクトではHTMLビルドを行います。
UE4起動ボタンのドロップダウンを開き、
オプションを選択します。
対応プラットフォームにHTML5にチェックが入っていることを
確認してください。
ONにして適応ボタンを押してください。
プロジェクトを作成する
では本題に入っていきます。
まずは新規プロジェクトを作成しましょう。
今回はUMGをメインで使用するので、
Mobile/Tablet、Scalable 3D or 2D、 スターターコンテンツなしで
Blankプロジェクトを作成します。
Widgetを作成する
プロジェクトが作成できたら、Widgetを作成していきます。
コンテンツブラウザを右クリック、
User Interface→Widget Blueprintを選択します。
名前は適当にWidget_Baseとしました。
※Header、Footer部分になる箇所を分けて作成してもいいかもしれません。
かなり適当な作り方をしたので、
詳しくは書きませんが、
Webページの見た目となる部分を作成します。
Vertical Boxなどを使っていないため、
解像度を変更するとえげつないズレ方をするため、
これを実践する際にはレスポンシブ的な対応をする必要があるかと思います。
今回はボタンの反応などは入れてません。
新規マップを作成する
デフォルトのマップには色々オブジェクトが配置されているので、
新規マップを作成して、何もない空間を作成します。
左上のFile→New Levelを選択します。
Empty Levelを選択します。
マップを作成したら保存しておきましょう。
今回はMap_Indexという名前にしました。
レベルブループリントを編集する
Map_Indexのレベルブループリントを編集します。
上のBlueprintsタブからOpen Level Blueprintを選択します。
レベルブループリントでは、このようにWidgetを
生成/取り付けを行う処理を書きます。
これでMap_Indexを開くとWidget_Baseが取り付けられます。
HTMLファイルの書き出しを行う
処理が大体終わったので、HTMLビルドを行います。
左上のFileからPackage Project→HTML5を選択します。
書き出されました。
localhostで起動する
HTML5LaunchHelper.exeを起動すると、
ローカルのサーバーが立ち上がります。
ポートは8000のようです。
適当なブラウザを開き、localhost:8000のHTMLファイルにアクセスします。
開きました。
サーバーにアップして起動する
ローカルホストで確認できたので、今度はサーバーにアップして
確認してみましょう。
ファイルのアップにはFileZillaを使用しています。
サーバーに書き出されたHTML5ファイルごとアップロードします。
いらないファイルも混ざってるかもですが気にしない。
ブラウザからURLを入力してページを開くと、
localhostと同じように起動しました。
しっかりとボタンの反応などを組み込めば、
Webページとして活用できるかもしれません。
明日はcom04さんの「ぷちコン与太話-マテリアルゲーム作った話-」です。
個人的にものすごく楽しみにしてます！
