AG14.ゲーム開始時の演出を作る

今回実装する機能

こんな感じにスタート時にステージ全体を見渡すカメラからプレイヤーのカメラに移動させます。

https://youtu.be/GRL5CKI-LD8

😺流れとしてはカメラを追加して、ステージを映すカメラとプレイヤーのカメラを切り替えるという事を行っていきます。

①演出用のカメラを設置する

https://scrapbox.io/files/65d570226b036c002560e900.png

名前をBP_StartCameraにしておきます。

https://scrapbox.io/files/65d57033b294f7002595ff9a.png

🐱このブループリントクラスはカメラとして使用するものになります。

BP_StartCameraを配置します。今回は以下のトランスフォームにしました。

位置 (X=-107.544668,Y=-3351.685309,Z=594.740036)

回転 (Pitch=-16.576965,Yaw=1.200000,Roll=0.000000)

拡大縮小 (X=1.000000,Y=1.000000,Z=1.000000)

https://scrapbox.io/files/65d570ef63f2e30026348df6.png

カメラを移動させる時のTips

ちなみにカメラの位置を調整したい時にはビューポートのカメラを映したい場所まで移動させて、アウトライナーからカメラアクタを右クリック > 「オブジェクトをビューにスナップ」する事で、ビューポートと同じ視点の位置までカメラアクタを移動させる事ができます。

https://scrapbox.io/files/65d57103c26ea00024f7eb86.png

「オブジェクトをビューにスナップ」をクリックする事でこんな感じに↓ビューポートの視点位置にカメラを移動させる事ができます。

https://scrapbox.io/files/65d583776eab9e00258e1b35.gif

基本的にカメラはこの方法で移動させるのがおすすめです。いちいちトランスフォームで移動,回転させる方法は手間ですし調整後のカメラの映る映像がわかり辛いので「オブジェクトをビューにスナップ」を活用しましょう。

🐱この設置したカメラを最初に映す→プレイヤーのカメラに切り替えるといった感じにしていきます。

ここで一旦プレイしてみるとまだプレイヤーのカメラのままになっています↓

https://scrapbox.io/files/65d57135fa31a700254547f4.png

BP_StartCameraを開いて一番上のBP_StartCameraコンポーネントを選択して、AutoActivateforPlayerをPlayer0にします。

https://scrapbox.io/files/65d57143606680002569f697.png

AutoActivateforPlayerとは？

AutoActivateforPlayerとは、プレイヤーが見るカメラの優先度を設定する項目です。Player0が最も優先度が高いのでカメラが複数ある場合このカメラの映像が優先されて表示されます。

プレイすると設置したカメラの映像が映るようになりました。

https://scrapbox.io/files/65d5717fba32c20025ca6ef5.png

🐱カメラの黒帯がウィンドウの比率によって入ってしまうのでこれを修正していきます。

BP_StartCameraを開いて今度は一番下のCameraComponentのConstrainAspectRatioのチェックを外します。

https://scrapbox.io/files/65d5718cdb985a0025307a97.png

ConstrainAspectRatioとは？

ConstrainAspectRatioは黒帯をいれて比率を固定するかどうかの設定です。

プレイしてみると黒帯の部分が消えました。

https://scrapbox.io/files/65d5719fd6e62c00257a9d78.png

😺では、カメラを移動しつつ数秒後にプレイヤーのカメラに切り替える処理を作っていきます。

②スタート時にカメラを移動させて、その後プレイヤーのカメラに切り替える

BP_StartCameraのイベントグラフを開きます。

https://scrapbox.io/files/65d571b5cfe07e0026605f3c.png

TickからAddActorLocalOffsetノードを作成して-1,0,-1にします。

https://scrapbox.io/files/65d571b90c7af400284c127d.png

プレイしてみるとカメラが動いて良い感じになりました↓

https://scrapbox.io/files/65d571c00bb29500259d8ec4.png

🐱では、今度はカメラをプレイヤーに入れ替えるノードを作っていきます。

