新大阪UE4勉強会 #1にて、弊社スタッフが登壇した際に使用したスライドです。 https://osaka-ue4study.connpass.com/event/162611/

1. Editor Utility Widgetで
色々便利にしてみた。
～ゲームデザイナーで就職したらコンフィギュレーターを作ってた話～

2. 自己紹介
• しょーご/Shogo (Twitter：@kelu_alfheim39)
• Indie-us Games在住のゲームデザイナーもどき
• Unreal歴4年 C++
JavaScript
ﾁｮｯﾄﾜｶﾙ

3. ダイレクトマーケティング
専門学生中に3人で作ったゲーム【UNDEFEATED】

4. 話すこと
• Editor Utility Widget を実際の業務で使用した話
• 制作した機能の紹介

5. Editor Utility Widgetとは
• 4.22から導入された機能で、Unreal Editor のUIを自由に追加す
ることができる
• C+を必要とせず、「ブループリント」のみで実装できちゃう
• 4.23から更に強力になった

6. Editor Scripting Utility Pluginを有効化
• このプラグインを有効にすると、
Editor Utility Widgetからアセットの操作などができるようになる
※導入しなくても作成可能です

7. EUWを使うことになったきっかけ
• 顧客へのプレゼン用に3D建築パースのリアルタイムコンフィギュ
レーターを作りたい
• 複数の建築物CADデータを取り扱うので、1件に対するコスト削
減、ワークフローを改善したい
• 調べたらUE4のDatasmithがスゴイ！というのでプロに相談しに
来ました

8. 確認事項
開発中にバージョンアップをしました
UE4.22 → UE4.24
説明の中にはバージョンアップにより、
最新版と異なっている箇所があるかもしれません

9. こんなやりとりが…
『建築CADで作成した建築物内の扉を自動的に開閉したい！』
「どれくらいですか？」
『全部です』
「種類はたくさんありますか？」
『開き戸、片引き戸、引き違い戸が対象です』
「わかりました」

10. 自動的に開閉可能な扉を設定できる
エディターを作ってみた

11. 考えていた実装方法
1. 機能を取り付けたいメッシュの名前を列挙してもらう
2. 名前のリストを元にレベル上の扉を検出
3. BPをアタッチする
4. 実行中にBPのイベントを呼び出して開閉！

12. よし！作るぞ！

13. データを確認…
• メッシュが全部バラバラ…
• すべてのメッシュがワールド原点(0,0,0)

14. あれ？回せなくない？

15. ピボットを自動的に決定する機能が必要

16. 再考した実装方法
1. 機能を取り付けたいメッシュの名前を列挙してもらう
2. 名前のリストを元にレベル上の扉を検出
3. 回転軸（ピボット）を割り出す
4. 90度回転するBPをアタッチする
5. 実行中にBPのイベントを呼び出して開閉！
6. 子供(Child Actor)もまとめて回転できるようにする

17. なんとかなりそう

18. Editor Utility Widgetを作成する
• とりあえず、ボタン１つで自動化を目指す

19. リストの名前を取得する

20. レベル上のアクターと照合する

21. 回転軸(ピボット)を割り出す①
扉のメッシュのドアノブの反対側の下（軸）
ピボットを置きたい場所は…
この２つが取得できれば
計算でなんとかなるかも

22. 回転軸(ピボット)を割り出す②
扉のメッシュを取得したい
一番大きいメッシュが扉？
大きさが取得できればいい
※ボックス形状ではない扉は考慮しない

23. 扉を取得する

24. 回転軸(ピボット)を割り出す③
ドアメッシュの取得

