ゲーム開発備忘録

ゲームプログラマー UE4・5向けの記事を書いておりますので見ていただけるとありがたいです。

【UE4・UE5】シンプルなスタッフロールを作ってみる

はじめに

ウィジェットブループリントを使ったシンプルなスタッフロールの作り方です。

UE4.26.2・FPSサンプルでの解説です。

 

やりかた

 

ウィジェットの作成と表示

コンテンツブラウザを右クリックユーザーインターフェースからウィジェットブループリント、WBP_StaffRollを作成します。

f:id:namiton:20220221163225p:plain

 

作成したものを開き、画面右下の矢印アイコンをクリックして解像度を変更しましょう。今回は一般的な1920×1080にしました。

f:id:namiton:20220221163756p:plain

 

表示したことがわかるように、ウィジェットの背景にブラーを表示します。

Background Blurを配置し全体を覆うようにアンカーを調整します。

f:id:namiton:20220221164629p:plain

アンビアンスからBlur Strengthを3にします。

f:id:namiton:20220221164810p:plain

 

プレイヤーキャラクターにこのウィジェットを適応します。

FirstPersonCharacterなどのプレイヤーブループリントを開き以下のように組みましょう。

f:id:namiton:20220221164851p:plain

 

実行するとウィジェットが表示されていることが分かります。

f:id:namiton:20220221164935p:plain

 

②テキストの作成

WBP_StaffRollを開きテキストを追加します。

f:id:namiton:20220221165223p:plain

 

位置を調整します。

アンカーを左から2番目上から3番目を選択し、サイズX・Yをスタッフロールの長さに応じて設定しましょう。

f:id:namiton:20220221165545p:plain

f:id:namiton:20220221170315p:plain

 

Textにテスト用の文字を入力しておきます。

CSVなどで管理してデータテーブルから読み込んでも良いでしょう。

CSVの記事は近日中に書く予定です)

またText内ではShift+Enterで改行できます。

f:id:namiton:20220221170449p:plain

 

③文字送りアニメーションの作成

+アニメーションを押してアニメーションを作成します。

タイムラインのトラックにテキストを選択しましょう。

f:id:namiton:20220221170810p:plain

 

フレームレートがデフォルトでは遅いので60FPSにします。

f:id:namiton:20220221171332p:plain

 

また時間が短いので15秒に変更しておきます。

f:id:namiton:20220221171416p:plain

 


位置Yの右にアイコンがあります。これをクリックするとキーフレームが作成されます。タイムラインの時間が0なのを確認してクリックしましょう。

f:id:namiton:20220221171002p:plain

 

タイムラインの時間を15に移動させ、

位置Yが画面上部よりも上に来るように調整してキーをうちます。

f:id:namiton:20220221171614p:plain

 

タイムライン上のプレイを押して速度が適正かどうかチェックしましょう。

早い場合は最後のキーを右に、遅い場合は左に移動させます。

f:id:namiton:20220221171745p:plain

 

フレームレートの横のアイコンを押すとEaseなどを調整できます。

f:id:namiton:20220221172234p:plain

 

アニメーションの作成はこれで終了です。


④アニメーションを再生する

アニメーションを作成しただけでは再生されません。

ブループリント上にイベントを作成し任意のタイミングで再生されるようにします。

 

ウィジェットをグラフに変更します。

f:id:namiton:20220221172536p:plain

 

アニメーションを作成すると変数Staffrollが自動で生成されるので、

画像のようにカスタムイベントを作成しつなぎましょう。

f:id:namiton:20220221173031p:plain

 

キャラクターブループリントFirstPersonCharacterに移動し

このイベントを呼び出します。

 

1を入力したら再生されるように設定しました。

f:id:namiton:20220221173148p:plain

 

実行して1を入力して動作したら成功です。

f:id:namiton:20220221173234p:plain

 

アニメーションが再生中かチェックしたり、任意のウィジェットにアニメーションを再生させたりすることもできるので設計に応じて実装しましょう。

f:id:namiton:20220221173455p:plain

さいごに

UE4やUE5向けの記事を書いています。

皆様の応援が投稿のモチベーションになりますので

コメントやTwitterのフォローなどしていただけるとありがたいです。

それではよきゲーム開発を。