コメントを自動生成してくれるコメントノードを開発した話（第4回UnrealEngine九州LT会 in バーチャル長崎）
3.7K Views
March 02, 25
スライド概要
・イベントページ：https://ue-9shu.connpass.com/event/340751
・講演動画：https://www.youtube.com/live/3m3_8pX71MM
ゲームプログラマー┃C#┃C++┃Unity┃Unreal Engine┃Google Apps Script┃Git
関連スライド
各ページのテキスト
コメントを自動生成してくれる コメントノードを開発した話 ツバサムス @tsubasamusu
自己紹介 高校卒業後、富山の企業で UE5 を用いて iOS と Android 用のアプリを開発 昨年末に退職し、現在は一時的にフリーラ ンスで Unity や UE のお仕事をしていま す！ 「ツバサムスBlog」という技術ブログをや っていて、最近は主に Unreal C++ につい て書いています！ 白くまバーが好き！（九州との繋がり） ツバサムスBlog
コメントノードを拡張した経緯 自分はブループリントで処理を作成する際にそ こそこコメントを書く方で、コメントを書くの も楽しいけど、やっぱり少し大変… コメントを自動で生成してくれるプラグイン （Auto Comment Generator）を作ろう！
Auto Comment Generator 右上の再生ボタンを押すとコメントを生成してくれる！
機能紹介① ~ボタンの見た目の調整~ Editor Preferences に「Auto Comment Generator」というカテゴリー が出現し、そこでボタンの位置や色、サイズ等を設定できる！
機能紹介② ~コメントの言語の変更~ 生成するコメントの言語を簡単に変更できる！ このプロパティは Editor Language のプロパティのソースコードを読 んで真似しながら作成！
機能紹介③ ~言語モデルの変更と確認~
機能紹介④ ~コメント生成時の条件の指定~ コメント生成時の条件も設定できる！ この例では「answer in an angry manner（怒っている感じで答えて） 」 と指定している。
処理の流れ① ~ノードのクラスの作成~ SGraphNodeComment クラスを継承したオリジナルのクラスを作成し ておく。 （ちなみにこのプラグインを開発する際に参考にさせていただいた 「Auto Size Comments」のように SGraphNode クラスを親クラスに してコメントノードの見た目を1から作っても良い！）
処理の流れ② ~NodeFactory の登録~ FGraphPanelNodeFactory 構造体を継承したクラスを作成して CreateNode() を上書きし、FCoreDelegates::OnPostEngineInit のタイ ミングで FEdGraphUtilities::RegisterVisualNodeFactory() を使用して オリジナルの NodeFactory を登録する。
処理の流れ③ ~エディタの設定の登録~ ISettingsModule::RegisterSettings() でオリジナルの設定を登録する。 IDetailCustomization インターフェースを実装したオリジナルのクラ ス（設定項目の見た目を編集する用のクラス）を FPropertyEditorModule::RegisterCustomClassLayout() で登録する。
処理の流れ④ ~コメント生成ボタンの作成~ 基本的にゲーム画面はウィ ジェットブループリントで 作成するが、エディタ画面 の場合は Slate UI Framework というものを 使用して作成する。 今回はコメント生成ボタン をコメントノードの右上に 追加する。
処理の流れ⑤ ~処理内容を JSON で表す~ コメント生成ボタンが押されたら、人間が見 ても分かりやすいようにコメントノード内の ノードの情報を JSON で表す。 コメントノード内のノードは UEdGraphNode_Comment::GetNodesUnder Comment() で簡単に取得できる！ 右の画像は BeginPlay ノード単体を JSON で 表した様子。
処理の流れ⑥ ~コンテンツの作成~ HTTP リクエストに設定するコ ンテンツ（JSON 形式の文字 列）を作成する。 ここで GPT のモデルやプロン プトを設定する。 コメント生成時の条件や言語 もここで設定。
処理の流れ⑦ ~HTTP リクエストの送信~ FHttpModule::CreateRequest() を使用し て IHttpRequest インターフェースの共有 参照を作成する。 （ちなみにスマートポインタについては 「Unreal C++ のスマートポインタについ て」が参考になります） OpenAI の API ドキュメントを見ながら URL と Verb、Header、Content を設定 して IHttpRequest::ProcessRequest() で 送信する。
処理の流れ⑧ ~コメントの変更~ HTTP レスポンスが返って来たらコメントを変更して完成！ 大まかな処理の流れはこのような感じですが、この間にテキストのア ニメーションの制御やボタンの外観の変更などの処理も行っており、 これは GitHub からソースコードを全て見れます！
余談① ~テクスチャの取得~ SImage::Image() 等でテクスチャを設定する際に ISlateStyle::GetBrush() の引数を変更するだけで、普段見かけるテクス チャを利用する事も出来る！ 例えば「Persona.AssetClass.SkeletalMesh」と指定 すると、SkeletalMesh のアイコンのテクスチャを取 得できる！
余談② ~Widget Reflector~ 「エディタのこの部分 はどんな作りになって るんだろう？」と思っ た時は Widget Reflector がオスス メ！ ソースコードのファイ ル名と行がすぐに分か る！
最後に UE は簡単にエディタを拡張できる作りにな っているので、エディタ拡張で遊んでみて はいかがでしょうか？ 普段、プラグイン開発などで学んだ事を 「ツバサムスBlog」の「Unreal C++ の学習 メモ」に追加しているので良ければご覧く ださい！ X（Twitter）でも日々発信しているのでフ ォローしていただけると嬉しいです！ @tsubasamusu