大体のゲームに必要であろうタイトル画面の作成方法について、ウィジェットブループリントを用いて作成します。
##今回できること
- タイトル画面の背景の設置
- タイトル文字の設置
#ウィジェットブループリントの作成
まずコンテンツブラウザの"新規作成"から、"ユーザーインターフェイス→ウィジェットブループリント" を選択し名前を付ける。
#背景の設置
作成したウィジェットブループリントを開きます。
最初にタイトル画面の背景を設置します。
左にあるパレットから"Image"を"Canvas Panel"にドラッグ＆ドロップします。
配置すると画面上の左上に白い長方形の何かが出てきたと思います。
それを広げてみましょう。点線は画面上に表示される範囲を示しています。なので点線に沿うようにして広げましょう。
それと同時にアンカーを設定します。選択するのは右下のデカいやつ。
アンカーというのは固定するもので、例えばゲームの画面サイズを変更したときに配置しているものを移動させたりする際に用います。
今作っているのはタイトル画面の背景ですので画面全体へ固定するアンカーを選択します。
##背景画像の変更
白背景だけでは少し味気ないので何か画像を張り付けましょう。
事前にインポートした画像を背景にします。インポートはコンテンツブラウザから、インポートを選択し自分のコンピュータにある画像を選択することでUE4プロジェクト内で作成することが可能となります。
インポートした画像を設定する際は右の、"Appearance→Brush→Image"から選択します。
##タイトル文字の作成
次にタイトル画面なので文字を表示してみましょう。
前の工程でImageを追加したように次は"Text"を追加しましょう。
表示したい文字を、"Content→Text"にて編集します。 Appearanceの"Color and Opacity"や"Font"などを弄ってタイトルをわかりやすくするといいでしょう。
#タイトル画面の表示
現在の進捗を確認してみましょう。
"ウィジェットをレベルに表示する作業"を行います。
ウィジェットの画面を閉じて、左上のファイルから新規レベル作成で"空のレベル"を選択します。
ツールバーのブループリントからレベルブループリントを開きます。
BeginPlayから出力ピンを伸ばし"ウィジェットを作成"を選択。
Classを先ほど作成したウィジェットを指定します。ウィジェットを作成の出力ピンを伸ばし、"Add to Viewport"を選択し下図のようになります。
それでは実際にPlayをしてみましょう。ビューポート内には作成したタイトル画面が映っているはずです。
これでタイトル画面はひとまず完成です。
次の記事ではボタンによるタイトルからのレベル遷移について説明します。