UEを学ぶ「タイトル画面を作る」

以下の動画を参考にUEを習得していきます。

 

youtu.be

 

動画がとても長いのでちょっとずつ

備忘録としてまとめていきます。

 

---

 

【タイトル画面を作る】

 

動画内での進め方は以下の通り

 

  1. 新しいレベル「Title」をつける
    右クリックからメニューを開き「レベル」を選択する。

    f:id:happyherpy:20211021003801p:plain

    レベル

    作成されたNewMapに「Title」と付ける。

    これでタイトル画面のタネが完成。
    ※動画中では
     ファイル>新規レベル>TimeOfDay
     のサンプルを使用していたのでそちらに合わせたほうが良い。

    このとき、レベル内の
    Title(エディタ)>GameMode>ゲームモードオーバーライド
    がNoneになっているとプロジェクト設定で設定されたゲームモードを勝手に読んでしまうとのこと。
    動画内では「BP_MyGameMode」という新しいゲームモードを作って対応していた。

    ゲームモードの作り方はコンテンツブラウザ上で
    右クリック>ブループリントクラス>GameModeBase
    を選択する

    f:id:happyherpy:20211021004754p:plain

    ゲームモード

    作成したゲームモードを先ほどのNoneになっていた
    ゲームモードオーバーライドに設定します。
    ※画像中の背景は動画と同じくテンプレートのものを使用

    f:id:happyherpy:20211021005220p:plain

    ゲームモードを設定
    そのあとゲームモードの設定のDefaultPawnをごそごそいじっていますが、
    正直よくわからないです。

  2. 画面に文字を表示する
    画面に文字を表示するにはユーザーインターフェース
    追加する必要があるそうです。
    コンテンツブラウザ上で
    右クリック>ユーザーインターフェース(一番下)>ウィジェットブループリント
    を選択してUIを追加。ファイル名はUMG_Title。

    f:id:happyherpy:20211021010937p:plain


    追加したUMG_Titleをダブルクリックで開くと
    キャンパスが現れるので
    画面左のパレットから「TextBox」をドラッグして画面内に追加する。

    f:id:happyherpy:20211021011110p:plain

    TextBoxの文字入力欄に「クレイマンの冒険」
    もう一つ追加して「PressAnyButton」と入力する。
    入力した後は画面右の詳細から
    スロット>SizeToContentにチェックを入れること。
    これでTextBoxのサイズが自動的に文字の幅に合わさる。
    文字の大きさは
    詳細>アピアランス>Font>Size
    を設定することで自由に変更可能。
    また
    詳細>スロット>アンカー
    のプルダウンをクリックすると、アンカーの位置を設定できる。
    動画内では「画面中央上部」に合わせる設定をしていたので
    よくわからないが設定する。
    ちなみにTextBoxはCtrl+ドラッグで移動可能。
    ただ、毎回詳細の選択状況が外れるのはやめてほしい。
    (何かいい方法があるのだろうか?)

  3. ボタンを押したらタイトルから遷移する仕組みを作る
    画面上部から
    ブループリント>レベルブループリントを拓く
    を選択して、プログラム設定を行っていく。

    手始めに、画面上に文字を表示する仕組みを作る。
    右クリックからcreate widgetと入力することで
    ウィジェットを作成」を見つけ出し、配置。
    BeginPlayとつなげることで、先ほど作ったUIを読み込む。
    更に「AddToViewport」を追加し、それを画面上に追加する。
    これで文字の表示が可能に。

    f:id:happyherpy:20211021014007p:plain


    更にボタンを押したら、画面が遷移する仕組みを作る。
    右クリックで「Any Key」と入力すると「いずれかのキー」というノードが選べるので配置。
    更に「OpenLevel」と検索して配置し、それらをつなぎ合わせる。
    ※画像上のPrintStringは動画内で機能説明時に作成されたもの

    f:id:happyherpy:20211021014913p:plain

    OpenLevelの引数(LevelName)に開きたいレベルの名前を入れると
    画面上でいずれかのキーを入力したときに、
    該当のレベルへ遷移するようになる。

    ただし、同じ名前のレベルが複数存在する場合、どれが開かれるのか制御できないため
    レベルを右クリック>リファレンスをコピー
    して、LevelNameに設定することで、特定のレベルを指定することができる。
    ※この時「World' '」と最初と最後で閉じられているが、
     これは不要な文字なので消す必要がある。
     (つけたままだと真っ暗な画面に飛ばされました)

    ここまで行うと、タイトル画面とそこからの遷移ができたことになる

    ここまで動画の~30分ほど。
    次は合間にあったフェードイン/アウト処理やキー操作をまとめる