AG15.タイトル画面の実装
今回実装する機能
シンプルなゲームのタイトル画面を作成していきます。また「PRESS ANY BUTTON」にはフェードするアニメーションを追加していきます。
https://youtu.be/bwOVo49SxtM
PRESS ANY BUTTONに関してはアニメーションでフェードを繰り返すという仕様にします。UIのアニメーションに関してはまだこの本では解説していませんが、シンプルなものなので、できるだけ丁寧に解説していくのでチャレンジして流れを掴みましょう。
①タイトル画面用の背景を用意する
まずタイトル画面のレベルを用意していきます。
メニュー画面の背景としてLEVEL1のステージを使用したいので、LEVEL1をコピーしてそのままペーストします。アセットを保存するか聞かれるので保存をクリックします。名前を「Title」にします。
https://scrapbox.io/files/65d5747d71b19a00248fa26b.png
「Title」のレベルを開きます。
https://scrapbox.io/files/65d574a84dd90c00244364b9.png
LEVEL1とTitleのレベルが似ているので、間違えてLEVEL1の方のレベルでメニュー画面を作っていかないように注意してください。Titleのレベルの方でメニュー画面を作成していきます。
Titleのレベルを開いている事を確認したら、次にゲーム開始時の演出用として追加したBP_StartCameraは削除します。
https://scrapbox.io/files/65d574c07532d000243fd189.png
メニュー用のゲームモードを作成します。Blueprintsフォルダで右クリック > ブループリントクラス > GameModeBaseを選択して名前を「BP_Title_GameMode」にします。
https://scrapbox.io/files/65d574e04185450024b35b97.png
設定からワールドセッティングを開いてゲームモードオーバライドにBP_Title_GameModeを選択します。
https://scrapbox.io/files/65d574ea6cc9170024ae87f5.png
さらに選択したゲームモード > DefaultPawnClass(プレイヤーを決定する項目)をNoneにします。
https://scrapbox.io/files/65d574f35769d80024d1ba64.png
これでプレイすると操作できないただゲーム画面を映す状態になります。
https://scrapbox.io/files/65d5833e3289f800251587ad.gif
ではメニューの背景を映すカメラを設置していきます。全てのクラス > CameraActorをドラッグでレベルに追加します。
https://scrapbox.io/files/65d57504a757e10026a94a0a.png
カメラの位置を決めるために、まずビューポートのカメラの視点をメニュー画面の背景として映したい場所まで移動させます(適当な場所で良いです)。
https://scrapbox.io/files/65d583272bae2200251945c5.gif
その後、設置したCameraActorを右クリックして「オブジェクトをビューにスナップ」します。
https://scrapbox.io/files/65d5751615f88c00244b12af.png
これでビューポートの視点にカメラを持ってくる事ができました。チュートリアルと同じトランスフォームにする場合はこちらにしてください↓同じでなくも構いません。
位置 (X=919.693601,Y=-6178.375969,Z=293.155997)
回転 (Pitch=-8.400000,Yaw=65.400001,Roll=0.000000)
オブジェクトをビューにスナップとは？
オブジェクトをビューにスナップで、アクタをビューポートのカメラ視点の位置に持ってくる事ができます。特にカメラの位置を調整するにはこの機能が便利なので活用していきましょう!
🐱しかしこの状態でプレイしてもカメラは設置したカメラの映像にはなりません。これはカメラの優先順位(AutoActiveforPlayer)が正しく設定されていないためです。
CameraActorを選択した状態でAutoActiveforPlayer(カメラの優先順位)をPlayer0にします。
https://scrapbox.io/files/65d5753c76c421002542a3e3.png
これでプレイします。設置したカメラの視点になりました。
https://scrapbox.io/files/65d5830c02f9c60023a9cbbb.gif
現状、プレイ画面の比率によって黒帯が入ってしまうので入らないように設定します。CameraActorを選択した状態でConstrainAspectRatioのチェックを外します。
https://scrapbox.io/files/65d575525a41300025cbd246.png
これでプレイしても画面に黒帯が入る事は無くなりました。
https://scrapbox.io/files/65d57559500ab0002527fbdc.png
😺これでタイトル画面の背景の部分は完成しました。
②タイトル画面を作成する
ではここからはこのタイトル画面↓のUIを作成していきます。
https://scrapbox.io/files/65d5757960668000256a38fd.png
まずはUIフォルダにて、右クリック > ユーザーインターフェース > ウィジェットブループリント > UserWidgetを選択します。名前は「WBP_Title_And_SelectStage」とします。
https://scrapbox.io/files/65d57583cb20c30023d725d0.png
WBP_Title_And_SelectStageを開いてまずはCanvasパネルを追加します。
https://scrapbox.io/files/65d5758e15f88c00244b1b59.png
次にImageウィジェットを追加します。
https://scrapbox.io/files/65d5786e90b3d00024472d97.png
Imageを選択した状態でアンカーを全体に伸縮する設定にして、オフセットを全て0にします。
https://scrapbox.io/files/65d57873c26ea00024f866bf.png
Tintで色を黒にして、A値を0.7あたりにします。
https://scrapbox.io/files/65d57970e2f277002337c982.png
🐱これで薄暗い背景画像を追加する事ができました。
一旦ゲーム内で表示して確認するためにUIを表示していきましょう。BP_Title_GameModeを開きます。
https://scrapbox.io/files/65d57979392aba002dd3491f.png
いつものUIを表示させるためのノードを作成していきます。BeginPlayからCreateWidgetノードを作成して、ClassにはWBP_Ttitle_And_SelectStageを選択します。最後にAddtoviewportで画面に表示させます。
https://scrapbox.io/files/65d57982a0396c00257ddd28.png
プレイしてみます。作成したUIは現在こんな感じになっています↓
https://scrapbox.io/files/65d582c8392aba002dd3f8ae.gif
😺次にタイトル画面のテキストなどを追加していきます。今回タイトル画面とステージ選択画面は同じウィジェットブループリント上に作っていきます。なのでタイトル用のCanvasとステージ選択用のCanvasで分けていくためにさらにCanvasパネルを追加していきます。
WBP_Ttitle_And_SelectStageを開きます。CanvasPanelを追加して、名前を「Title_CanvasPanel」にします。
https://scrapbox.io/files/65d57996fa31a7002545c15a.png
Title_CanvasPanelも同じくアンカーを全体に伸縮する設定にして、オフセットを全部0にします。
https://scrapbox.io/files/65d579a30c6cbd0024d26a09.png
Textウィジェットを追加します。
https://scrapbox.io/files/65d579af4185450024b3b1a1.png
テキストが大体中央上になるように配置していきます。アンカーを中央にして、SizeToContextにチェックを入れます。Alighnmentや位置を以下の値にします。
https://scrapbox.io/files/65d579b84dd90c002443c0a1.png
TextをJUMPERにして、Sizeを125にします。
https://scrapbox.io/files/65d579c1e2f277002337cd86.png
そしたらテキストをCtrl+Dで複製します。
https://scrapbox.io/files/65d579cca0396c00257de15b.png
複製したText内容を「PRESS ANY BUTTON」にして、Sizeを33にします。位置Yを187にします。
https://storage.googleapis.com/zenn-user-upload/36734d65312f-20221210.jpg
🐱これで主な部分は完成しました!
プレイしてみましょう。こんな感じのUIになりました↓
https://scrapbox.io/files/65d579dd392aba002dd35076.png
プレイ画面の比率を変更しても、問題無いか確認するために新規エディタウィンドウでプレイしてみます。
https://scrapbox.io/files/65d57ac8f3c58e0024b72572.png
プレイ画面の比率を変更して確認します↓問題無さそうです。
https://scrapbox.io/files/65d582a8b2036d0024e26502.gif
😺ちなみに、テキストが大文字な理由はゲームのタイトルなどの文字は大文字である事が多いからです。こんな感じに↓
https://scrapbox.io/files/65d57ae3fa31a7002545d45f.png
https://scrapbox.io/files/65d57af20c7af400284ca00c.png
ゲームのタイトル画面などのUIは1からオリジナルのデザインで作る事はお薦めしません。既存のゲームのタイトル画面を参考にして作成していき、ゲームに合わせてアレンジしていくのが最初はおすすめです。
③BGMをフェードで鳴らしてマウスカーソルを非表示にする
では、BGMをフェードで鳴らしてゲーム開始時に一回クリックする必要を無くしていきます。
今までと同じくTitleのレベルを開いた状態にしておきます。
https://scrapbox.io/files/65d57b85ec6ed8002482074b.png
BP_Title_GameModeを開きます。
https://scrapbox.io/files/65d57979392aba002dd3491f.png
既存のAddtoViewportノードからCreateSound2Dノードを追加して、以前のページで作成したサウンドキューのA_BackgroundMusic_Cueをセットします。さらにFadeInで1.5秒にします。
https://scrapbox.io/files/65d57ba1f067550023be0f62.png
これで音源を生成して、フェード再生する事ができました。
さらに後続にSetInputModeGameOnlyノードとGetPlayerControllerノードを作成します。
https://scrapbox.io/files/65d57baa05dd560025a4d8d6.png
SetInputModeGameOnlyノードとは？
SetInputModeGameOnlyノードはゲームにマウスを入れて操作を可能にするノードになります。これでゲーム開始時にビューポートを一回クリックする必要は無くなりました。
これでプレイするとBGMが流れるようになってマウスが強制的に非表示になります。
https://scrapbox.io/files/65db592d7f7d990026255c18.gif
🐱では最後にちょっとしたアニメーションを追加していきます。
④フェードを繰り返すアニメーションを作る
「PRESS ANY BUTTON」のテキストをフェードさせるアニメーションを作っていきます。ゲームのタイトル画面でよく見かけるアニメーションになります。これを作っていきます↓
https://scrapbox.io/files/65d57bf20c7af400284cb07b.png
😺そしてUIのアニメーションについてはまだこの本で解説していませんが、比較的簡単なので流れを掴んでいきましょう!
まずWBP_Title_And_SelectStageを開いて、「PRESS ANY BUTTON」と書かれたTextの名前をPressAnyButton_Textに変更しておきます。
https://scrapbox.io/files/65d57c11c26ea00024f8a742.png
下のアニメーションタブをクリックします。
https://scrapbox.io/files/65d57c19a0396c00257e011c.png
そしたらこのアニメーション編集ウィンドウはしばらく使用するのでレイアウトにドッキングしておきます。
アニメーションのウィンドウが表示されます。
https://scrapbox.io/files/65d57c1ff3c58e0024b73833.png
アニメーションを作成していきます。「+アニメーション」をクリックします。名前をPressAnyButton_FadeLoopとします。
https://scrapbox.io/files/65d57c4615fd0900256b5ae6.png
まずPressAnyButton_FadeLoopを選択します。次にPressAnyButton_Textを選択した状態で、「+トラック」をクリック > 一番上に表示されるPressAnyButton_Textをクリックします。下のgifでも解説しています。
https://scrapbox.io/files/65d57c4cdb985a0025310060.png
gifで説明するとこんな感じ↓
https://scrapbox.io/files/65d5828b4185450024b44b68.gif
アニメーションウィンドウの解説
左の項目がアニメーションの名前を指していて、右のトラックと書かれた場所でどのウィジェットをアニメーションをさせていくのか決めていきます。
https://scrapbox.io/files/65d57c83a757e10026a9c599.png
つまり左がアニメーション名で、右のトラックがアニメーションを構成する場所になります。
🐱そして次にそのウィジェットの"何"をアニメーションさせるか決めていきます。
+トラックをクリックしてRenderOpacityをクリックして追加します。
https://scrapbox.io/files/65d57c9427a98700264f9bf4.png
こんな感じになりました↓
https://scrapbox.io/files/65d57c9e6407550023713e7b.png
RenderOpacityとは?
RenderOpacityとはUIの不透明度の事になります。0で完全に透明になって、1で完全に表示される状態を表します。
UIのアニメーションについて
https://scrapbox.io/files/65d57cd4738fa90024d416a7.png
このアニメーションウィンドウでの横軸はアニメーションの秒数を示しています。そして今回でいうRenderOpacity(不透明度)を何秒に何の値にするのか決めていきます。やっていきましょう。
まず赤色のピンを1:00(秒)まで移動させます。その後、RenderOpacityのプラスボタンをクリックします。赤点のキーが追加されます。
https://scrapbox.io/files/65d57d0976c42100254315d1.png
その後、値を0にします。
https://scrapbox.io/files/65d57d0f27a98700264fa369.png
そしたら赤色のピンを左右に動かしてみましょう。PRESS ANY BUTTONが消えたり表示されたりしている事が確認できます。
https://scrapbox.io/files/65d582732c1af90024f31a86.gif
今した事の解説
0秒時のRenderOpacity(不透明度)が1、つまりUIのテキストは完全見える状態に指しています。1秒後の不透明度が0、つまりUIのテキストが完全透明の状態に指しています。
https://scrapbox.io/files/65d57d320af85f002418179e.png
アニメーションのフレームはデフォルトだと20fpsなので、例えば0フレーム目は不透明度は1、次の1フレーム目は不透明度は0.95、2フレーム目は不透明度は0.9と徐々に下がっていっている形になります。これを続けていく事によって最終的に不透明度は0になってテキストが消えるフェードのアニメーションを実現しているという事になります。
🐱つまり不透明度を1から下げていく事で、徐々にフェードさせて消えていくアニメーションを実現しているという事になります。今回のアニメーションはフェードを繰り返すアニメーションにしたいのでループされるようにさらに調整していきます。
赤色のピンを2.00(秒)の場所まで移動させます。プラスボタンでキーを追加します。その後RenderOpacityの値を1にします。
https://scrapbox.io/files/65d57d4471b19a0024903814.png
これでピンを移動させるとPRESS ANY BUTTONが一度消えて再度表示されるアニメーションになりました。
https://scrapbox.io/files/65d5826021f3f9002472c0a5.gif
🐱後はこのアニメーションを繰り返し再生させていくだけになります。そしてアニメーションを作成すると自動で変数が作成されます。確認していきましょう↓
そのままWBP_Title_And_SelectStageのグラフを開きます。変数の項目にAnimation > PressAnyButton_FadeLoopというアニメーションがあるのを確認します。
https://scrapbox.io/files/65d581b67f91650026a8fd6d.png
🐱ではここにアニメーションをループ再生させる処理を作っていきます。
イベントConstructからPlayAnimation(ターゲットはUserWidgetと書かれたノード)を追加します。InAnimationに変数からPressAnyButtonForLoopをGetで持ってきます。NumLooptoPlayを0にします。
https://scrapbox.io/files/65d581c021f3f9002472b7ea.png
PlayAnimationノードとは？
PlayAnimationノードはUIのアニメーションを再生させるためのノードです。InAnimationには再生させるアニメーションの変数をセットします。NumLooptoPlayはアニメーションを何回ループ再生させるか決める項目です。0にすると無限にループします。イベントConstructはゲーム開始時に呼ばれるノードですので、PlayAnimationでフェードのアニメーションをループ再生させています。
プレイすると「PRESS ANY BUTTON」のテキストがフェードするようになりました。
https://scrapbox.io/files/65d5824732e42e002684ced2.gif
これでタイトル画面は以上になります。
タイトル画面の完成!
https://youtu.be/bwOVo49SxtM
😺これでシンプルなタイトル画面が完成しました。次回タイトル画面で何かのボタンを押したときにステージ選択画面に切り替える処理も一緒に作っていきます。以上です、お疲れ様でした。