Introduction to Common UI | Inside Unreal を視聴してのログとコード

Unreal Engine

ビデオ

www.youtube.com

視聴しつつのコード

GitHub - dany1468/UIDemoStream

  • 最後の方はよくわからなかったので実装していない
  • 私の Github の容量制限の関係でほとんどの不要っぽいコードは削って最低限にしている（なのでトップダウンで作ったはずだが、キャラクターすらいない）

視聴ログ

  • トップダウンプロジェクト
  • Common UI Plugin を有効化
  • 以下のプロジェクト設定
    • Common UI に付属する ViewPort のクラス
    • 入力ルーティングを担うのはこのクラス
    • ViewPort 内のレンダリング階層の最上位 widget に送られる
  • UI, Blueprint, Maps フォルダ作成
  • Maps に DemoGameFrontend フォルダを Empty で作成
  • UI に Data, Icons フォルダ作成
  • Data に DataTable を作成
    • このデータテーブルはインゲーム用とメニュー用のように複数に分割することが可能
    • 分割方法に間違いというものは無い
  • DataTable に基本的な 4 つの入力を追加
    • 特定のプラットフォームで A, B の位置が変わるような場合には Gamepad Input Overrides を利用
    • 上記では Generic しか出ていないが、SDK を利用してソースビルドすれば選択肢が出てくる
  • CommonInputBaseControllerData を継承した BP を 2 つ作成する
    • 1 つは InputData_PC_Keyboard, もう1 つは InputData_PC_Gamepad とする
    • ボタンアイコンの情報を保持する
  • InputData_PC_Gamepad
    • Gamepad Platform Name は Mac など他のデスクトッププラットフォームを指定できる
  • Icons フォルダにアイコンを入れる
  • InputData_PC_Keyboard と InputData_PC_Gamepad にアイコンを設定
    • image size を 32 に設定したが、小さくなりすぎる可能性があるので UI 側で変えた方がいいかもしれないらしい
    • アイコンはアクションに割り当てられいてるのではなく、キーに割り当てられている。よってプラットフォームごとにアイコンを処理することができる