https://scrapbox.io/files/65d571cb71b19a00248f7a46.png

SetViewTargetwithBlendノードとは？

https://scrapbox.io/files/65d5720576c42100254274fa.png

プレイすると1.5秒後にカメラがプレイヤーのカメラに切り替わりました。

https://scrapbox.io/files/65d5721ff80dc20025a0df86.png

🐱演出はこれで完成です。なおカメラが切り替わるまでプレイヤーの操作ができてしまい、タイマーも進んでしまっているといった問題点がありますが、今回は細かい調整は省かせてもらいます。では最後にもう一つだけ機能を実装していきます。

②BGMをフェードをかけて再生させる

現時点でBGMがいきなり始まる仕様なのでフェードかけて自然に再生させていく処理を作っていきたいと思います。

まず既存で配置してあるA_BackGroundMusic_Cueというサウンドキューは必要なくなるので削除しておきます。

https://scrapbox.io/files/65d57240a0e2770025cb19a0.png

全レベルの機能として実装したいのでJumper_GameModeを開きます。

https://scrapbox.io/files/65d5724790b3d0002446c0dd.png

BeginPlayから繋がるノードにノードを追加していきます。

https://scrapbox.io/files/65d5724fb9e43700249edc98.png

Alt+クリックで切り離します。

https://scrapbox.io/files/65d57259a757e10026a92548.png

CreateSound2Dノードを追加して、A_BackgroundMusic_Cueのサウンドキューをセットします。その後RetrunValueで右クリック > 変数へ昇格をクリックします。変数が追加されるので名前をBackgroundMusicにしておきます。

https://scrapbox.io/files/65d572616b036c00256114ed.png

CreateSound2Dとは？

CreateSound2Dとは、Audioコンポーネントを作成できるノードです。Audioコンポーネントとは音楽を再生,停止などできる音源の事になります。なのでCreateSound2DでBackgroundMusicというサウンドキューを生成して、変数にセットしたという事になります。変数にセットしておけば後から音楽を再生したり停止する事ができます。

次にFadeInノードを作成してFadeinDurationは1.5にします。

https://scrapbox.io/files/65d572760c7af400284c1ec2.png

FadeInノードとは？

既存のノードと繋げます。

https://scrapbox.io/files/65d5728b64705d002503e327.png

作ったノードを折りたたんでおきます。ノードを選択してCollapsedGraph_PlayMusicにしておきます。

https://scrapbox.io/files/65d57291b294f70025961a5a.png

BP_Jumper_GameModeのここまでの全ノードです↓

これで完成です。ゲーム開始時に音楽がフェードしながら再生するようになります。

https://youtu.be/GRL5CKI-LD8

③LEVEL2側のステージも変更しておこう

最後にLEVEL2側のステージも音楽とカメラを変更しておきます。

LEVEL2のステージを開きます。

https://scrapbox.io/files/65d572a16cc9170024ae67c4.png

A_BackgroundMusic_Cueを削除します。

https://scrapbox.io/files/65d57342a757e10026a9313e.png

BP_StartCameraを設置します。トランスフォームは以下に設定しました↓

(X=449.805713,Y=-2809.642327,Z=711.625056)

(Pitch=-21.307611,Yaw=-16.054504,Roll=-0.000000)

(X=1.000000,Y=1.000000,Z=1.000000)

https://scrapbox.io/files/65d573475769d80024d19bc6.png

LEVEL2もプレイしてみましょう。夜のステージも演出が完成しました。

https://youtu.be/XSyygXW9pPI

完成！プレイしてみよう！

という事で今回はスタート時の演出を実装しました。現在こんな感じになっています↓

https://youtu.be/GRL5CKI-LD8

😸映像作成についてはシーケンサーという機能があります。今回はシンプルなので使う必要は無かったですが、例えばボスと遭遇した時のシーンの映像などはそのシーケンサーという機能を使って映像を作っていきます。以上です。お疲れ様でした!