コメントを自動生成してくれるコメントノードを開発した話(第4回UnrealEngine九州LT会 in バーチャル長崎)

3.3K Views

March 02, 25

スライド概要

profile-image

ゲームプログラマー┃C#┃C++┃Unity┃Unreal Engine┃Google Apps Script┃Git

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

コメントを自動生成してくれる コメントノードを開発した話 ツバサムス @tsubasamusu

2.

自己紹介 高校卒業後、富山の企業で UE5 を用いて iOS と Android 用のアプリを開発 昨年末に退職し、現在は一時的にフリーラ ンスで Unity や UE のお仕事をしていま す! 「ツバサムスBlog」という技術ブログをや っていて、最近は主に Unreal C++ につい て書いています! 白くまバーが好き!(九州との繋がり) ツバサムスBlog

3.

コメントノードを拡張した経緯 自分はブループリントで処理を作成する際にそ こそこコメントを書く方で、コメントを書くの も楽しいけど、やっぱり少し大変… コメントを自動で生成してくれるプラグイン (Auto Comment Generator)を作ろう!

4.

Auto Comment Generator 右上の再生ボタンを押すとコメントを生成してくれる!

5.

機能紹介① ~ボタンの見た目の調整~ Editor Preferences に「Auto Comment Generator」というカテゴリー が出現し、そこでボタンの位置や色、サイズ等を設定できる!

6.

機能紹介② ~コメントの言語の変更~ 生成するコメントの言語を簡単に変更できる! このプロパティは Editor Language のプロパティのソースコードを読 んで真似しながら作成!

7.

機能紹介③ ~言語モデルの変更と確認~

8.

機能紹介④ ~コメント生成時の条件の指定~ コメント生成時の条件も設定できる! この例では「answer in an angry manner(怒っている感じで答えて) 」 と指定している。

9.

処理の流れ① ~ノードのクラスの作成~ SGraphNodeComment クラスを継承したオリジナルのクラスを作成し ておく。 (ちなみにこのプラグインを開発する際に参考にさせていただいた 「Auto Size Comments」のように SGraphNode クラスを親クラスに してコメントノードの見た目を1から作っても良い!)

10.

処理の流れ② ~NodeFactory の登録~ FGraphPanelNodeFactory 構造体を継承したクラスを作成して CreateNode() を上書きし、FCoreDelegates::OnPostEngineInit のタイ ミングで FEdGraphUtilities::RegisterVisualNodeFactory() を使用して オリジナルの NodeFactory を登録する。

11.

処理の流れ③ ~エディタの設定の登録~ ISettingsModule::RegisterSettings() でオリジナルの設定を登録する。 IDetailCustomization インターフェースを実装したオリジナルのクラ ス(設定項目の見た目を編集する用のクラス)を FPropertyEditorModule::RegisterCustomClassLayout() で登録する。

12.

処理の流れ④ ~コメント生成ボタンの作成~ 基本的にゲーム画面はウィ ジェットブループリントで 作成するが、エディタ画面 の場合は Slate UI Framework というものを 使用して作成する。 今回はコメント生成ボタン をコメントノードの右上に 追加する。

13.

処理の流れ⑤ ~処理内容を JSON で表す~ コメント生成ボタンが押されたら、人間が見 ても分かりやすいようにコメントノード内の ノードの情報を JSON で表す。 コメントノード内のノードは UEdGraphNode_Comment::GetNodesUnder Comment() で簡単に取得できる! 右の画像は BeginPlay ノード単体を JSON で 表した様子。

14.

処理の流れ⑥ ~コンテンツの作成~ HTTP リクエストに設定するコ ンテンツ(JSON 形式の文字 列)を作成する。 ここで GPT のモデルやプロン プトを設定する。 コメント生成時の条件や言語 もここで設定。

15.

処理の流れ⑦ ~HTTP リクエストの送信~ FHttpModule::CreateRequest() を使用し て IHttpRequest インターフェースの共有 参照を作成する。 (ちなみにスマートポインタについては 「Unreal C++ のスマートポインタについ て」が参考になります) OpenAI の API ドキュメントを見ながら URL と Verb、Header、Content を設定 して IHttpRequest::ProcessRequest() で 送信する。

16.

処理の流れ⑧ ~コメントの変更~ HTTP レスポンスが返って来たらコメントを変更して完成! 大まかな処理の流れはこのような感じですが、この間にテキストのア ニメーションの制御やボタンの外観の変更などの処理も行っており、 これは GitHub からソースコードを全て見れます!

17.

余談① ~テクスチャの取得~ SImage::Image() 等でテクスチャを設定する際に ISlateStyle::GetBrush() の引数を変更するだけで、普段見かけるテクス チャを利用する事も出来る! 例えば「Persona.AssetClass.SkeletalMesh」と指定 すると、SkeletalMesh のアイコンのテクスチャを取 得できる!

18.

余談② ~Widget Reflector~ 「エディタのこの部分 はどんな作りになって るんだろう?」と思っ た時は Widget Reflector がオスス メ! ソースコードのファイ ル名と行がすぐに分か る!

19.

最後に UE は簡単にエディタを拡張できる作りにな っているので、エディタ拡張で遊んでみて はいかがでしょうか? 普段、プラグイン開発などで学んだ事を 「ツバサムスBlog」の「Unreal C++ の学習 メモ」に追加しているので良ければご覧く ださい! X(Twitter)でも日々発信しているのでフ ォローしていただけると嬉しいです! @tsubasamusu