25. ドアノブはどうしよう(´・ω・`)

26. 回転軸(ピボット)を割り出す④
ドアノブのメッシュは複数個あり、
一番小さいメッシュというわけではない
大きさ以外に「基準」が必要
名前で何とかできないか

27. すべての扉アセットには「ノブ」「取手」「引手」
という名前のメッシュが含まれていて、
命名規則がしっかりとされていた

28. これならできる

29. 回転軸(ピボット)を割り出す⑤
扉の取得とあまり変化はないが、
名前が含まれているかを確認している

30. 回転軸(ピボット)を割り出す⑥
「扉」と「ドアノブ」のStatic Meshを取得することができた

31. 扉のメッシュのドアノブの反対側の下を
計算で取得する

32. 回転軸(ピボット)を割り出す⑦
「ドアノブ」から一番遠い「扉」の辺が、
回転軸になるはず！
ただし・・・

33. 扉
扉
X軸
Y軸
インポート時の状態イメージ
扉の位置は 0,0,0
扉の回転も 0,0,0
原点
扉がどの方向を向いているかわからないので、
4方向の距離を比較する

34. 回転軸(ピボット)を割り出す⑧
4方向の距離を出す

35. 回転軸(ピボット)を割り出す⑨
比較して、
一番長い辺になった場所を計算

36. 回転軸(ピボット)を割り出す⑩

37. 長かった計算が終わり…
扉のピボットを計算から出すことに成功！
回転する仕組みのBPを取り付け

38. 回転の仕組みを組んだBPを
「親」として
ドアメッシュに取り付ける
90度回転するBPを取り付ける

39. 実装完了！

40. 関数にまとめてボタンにつなげる

41. 完成(∩´∀｀)∩

42. でも！

43. ださくない？(´･ω･)(･ω･｀)

44. かっこよくします

45. Single Property View を使用する
4.23から追加された神機能
それまでは「Editor Utility Blueprint」で実装するしかなかった
既存のエディターのように「型」を指定した状態でのUI作りが可能
アセットの選択を行えるようになった

46. 使い方[Single Property View]
Single Property View をデザイナーに配置
詳細から「Property Name」に
好きな名前を入れる

47. 「Property Name」と同じ名前の変数を作成
表示される見た目は「型」で自動的に変わる
おまじない的なBPをConstructに書く
デザイナーが勝手に変更されている

48. 「Name Override」に入力すると
枠の左の名前を変更できる
実行してみると、DataTable型がずらっと出てくる
かっこいいUIができた

49. データテーブルが選択できるようになったので、処理部分を変更

50. できました
デザインセンス×

51. よし！引き違いと片引き戸も実装しよう

52. ～数時間後～

54. 無事に自動化に成功
ちょっと大変だったところ…
両開きの回転方向の統一化
片引き戸の移動量の自動化
引き違い戸のグループの自動検出

55. 他に作った機能をパパっと紹介

56. カメラを置換する機能
• CADデータからインポートしたカメラメッシュ
(ただのStatic Mesh)をUE4のカメラに置き換える

57. ライトを自動配置＆設定する機能
• 特定のマテリアルに対して、
エミッシブマテリアルを貼り付けライトを生成する
• Sun Position Calculator(UE4.21)と連携して、
太陽光を設定できる

58. FBXに置換する機能
• ファイルパスを指定するとその中のStatic Meshを
すべて特定のメッシュと入れ替える
• 入れ替える対象はデータテーブルにて設定可能

59. データテーブルを編集できる機能
• レベル上のアクターを選択して、直接データテーブルへ書き込むことができる
• レベルを触りながら、挿入と削除が行えるのでデータテーブルよりも捗る

60. サイズからメッシュを置換する機能
• 名前ではなく、サイズを基準に置き換える
• 建築案件では、草木や人物などに有用な他
• 小物の一括置換などに使用できる

61. Editor Utility Widgetのいいノード

62. Get Selected Assets
コンテンツブラウザ上の選択中のアセットを
取得する
Get Selected Actors
レベル上の選択中のアクターを取得する
Rename Asset
アセットの名前の変更ができる

63. Editor Utility Widgetの注意点？

64. 注意点
• 処理を行った後は、レベル上のアクターを参照している変数を
Nullにする(空っぽにしておく)
• 参照を持った状態で、新しいレベルを開いたりすると
エディターがクラッシュしやすい

65. 注意点②
バージョン4.24.1では、「Fill Data Table from JSON String」が正常に動作しない
データテーブルに書き込むのは変わらないので
「 Fill Data Table from CSV String」を使用して、データテーブルに書き込む

66. 参考にさせていただいたサイト

67. 面白いことをやっている人がたくさん！
• キンアジのブログ様
【UE4】メモ：実はEditor Utility WidgetはBlutilityの完全上位互換だった話【★★】
• AYU MAX様
Editor Utility Widgetを使ってお絵かきして動的メッシュ生成機能を作った
• おかずさん
[UE4]エディタ上で動作するツール・エディタ拡張をUMGで簡単に作れる Editor Utility
Widget について
面白そうな機能をツイッターで自慢している猫さん（みんなのアイドル）

68. まとめ

69. • 通常のブループリント知識があれば作れる
• C++を書くことなく、ブループリントのみでエンジン拡張っぽ
いことができる
• 1度作ってしまえば、プロジェクトを跨いでも何度でも使える
• でもやっぱり、
ゲームデザイナーだからゲームが作りたい

70. おわり