【UE4】ListViewにDataTableのデータを表示する

UMGの機能の一つListViewを紹介します(*'▽')

今回はUE4のListViewにDataTableの値を渡して表示するしたり、

動的に項目を追加したり減らしたりする方法を紹介します。

今回作成するListViewはこんな感じです。

UE4.27.2を使用しています。

※間違いや誤字脱字等ありましたらコメント等いただけますと幸いです。

• ■目次
• ・各データの準備
• ・UMGやBPの処理
• ・レベルへの配置や動作

各データの準備

まずは各データ情報を準備します。

コンテンツブラウザを右クリックして、

「ブループリント」項目の構造体を選択します。

構造体を作成したらTextの項目を2つとアイコン用のSlateBrushを、

新規変数ボタンから追加していきます。

※追加方法は一番上の新規変数を押して、

　変数項目を追加して変数の型を変更します。

続いてこの構造体情報を元にDataTableを作成します。

構造体を作成した時と同様にコンテンツブラウザを

右クリックしたメニューからその他のデータテーブルを選択します。

データテーブルを選択すると「行構造を選択」と出るので、

先ほど作成した構造体を選択します。

選択した構造体の元にデータリストが出来上がります。

データテーブルに最初からデータが入ってないので追加していきます。

実際に追加した場合構造体の項目の下にいくつかデータが作成されます。

※今回はブログ用の仮のデータになるので各自に合うデータ構造にしてください。

・目次に戻る

UMGやBPの処理

ここから実際にBPの処理や動作を作成していきます。

まずはウィジェット用のBPを追加します。

※こちらもコンテンツブラウザを右クリックして、
　ウィジェットブループリントを選択して追加します。

追加したらウィジェットブループリントを開き、

パレットのListViewをドラッグして追加します。

ListViewを追加したらリストエントリー項目にある＋ボタンを押す。

※このEntryWidgetが一つ一つのリスト項目になります。

追加したら中身の情報を追加していきます。

中身のデザインは下の図のようなデザインとなってます。

追加が完了したら設定を行うためにクラス設定から、

UserObjectListEntryをインターフェースに追加します。

追加するとインターフェースにOnListItemObjectSetという項目が、

追加されるのでこちらを右クリックしてイベントを実装を選択します。

ここまで出来たらDataTableのデータを読み込んで、

Listitemに渡すためのBPを作成します。

BPはObjectBluePrintとして作成します。

処理はDataTableを指定してTypeという数字を文字列にしてデータを渡してます。
変数はデータテーブルを参照するための数値です。(キャストしてます)
※構造体の変数も一応用意していましたが特に必要はありません。

Listの処理の方も追加していきます。

まずは変数を3つ追加します。(Text2つとSlateBrush)

上記で設定した変数はバインドしておいてください。

実際の処理は以下になります。

インターフェースで追加したイベントからListItemにデータを渡す処理です。

続いてListViewの追加を処理を追加します。

一つ一つのデータを保持しておくためにListItem用のデータ配列変数を作ります。

まずはListViewを表示する時に呼ばれるConstructイベントになります。

※ListViewにItemを追加する際、
　一つのインスタンスを使いまわすとエディターがクラッシュするので注意！！
　必ずデータ一つごとにオブジェクトを追加すること！

ListViewへのアイテム追加処理になります。

ListItem用のデータを作成してListView追加後作成したデータを配列に保持します。

ListView内のアイテムを削除します(最後から順番に)

ListViewのアイテムがあるかチェックしてListViewと配列内のデータを削除します。

・目次に戻る

レベルへの配置や動作

レベルブループリント上で画面に追加する処理と、

Listへの追加処理を追加します。

以上ですべての設定は完了になります。

・目次に戻る

【UE5】モデリングModeのCubeGridを使おう！

UE5のPreview1が公開されました。

今回はPreview1で気になった機能の一つ、

モデリングModeのCubeGridを触ってみたので紹介できたらと思います。

UE5Preview1を使用しています。

※見た目はUE4の頃と変化していますがThirdPersonTemplateを使用しています。

※間違いや誤字脱字等ありましたらコメント等いただけますと幸いです。

• ■目次
• ・準備について
• ・使用方法について
• ・最後に

準備について

準備についてはエンジンをインストールするのみです。

こちらをクリックするとUE5Previewという選択項目がリストの一番上に出ます。

インストールが完了が完了すると起動ボタンが表示されるので、

エディターを起動します。

※今回のCubeGridは他のテンプレートでも使用できるので、

　自身の開発にあったテンプレートで試してみるのもよいかと思います。

・目次に戻る

使用方法について

まず選択Modeになっている箇所をモデリングModeに変更します。

こちらを選択したら3項目目のPolyModeからCubeGridを選択します。

選択すると追加したい箇所の選択枠と、
各種アクション表示や完了ボタンが表示されます。

これが表示されたら実際に簡単なものを作ってみましょう。

まずは基礎的な使い方のブロックを作ってみます。

範囲をドラッグ&ドロップで選択してEキーを押すことで方向に合わせて引き出して、

モデルの生成が可能になります。

※完了ボタンを押すとStaticMesh扱いでモデルを作成します。(デフォルト設定の場合)

この機能の軸となる操作は兼ショートカットは下記になります。

Eキー→ 引き出し(Pullボタンと同様)

Qキー押し出し(Pushボタンと同様)

Tキー → 向いている方向の変更

下記の画像で説明している方向を変更できます。

Shift+マウス中心ボタンを押しながらドラッグ → 選択したGrid領域の移動

オレンジ色の選択範囲を移動することが可能です。

Shift+Eキー → 向いてる方向に向かって後移動(上向きの場合は上に移動)
Shift+Qキー →向いてる方向に向かって前移動(上向きの場合は下に移動)

※やっていることはSlideBack・SlideForwardと同様です。

CornerMode(指定した辺の方向に合わせて下り坂を作るモード)の使用

Corner Modeのボタンを押して実施する。

主な操作はこれがメインになるかと思います。

ここから各パラメーターについて簡単に説明します。

・Pull/Push SlideBack/Slide Forward Corner Mode Flip

→ こちらは上記で動画や画像で説明した各種動作のボタンになります。

・Grid Frame Origin

→ Grid表示の原点の位置になります。

　 Ctrl+マウス中心ボタンで指定した場所に指定できます。

・Grid Frame Orientation

→ Gridの角度を変更することができます。
　斜めに配置したい時に有効です。

・ShowGrid

→ Gridを表示するかどうかのチェック

・Blocks Per Step

→ 一度の押し出しまたは引き出しでどれぐらいのブロックを生成するのか。

　3なら一度に3つ分のブロックを出す。

・Power Of two

→ グリッドの大きさを設定

・Block Base Size

→ ブロック内の四方内での1ブロックのサイズ
 　(細かく積み上げたい時に使う。)

・OutputType

→ 完了を押した際に配置されるデータ情報のデータタイプになります。

　StaticMesh以外にBlockingVolume(当たり判定の透明な枠)などを設定可能。

　※個人的にいろいろ使ってみているがもう少し安定してからのほうがいいかも？

・Material

→ 押し出した内容に対して完了を押した際に割り当てるマテリアル設定。

以上が主に使用するパラメーターの説明になります。

これぐらいまで覚えれば使用する分には問題ないかと思います。

・目次に戻る

最後に

UE5のPreview版が出て数多くの気になる機能から今回CubeGridToolを書きました。

まだ気になっているモデリング関連のプラグインもあるので触れたらと思います。