執筆:  “Y.Y”

はじめに

初めまして。プログラマーのY.Yです。
今回はゲームではドラッグ＆ドロップでオブジェクトを配置できるUIを作成していきます。

この記事の内容

ドラッグ＆ドラップで配置する方法

1. 配置するアクター（オブジェクト）を作成
2. 実際にテクスチャとメッシュを紐づけるデータテーブルを作成する
3. ブループリントクラスの作成
4. リストのUIの作成
5. リストのUIの作成

ファイルを用意しよう

今回必要なファイルはｘ種類です。

1. UE5.3.2
2. ThumbnailToTextureToolの導入

UE5のプロジェクトを準備

1. EpicGamesLauncherからUE5.3.2をDL
2. UE5.3を起動し
   ゲーム→トップダウンを作成
   プロジェクトの場所：任意
   プロジェクト名：任意　（今回はDragAndDropUIで作成）
   その他の設定はデフォルトで
   　
   
   　
   プロジェクトが開ければ成功
   　
   
   

プラグインを導入しよう

配置するオブジェクトの画を用意するは面倒なので今回はプラグインを使用します
プラグイン名：ThumbnailToTextureTool

1. プラグインをDLする
   https://github.com/NanceDevDiaries/ThumbnailToTextureTool
   からThumbnailToTextureToolをDL
   Code→DownLoadZIPからDLできる
   　
   
   
   　
   • プラグインを導入
     DLしたファイルを展開する
     ProjectFile内にPluginsを作成
     　

　

2. Pluginフォルダの中に展開したフォルダをコピー
   　
   
   　
   プロジェクトを一度閉じて再度開く
   エディター左上の編集→プラグインで表示されていれば導入できている
   　
   
   　
3. オブジェクトのイメージ画像を生成
   コンテンツ→LevelPrototyping
   すべてのスタティックメッシュを選択
   右クリック→Export to Texture
   　
   
   　
   コンテンツ→ProceduralTextures内にテクスチャが生成されていれば成功
   　
   

実装してみよう

1. 配置するアクター（オブジェクト）を作成
   • コンテンツドロアーで右クリック→ブループリントクラスからアクターを作成
     名前：任意　例）A_Object
     　
     
     　
   • カスタムイベントを生成
     Inputを追加
     　
     
     
   • スタティックメッシュコンポーネントを生成しInputのメッシュを反映させる
     　
     
     　
2. 実際にテクスチャとメッシュを紐づけるデータテーブルを作成する
   • コンテンツブラウザ内で右クリック→ブループリント→構造体を作成
     任意の名前をつける　例）F_ObjectListItem
     　
     
     　
     
     　
   • 変数の追加
     変数タイプ
     １つ目
     変数タイプ：StatickMesh
     名前：任意　例）Object Name
     ２つ目は
     変数タイプ：Texture2D
     名前：任意　例）Object Texture
     　
     
     
   • データテーブルを作成
     行構造は先ほど作成した構造体を指定
     名前は任意　例）D_ObjectList
     　
     
     　
     
     　
   • 作成したデータテーブルを開く
     行を追加しスタティックメッシュを設定Texture2Dは対応したテクスチャを指定
     　
     
     　
3. ブループリントクラスの作成
   コンテンツブラウザ→ブループリントクラス→Objectを作成
   名前：任意　例）BP_DropItem
   　
   
   　
   
   　
   • 変数の作成
     変数タイプ：StatickMesh
     名前：任意　例）ItemImage
     変数タイプ：Texture2D
     名前：任意　例）Object Name
     　
     
     　
   • 変数の設定を変更
     作成した変数の
     インスタンス編集可能
     スポーン時に公開
     の二つにチェック入れる
     　
     
     　
4. リストのUIの作成
   • コンテンツフォルダ内で右クリック→ユーザーインターフェース→ウィジェットブループリントを作成
     　
     
     　
   • 作成したウィジェットブループリントを開く
     パレットからBorderを配置
     　
     
     　
     パレットからImageを先ほどのBorder内に配置
     今回は名前を変更しなくても可
     IsVariableにチェックを入れる
     　
     
     　
     
     　
     
     　
   • リストの項目にするためにインターフェースを追加する
     クラス設定→インターフェース→実装インターフェース
     からUSer Object List Entryを追加
     　
     
     　
     
     　
     
     　
     
     　
   • 変数の作成
     型：StaticMesh
     説明：対応するメッシュを保存
     名前：任意 例）ItemMesh
     
     型：このWgdet （私はWBP_DropItem）
     説明：ドラッグしているWidgetを一時保存
     名前：任意 例）DragWidget
     
     型：Float
     説明：LineTraceでどこまで飛ばすか（今回は初期値10000.0）
     名前：任意 例）End Point Distance
     　
     
     
   • リストに追加された際（表示）の処理
     イベントグラフ内で右クリック→Event on list Item Object Setを生成
     　
     
     　
     
     　
   • 押した際の処理
     関数→オーバーライドでOn Mouse Button Down
     　
     
     　
     
     　
   • ドラッグした際の処理
     関数→オーバーライドでOn DragDetectedを作成
     ドラッグしているWidgetを一時保存する変数を作成
     　
     
     　
     
     
   • ドロップして生成する処理
     イベントグラフ→右クリックEvent On Drag Cancelledを生成
     　
     
     　
     
     　
5. リストのUIの作成
   • 同じようにウィジェットブループリントを作成
     
   • Widgetの要素の作成
     CanvasPanelを配置
     中にScaleBox
     さらに中に
     TitleViewを配置
     
     
     　
     TileViewを選択
     名前をわかりやすく　ObjectListに変更
     コンテンツ→OrientationをVarticalからHorizonralに変更
     　
     
     　
     詳細のリストエントリー→Entry Widget Classに先ほど作成したウィジェットを設定
     　
     
     　
     スケールボックスの大きさや場所や変更
     　
     
     　
     TileViewのイベントから On Entry Initializedを作成
     　
     
     　
   • データテーブルからリストの項目を生成
     　

起動

コンテンツ→TopDown→Blueprints→BP_TopDownGameMode
を開く
ブループリントで開くというところがあるので押す
　

　
ゲームを起動して実際にUIからドラッグ＆ドロップでオブジェクトを配置する

まとめ

使用用途

• ユーザーがMapを作成
• 実際にプレイしながらオブジェクトを配置して試すことができる
• イベントなどからアイテムを配置

関連記事

• https://github.com/NanceDevDiaries/ThumbnailToTextureTool
• https://www.youtube.com/watch?v=QrEY8n8zSag