執筆バージョン: Unreal Engine 4.25
|
皆さんこんにちは、ぷちコンは順調でしょうか?僕は百姓を救う忙しい日々を送っています。
今回は、ぷちコンでも使える知識として、サクッとできるタイトル画面の作成方法についてご紹介します。
色々と作成方法はありますが、今回は3D背景を使用した簡単な実装をご紹介したいと思います。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/GIF-2020-08-13-16-01-18.gif)
■目次
①レベルを作る(背景を作る)
②ウィジェットを作る
③ウィジェットを表示する
④カメラを設定する
⑤ボタンを押したらレベル遷移するようにする
おまけ:文字に簡単なアニメーションをつける
①レベルを作る(背景を作る)
まず、Content Browserにレベルを作成します。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog01.png)
アセットを配置して背景を作成します。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog02-1024x626.png)
出来上がりました。
②ウィジェットを作る
Content Browserを右クリックし、User Interface>Widget Blueprintを選択し、作成します。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog16.jpg)
作成したウィジェットをダブルクリックし、UMGの画面を開きます。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog17-1024x676.png)
ウィジェットにTextを配置します。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog18-1024x670.jpg)
タイトルを記入して、配置を整えましょう。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog03-1-1024x506.png)
③ウィジェットを表示する
では、①で作成したレベルを背景に②で作成したウィジェットを表示してみましょう。
①で作成したレベルのレベルブループリントを開きます。
Event BeginPlayから引っ張って、CreateWidgetを選択。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog04.jpg)
②で作成したウィジェットを選択します。これで②で作成したウィジェットが生成されます。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog05.jpg)
生成されたウィジェットはそのままだと表示されないので、作成したWidgetをAdd to Viewportすると画面に表示されるようになります。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog06.png)
この状態でレベルを保存し、プレイするとウィジェットがこのように表示されます。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog07-1024x632.png)
しかしこのままでは、Player Startが置いてある位置に背景が無いので、意図した見た目になりません。
このあとカメラを設定します。
④カメラを設定する
Place ActorからCameraをドラッグしてカメラアクターを配置し、カメラの位置を調整します。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog08-1024x630.png)
①で作成したレベルのレベルブループリントを開き、置いたカメラをドラッグ&ドロップしてブループリントにカメラの参照を配置します。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog20-1024x407.jpg)
右クリックし、Get Player Controllerをブループリントに配置。Get Player Controllerから引っ張りSet View Target with Blendを選択します。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog09-1024x451.jpg)
New View Target with Blendに先ほど配置したCameraActorを繋ぎ、以下のように繋ぎます。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog10-1024x234.png)
プレイを押すと、無事にカメラから映した背景になりました。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog11-1024x629.png)
⑤ボタンを押したらレベル遷移するようにする
レベルブループリントを開き、指定したボタンを押したら次のレベルへ遷移する処理を書きます。
今回はSpace Barを入力したら、Stage01にレベル遷移するようにしました。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog12.png)
プレイし、Space Barを入力したら指定したレベルに遷移することを確認します。
これで、一連の処理が完成です!
■おまけ:文字に簡単なアニメーションをつける
タイトルのテキストをアニメーションさせてみましょう。
ウィジェットを開き、+Animationを選択しアニメーショントラックを追加します。
TimeLineの+Trackを押してアニメーションしたい対象を選択します。
今回は「ボタンを押してね」のテキストを明滅させます。
TextBlockの+を押して、Color and Opacityを選択し、Alphaの値を操作します。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog13-1024x149.png)
UMGのEvent Graphを開き、プレイしたらアニメーションを再生するようにします。
作成したアニメーションを左からドラッグ&ドロップしてPlay Animationを選択します。
アニメーションをループ再生したいので、Num Loops to Playを0に設定します。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/Blog14.png)
完成です。
![](https://historia.co.jp/wp/wp-content/uploads/2020/08/GIF-2020-08-13-16-01-18.gif)
また、今回、草を生やす為にDynamic Grass System Liteというアセットを使用しました。
こちら無料なのでぜひご活用ください。
https://unrealengine.com/marketplace/ja/product/fe0a7c01da854223bda935f111aab4f4