【ゲリラアドカレ】UE4ゲーム実装　進捗報告 2日目(素材配置～タイトル画面作り)

【非公式】某会社設立記念ゲリラ Advent Calendar 2016 2日目です。

FlashゲームをUE4で再実装するゲリラアドカレです。

素材配置～タイトル画面作りまでをまとめました。
今回もUE4よちよち初心者レベルです。

・注意
許可を取ってないので通常業務の空いた時間を利用して作成するため、作成中のゲーム、及びアドカレは完成保証がなければ、ゲーム自体もリリースされる保証も皆無なので、あんまり期待しないでください。

#最低限作らないといけない画面

1日目の記事で書き忘れていたので、ここで書きます。
基本、既存ゲームの移植なので、最低限以下の画面を作り直します。

・タイトル画面
・クエスト選択部分
・クエスト画面
・エンカウント演出
・バトル画面
・リザルト画面
・ノベル画面
・収集したカードの図鑑画面

一から作るにしては実装する画面が多いです。
さすが無計画ゲリラでやったので、早速想定より実装画面が多いというミスをしました。

か、完成するのかな……。自信がなくなりました。

とりあえずプロトタイプをつくらないとなので、すぐ作成が終わる画面と最低限、ゲームに必要な画面だけ優先的に作ります。

#タイトル画面を作る
タイトルはサクッと終わりそうなので、タイトル画面を作ってしまいます。

現在行われているHunting100のトップはこの画面になります。

![ゲームトップ.png](https://qiita-image-store.s3.amazonaws.com/0/104377/9362d8e3-d07a-5f32-22b9-c4fbad65667f.png)

今から作るゲームはオフライン専用なのでソーシャル要素皆無ですし、何より時間もないので不要なものはバッサリ切ってシンプルにします。

現段階はこの部分に力を入れるべきではありません。
あればイメージしやすいな程度です。

![エディタ.png](https://qiita-image-store.s3.amazonaws.com/0/104377/14e6621a-abf4-e444-7e75-ca1d43e93169.png)

最終的にこんな感じになりました。

##フォルダ作成～画像素材インポート、レベル作成

まずはフォルダを作ってしまいます。右クリック→フォルダ作成で作れます。
この時点ではこういう風にフォルダを作りました。
![コンテンツブラウザ.png](https://qiita-image-store.s3.amazonaws.com/0/104377/e7c6ef12-9863-c42b-0ca1-194335f57825.png)

続いて画像素材を置きます。
フォルダを開いて、画像をコンテンツブラウザにドラッグ＆ドロップで置きます。
![コンテンツブラウザ1.png](https://qiita-image-store.s3.amazonaws.com/0/104377/9c4d449e-ad1c-3f51-2285-4f4c6a51e941.png)

最後にレベルを作成します。ここではTitleと名づけています。
![コンテンツブラウザ2.png](https://qiita-image-store.s3.amazonaws.com/0/104377/f28edaf0-8fd8-9e0a-6233-a29c4b73c6f9.png)

##マウス操作を有効

マウス操作を有効にしましょう。
[公式ドキュメント](https://docs.unrealengine.com/latest/JPN/Resources/ContentExamples/MouseInterface/MouseControlSetup/index.html)に書いてあることをそのままやります。

このゲームでは全てマウス操作なので、デフォルトで有効になるように設定してしまいます。

PlayerControllerブループリントを作成し、MouseInterfaceのShowMouseCursorとクリックイベントを有効にチェックを入れます。
![マウス設定.png](https://qiita-image-store.s3.amazonaws.com/0/104377/8f1e6df5-56a0-f54c-3f0d-4a2a87578df1.png)

GameModeブループリントを作成し、先ほど作成したOkayerControllerブループリントクラスをセットします。
![マウス設定2.png](https://qiita-image-store.s3.amazonaws.com/0/104377/6e45a4ce-dfa8-1b6e-aa5b-e9bfe42649b8.png)

最後にプロジェクト設定を開き、Default ModesにGameModeブループリントクラスをセットします。
ついでにMapを作成したレベルをセットしました。
![マウス設定3.png](https://qiita-image-store.s3.amazonaws.com/0/104377/afd10f01-50db-84cf-0192-4864453af2f3.png)

##配置

カメラとSpriteを配置します。

まずSpriteを作成します。
テクスチャーを右クリックしてSprite ActionsからCreate Spriteを選択します。
![配置.png](https://qiita-image-store.s3.amazonaws.com/0/104377/543e4798-b608-d903-9052-ba54ab753d61.png)

これでSpriteが生成されます。他のインポートした画像も同じ事をやります。
最終的にこのような感じで配置しました。

![配置2.png](https://qiita-image-store.s3.amazonaws.com/0/104377/465d8055-e861-3a58-f009-2a7cc55dbce4.png)

横から見た図です。Yの値で重なり順が変わります

![配置3.png](https://qiita-image-store.s3.amazonaws.com/0/104377/feb95820-73a5-9a55-62fe-84a2e16e7bd0.png)

最後にカメラの設定です。
２D表示にしたいので、配置したカメラのProjection ModeをOrthographic、Ortho Widthを960に設定します。あとはカメラの位置をいい感じに見えるように調整します。
![カメラ.png](https://qiita-image-store.s3.amazonaws.com/0/104377/736840ca-d189-26fe-be55-4c72ed467000.png)

##タイトルUI作成～表示

単純にボタンだけ作ります。
ウィジェットブループリントクラスを作成し、デザイナー画面でボタンを作ります。
![タイトルUI.png](https://qiita-image-store.s3.amazonaws.com/0/104377/6c6be88c-4a0d-c310-029f-217f241971e4.png)
ボタン画像のDraw AsはImageに設定します。

とりあえずUIを表示したいので、レベルブループリントからウィジェットを作ります。
![UI配置.png](https://qiita-image-store.s3.amazonaws.com/0/104377/d599c26c-c487-de79-73e9-8d84234c09e1.png)

[公式ドキュメント](https://docs.unrealengine.com/latest/JPN/Engine/UMG/UserGuide/CreatingWidgets/index.html)を見ながら、以下のように実装しました。
![レベルBP.png](https://qiita-image-store.s3.amazonaws.com/0/104377/efb38983-1562-85bd-c5f9-eb4d78bd47bf.png)


#タイトル完成

ひとまずタイトルが完成しました。
![ue4Title.png](https://qiita-image-store.s3.amazonaws.com/0/104377/a94b6d43-308c-afe7-f3a4-f9de38681e97.png)

シンプルですがタイトル画面っぽくなったと思います。

次回に続くかもです。