1. Home
  2. /
  3. Study
  4. /
  5. UE5から追加された新Widget ComboBox(Key)

UE5から追加された新Widget ComboBox(Key)

UE5から追加された新Widget ComboBox(Key)

ComboBox(Key)について

UE5からComboBox(Key)が追加されました。
公式ドキュメントにもフォーラムにも使用方法が書かれていなかったので調査してみました。

ComboBox(Key)ではComboBoxのItemにWidgetを使用できます。
アイコンとTextを持ったUserWidgetをItemにするサンプルを紹介します。

ComboBox(Key)の使い方について

今回はEditorUtilityWidgetでComboBox(Key)を使うサンプルを作成します。

Asset Name 役割
EUW_ComboBoxKey ComboBox(Key)を使うEditorUtilityWidget(WidgetBlueprintでも使えます)
WBP_ComboBoxItem アイコンとテキストを持ったUserWidget(WidgetBlueprint)

ComboBox(Key)のItemとして試用するUserWidgetを作成する

まずは、ComboBoxのItem用のUserWidgetを作成します。

ContentsBrowserを右クリック > UserInterface > WidgetBlueprint

Widgetの構成は以下の図のように配置します。
ImageをScaleBoxの子にすることでComboBoxのItemの高さで等倍を保ったままスケールします。

TextはBlueprintで変更するので[Is Variable]を有効にします。

Itemの表示を変化するための変数を追加します。

Variable Name Variable Type
Name Text
Texture Texture 2D
ImageSize Vector 2D

UserWidgetを生成する時に値を設定するために以下の項目を有効にします。

  • Instance Editable
  • Expose on Spawn

Event ConstructでTextとImageのWidgetを設定します。

Make (構造体)ではDetailパネルで変更する変数のみチェックボックスのみ有効にします。
Imageのサイズとテクスチャを変えるので、「Image Size」と「Image」を有効にして変数を設定します。

CompileしてSaveを行えば作成完了です。

Compile > Save

ComboBox(Key)を使用するWidgetBlueprintを作成する

ComboBox(key)を使用するWidgetBlueprintを作成します。
今回はEditorWidgetUtilityで確認します。

ContentsBrowserを右クリック > Editor Utilities > Editor Utility Widget

ComboBox(Key)をDesignerのGraphに追加します。

「Option(選択項目)」と「Selected Option(選択項目から最初に選択する項目)」を設定します。

ComboBox(Key)では選択項目を設定しても、Widgetには何も表示されません。

ComboBox(Key)に選択項目を設定したり、選択した項目を表示するには以下のEventを実装します。

Event Name About
On Generate Content Widget 選択した項目を表示する処理をBindする
On Generate Item Widget 選択項目を表示する処理をBindする

「On Generate Content Widget」と「On Generate Item Widget」にBindする関数を作成します。

「Create Binding」を選択すると関数が作成されます。

作成された2つの関数のInputとOutputのVariableTypeは同じです。

  • Item : 選択した項目が入っています。
  • Return Value : 表示するWidgetを渡します。

両方の関数のItemやReturnValueに渡すVariableTypeが同じなので、選択項目からWidgetを作成する関数を作成します。

選択項目からWidgetを作成する関数は以下のようなBlueprintです。
選択した項目から分岐してTextureを変更したUserWidgetを作成します。

User Widgetを作成するには「Construct Object from Class」ノードを使用します。
ClassにComboBox用に作成したUserWidgetのWidgetBlueprintを選択します。
あとは、変数を初期化します。

アイコン用のImageのSizeを設定できる変数を作成しておくと調整しやすいです。

CompileしてSaveを行えば作成完了です。

Compile > Save

Widgetを表示して、ComboBoxを選択するとアイコンとテキストが選択項目となった表示が行われます。

まとめ

UE5になってから7ヶ月くらい経ちましたが、まだドキュメントが最新で追加された機能まで網羅されていないですね。
Forumで海外の人が有志で書いているTopicsに助けられています。
役に立つ情報を発信できるように頑張ります。

関連記事

作れるPluginの種類 Plugin開発を始めよう 01

作れるPluginの種類 Plugin開発を始めよう 01

Plugin開発を始めよう C++とBlueprintの基本的な使い方を書いた本を書いたので、そろそろ実践的に使い方を模索していきます。 文法と違ってまだ何ができるのか分からないのでBlogの方でサンプルがいくつかできたらZennの方に本としてまとめます。 書いてある内容はVisualStudioがあること前提なので、VisualStudioのインストールと環境構築が必要です。 Visual Studio 2019のセットアップ
優先度の高いイシューから解決しよう。 脱ノウハウコレクター

優先度の高いイシューから解決しよう。 脱ノウハウコレクター

Githubにissueを書きだしてからやることがハッキリした 通勤時間で何もできない時間があるから、購入したり図書館で借りた本を読書しています。 最近始めたのは朝書いた内容を振り返りながら足りていない処をissueに書くようにしています。 そもそも「issueってなんだ?」ってところから気になったので、有名な「イシューからはじめよ」という本を読んで「issueとは何か?」をまとめていきます。 日々気にな