InputData_PC_Keyboard InputData_PC_Gamepad
  • ControllerUIInputData を継承した BP をDemoGameInputData の名前で作成する
    • この時、InputData_PC_Keyboard と InputData_PC_Gamepad の名前をそれぞれ ControllerData_PC_Keyboard, ControllerData_PC_Gamepad に変更している
  • DemoGameInputData は、ユニバーサルなクリックや戻るボタンのアクションを指定する。ここでの設定値は以下になる。
  • Project Settings -> Common Input Settings
    • 先程のユニバーサルなアクションを指定した BP を設定する
      • これでユニバーサルなアクションの設定は完了
    • Platform Input の Windows に、作成済の ControllerData を Keyboard/Gamepad それぞれ指定する
      • 他のプラットフォームや、なぜ Windows が Mouse and Keyboard がデフォルトなのは後ほど解説されるらしい
  • ここまででデータアセットの作成と設定は完了
  • ここからスタイリングアセット
  • UI フォルダの下に Styling フォルダを作成
    • スタイルもデータアセット同様の形の設定になる
  • CommonBorderStyle を継承した BP を BorderStyle_DemoGameGenericBorder という名前で作成する
    • Style で検索するとスタイル用のアセットのバリエーションが見れる
  • CommonButtonStyle を継承した BP を ButtonStyle_DemoGameGenericButton という名前で作成する
  • CommonTextStyle を継承した BP を TextStyle_DemoGameGenericMenuText という名前で作成する
  • Text を例にした簡単なスタイリングの仕組みの紹介
    • CommonTextStyle は簡単には、既存の Widget の Text における Appearance を外に出す仕組み
    • なので以下のように CommonTextStyle の継承クラスの設定も似ている
    • ただ、既存の Text Widget には設定できず、そのために CommonText Widget が存在する
      • Common Text の箇所で作成したスタイルアセットを指定できるだけでなく、Appearance で override もできる
    • Project Settings -> Plugins -> Common UI Editor でグローバルに設定も可能
      • 最も多く使われるスタイルがあればここに設定しておくと便利
  • CommonActivatabeWidget を継承した BP を UI_Base という名前で作成する
    • トップに overlay を追加
    • 💡 Canvas は使わない。以前はデフォルトで Canvas が置かれていたが、Canvas があらゆる Widget に配置されると計算の負荷が大きく、それだけで CPU が専有されてしまう。よって極力使わない。
  • Common Activatable Widget Stack
    • メニュースタックの作成を可能にするもの
    • スタックの仕組みを意識せずに特定の方式でメニューを追加できる
    • Common Activatable Widget Queue もあるが、こちらはあまり使わない
  • overlay の下に 2 つの Common Activatable Widget Stack を配置
    • MenuStack, PromptStack と命名
    • PromptStack はメニューとは別にモーダルやコンテクストメニューを表示するために用意
    • 途中段階だが、以下のように作成した Stack に Widget を push する形になっていく
    • Widget のコンテナのように働くということ
  • Common Activatable Widget を継承して、UI_MainMenu を作成
    • UI_MainMenu は表示・非表示の切り替えはないが、アクティベート時や非アクティベート時の処理をするために継承する
    • これらの機能は通常の UMG Widget には存在しない
    • Stack はこれらの機能を自動で利用するので、そのためにも継承が必要
      • 例えば Stack の一番上の要素が非アクティブ化されると、次の要素が自動的にアクティブ化される、など
    • Lyra では C++ で、より優れたプラクティスに従って作成されているが、Blurprint での方法でもチュートリアルレベルとしては十分
  • ボタンのスタイル（忘れていたらしい）
    • テキストのスタイルについては BP からは作成したスタイルアセットの指定になるが C++ だと柔軟に指定できるらしい
    • クリック時のサウンドの設定等もできる
    • 今回は色だけ設定 (以下の枠の部分だけ)
    • Selected について
      • Selected は Button 側の Selectable に対応し、チェックやラジオボタンの選択状態に応じた変化に対して適用される
    • ボタンに画像をスタイルとして適用することも可能ではある
      • Lyra でも似たようなことをやっている？
  • ボタンの構造
  • 文字列の説明とローカライズ
    • Name: 文字列定数
    • String: 動的な文字列
    • Text: ローカライズされた文字列
    • ローカライズは Common UI ではなく UE 自体の仕組み
    • 上記のダッシュボードの設定と、各要素の旗アイコンでの設定の組み合わせ
    • 💡 重要なのは UI で使うような文字はローカライズすることが多いので Text にするということ
  • ボタンの設定
    • 同じことは Construct でもできるが、Pre Construct にすることでエディタでも文字列を反映させることができる
    • 最小サイズを設定し、エディタの表示サイズも Custom にして合わせておくと確認しやすい
  • ボーダーのスタイル（忘れていたらしい）
    • 単純な設定。今回は色だけ設定。
  • UI_MainMenu の作成
    • ざっくり以下のような構造。ボタンは当然 UI_Generic_Button。
  • プレイヤーコントローラーの作成
    • Blurprint フォルダに FrontEndPlayerController を作成
    • UI は特定のプレイヤーコントローラーに表示されるもの
    • よって、プレイヤーコントローラに UI を配置するのを好んでいるらしい
      • UI はゲームモードでも追跡できるし、他の場所でも追跡は可能
      • 現状、Push Menu はあらゆる Common Activatable Widget を受け付けてしまうので、ちゃんとやるなら MainMenu 用の親クラスを一枚噛ませて、それしか選択できないようにするのが良い
      • 今回に関してはチュートリアルなのでそこまでやらない
  • ゲームモードの作成
    • 同フォルダに FrontEndGameMode を作成
    • 先ほどの Player Controller だけ設定し、ゲームモード自体も DemoGameFrontEnd マップに指定する
  • 動作確認
    • メニューが表示され、ホバーやクリック時のボタン色の変更が見て取れる
  • アクティブ化時にフォーカスを指定
    • UI_MainMenu はスタックに push された時点で Stack の最上位になるため、Activate される
    • Get Desired Focus Target を override した上で利用する
  • フォーカス指定が意図どおりにならない
    • 上記のようにうっすらと枠がでるだけになる
    • これは Project Settings で Desktop は Keyboard & Mouse がデフォルトになっているため
    • これを Gamepad に変える
    • こうすると、Gamepad で操作した場合は以下のようにアクティベート時にホバーされた色 (つまりフォーカスしている)になる
    • ただ、Keyboard のみの操作の場合には、先程のうっすらとした枠（これがキーボードのフォーカスになっていると思われる）が出るだけで、ホバー色にならない
    • 以下の設定がうっすらとした枠の設定になるが、それを Never にすると単に出なくなるだけになる（つまりキーボードでの操作の位置がわからなくなる）
  • Prompt の作成
    • Common Activatable Widget を継承して UI_GenericPrompt を作成
    • CommonBorder, UI_Generic_Button を利用
    • 上下に配置した Spacer でボックスを中央に配置
  • 動作確認
    • Quit Game クリックでプロンプトが表示され、Yes でゲーム終了を確認
    • No の場合にはフォーカスが戻らない
    • プロンプトが出ている場合にも、メニューはクリック可能
  • フォーカス戻らない問題
    • UI_MainMenu の Auto Restore Focus を true にしても改善はしない
    • そもそも異なる Stack なので機能しない？（そもそも Deactivate していないので、再Activate 自体してない気も）
    • 以下のように PromptStack から出て、Prompt が Deactivate された時に MainMenu Stack の先頭に無理やり Focus を戻す
  • Prompt を MenuStack に入れた場合の挙動
    • こうすることで、Prompt を出す (Quit Game をクリック) することでメニューが消えて、プロンプトが現れるという状態になる( UI_MainMenu は Deactivate される)
    • フェードになるのは MenuStack の以下の設定による
    • 戻しておく
  • IsModal
    • IsModal オプションについては、指定した Widget がどういう形式であろうと、入力のルートだとみなすようになる（らしい）
  • Auto Activate など
    • Common Activatable Widget を Stack 無しで生で利用する場合には Auto Activate や Is Focusable などを利用することがあるが、 Stack を利用する場合においては不要（デフォルトの off のままで良い）
    • Common UI は Stack を利用して Transition 後に Activate/Deactivate されることを想定しているので、Auto Activate は off がデフォルトになっている
  • Is Back Handler
    • グローバルのバックボタンを Prompt で機能させたい
    • Is Back Handler の指定だけでは機能しない
      • Is Modal が必要になりそう
      • On Handle Back Action を override し、そこで Deactivate させる
    • Transition などのために直ちに Deactivate することはしない（らしい）
  • 動作確認
    • ここまでの操作でグローバルの Back キーでプロンプトが閉じるように（Esc or Gamepad Face Right )
  • アイコンの表示
CommonActionWidget_94 CommonActionWidget_194
Keyboard Gamepad
  • Project Settings の Gamepad Name のミス
    • 上記が Windows になっていたので、アイコンが Gamepad 時に表示されなかった
  • ここから CommonBoundActionButton の利用に入ったりしたが、クラッシュしたり質問コーナーに突入したりでよくわからなくなった。。
  • Q&A
    • Common UI は VR でも動くか？
      • Common UI は突き詰めれば UMG 上に構築されたレイヤでしかないので動かない理由はないが、VR で用途があるかはわからない、的な。
    • 検索 UI を作るには？
      • ゲームプレイタグを使うことを提案（ユースケースに合っているかはわからないが）

視聴してみて

  • 機能別サンプルだと理解が深まらなかった Stack / Queue 周りのことが知れてよかった
  • Canvas は使わない方がいいことは知らなかったので知れて良かった
  • いくつか疑問点は残ったので、拾っていきたいしフォーラムも漁ってみたい

参考