はじめのぼやき
「1. 経緯 / はじめに」を書いたら長くなってしまったので「あとがき」にしました。
なんだか、AIとのやりとりが最近増えたせいか、もともと長文書きだったのがさらに長文を書くようになってしまった気がしています。
(キーボードを新調したせいもあるかも。)
今回はちょっと手数も多いこともあって説明が雑になってしまっている気も。
動画か何かで撮りなおすほうがいいかもしれない。。
今回やること
今回は何がしたいかというと、こちら(動画)。
ウェブアプリでのAIとのやり取り(右のブラウザ)を、UEのUMG/UIでテキスト表示する方法です。
この記事の意図をより正しく把握したほうがよさそうな場合は「経緯 / あとがき」をお読みください。
目指すものや用いるBPノード
今回も、以前の記事にて利用した「HTTP Post Request」の利用を中心とした内容となります。
「ノード図を見ればわかるよ」と言う人向けのスクショはこんな感じ。
- UMG/UserInterfaceを作成(デザインとGraph)
- 作成したUMGを、Create WidgetノードでLevelBlueprintにて表示



JSONの処理のあたりは前回の記事とほぼ同じです。
相違点としては「AIからの応答=複数行」になるので、Textのノードを複数行(multi-line)対応に変更するなど、と言ったところ。
利用するAIは無料で利用可能なGoogleのGemini。
ただし、そのまま直接GeminiのAPIにアクセスするのではなく、今回もReplitにて、このGeminiのAPIを利用して作成した「自作Chat AI」アプリを用います。
(上の動画の右側に映っている、ブラウザで表示されている自作ウェブアプリ)
このアプリからWebAPI/JSONを発行して、それをUEから読み込む形です。
このアプリは前回のアプリと違ってDeployしていないので読者の皆様に自由にご利用いただくことはできません、すみません。。
Replitを利用すれば、恐らく無料枠で作成可能だと思います。
AI(Replit Agent)には「GeminiのAPIを使ってChatができるAIウェブアプリを作りたい。WebAPIも発行して」と伝えれば作ってくれるかと。。需要ありそうでしたらReplitのプロジェクトは配布します、Xあたりでお声がけください。
目指すもの(上の動画)をまとめると、
- ユーザーの入力はブラウザから
- そのユーザーのプロンプトを受け取ったAIの返答をUE側でテキスト表示
という感じ。
「そこまでやったなら入力もウェブブラウザではなくてUE内でできるようにしたら?」と言うところではありますが力尽きてしまったのでそれはまた今度。。
・・・さらに。
ここまで来たら、実運用としては「音声でテキストを読み上げてほしい」というところだとは思います。
が、UEに内臓されている「Text to Speech Engine Subsystem」という「text-to-speech」用のプラグインはデフォでは英語しか使えない模様。
(C++で書き換えれば日本語も喋ってくれるっぽい?)
AI各社のAPIを叩けばいい感じの音声も作れると思いますが・・・お財布と相談しながら良さげなAPIを模索中です。
ちなみに。
UE内臓のtext-to-speechに喋らせるとこんな感じ。
AIには「ユーザーは日本語で話しかけるけど、英語で反応してね」と指定。
組んでいきます:まずはUMG
ということで、まずはUMG/UserInterfaceを組みます。
a) UMG用のBlueprint(Widget Blueprint)を作成
b) 複数行表示できるテキストボックスを設置
赤矢印)[Designer]画面にて。
黄色矢印)Search Palettで以下の二つを探して画面に設置(D&Dにて)
- Canvas Panel
- text box、multi-lineのもの(EditableじゃないほうでOK)
c) (引続き上図)設置したテキストボックスの各設定
緑矢印)設置した複数行対応のtext boxに名前を付け、☑を付けて変数化する。
オレンジ矢印)適当な初期値の文字列と、文字色の設定(任意で)。
※ここでCompileすると文字化けするかもしれませんがそのままで大丈夫な様子。
※フォントサイズも任意で調整してください。
d) Graphに移動してノードを組む
赤矢印)[Graph]画面に移動。
黄色矢印)検索:[Add Custom Event]
- 「SetText」などと命名(次の図参照)
e) 右パネルの「▼Inputs (+)」より「ChatTxt」を追加。
Custom Event(SetText)を設置後に[Compile]する。
すると右のDetailsパネルに「▼Inputs (+)」が現れる(下図、赤矢印)
そこで「ChatTxt」を追加。String型で。
f) 「txt_MultLine」をGetで設置し、そこから「SetText(Multi-Line Text Box)」を置く。
Designer画面で☑を付けて変数化した「txt_MultLine」をドラッグ&ドロップで設置(「Get」で)。
設置したこのノードの青いソケットから「SetText(Multi-Line Text Box)」ノードを召喚。
※下図を見てのとおり似たものがいくつかあるので注意
g) 「▼VARIABLES (+)」より変数追加:「setTxt」をtext型で
赤矢印)変数を追加「setTxt(text型)」し、D&Dで配置(Setで)。
下図のとおりSetTextノードと接続。
h) CompileしてUMGできあがり。
User WidgetはこれでOK。
ココで作成したCustom EventのSetText(赤いノード)を、次のLevelBlueprintから召喚します。
・・・気が付いたら「set text」みたいな紛らわしい命名ばかりになっていた。。
(すみません。。)
続いてLevelBlueprint
「Open Level Blueprint」を開く。
横長になっちゃうのが明らかなので、Event BeginPlayからあらかじめ「Sequence」ノードを出して繋いでいます。
一つ目のノード、「Then 0」からスタート。
検索「Create Widget」ノードを設置(Construct NONEと書かれたノード)
a) Create Widget:作成した「UMG_TxtAPI」をClassで指定
黄色矢印)先ほどまで作業していた「UMG_TxtAPI」をClassに指定。
赤矢印) 「Add to Viewport」ノードを引き出して接続。
水色矢印)[▼VARIABLES(+)]にて変数を追加
「型」は、検索で作成済みの「UMG_TxtAPI」と検索すると出てくるのでこれを指
b) 作成した変数「UMG_TxtAPI」をSetで設置し、ReturnValueを接続
赤矢印)下図の通り設置+接続。
また、SETノードを引っ張って、先ほどUMG内で作成したカスタムイベント「SetText」を設置(検索すると「▼Class」内にいます)
c) Chat Txtを「Promote to Variable」で変数化
赤矢印)「Set Text」のカスタムイベントノードにある紫のソケットの上で右クリックし「Promote to Variable」。
ここまでで、現在LevelBPはこのような感じになっています。
これでSequenceの「Then 0」パートはできあがり。
おさらいのHTTP Get RequestとJSONの処理の部分
ココから先は前回の記事のHTTP RequestとJSONの処理の部分と同じです。
利用しているウェブアプリが異なるためURLとフィールド名が変わっていますが、ノードの構成としては同じなのでスクショのみで。
(あと、前回はintegerなどを扱っていましたが今回は用いる型がStringになっています)
全体はこんな感じ。
出来上がり
これができると、冒頭の動画のようなやり取りができるようになります。
経緯 / あとがき
先達てこのような記事を書きました。
上述の記事で実施したのは「UE上のアクターが持つ任意のパラメータを変数化して、それに外部から取得したWebAPIのデータを割り当てる」というものでした。
例えば記事中で利用した「NiagaraのパーティクルのSpawnCount」や、あるいはActorの「移動速度」とか、あるいはActorそのものの数など。
今度は、例えば最近...というかここ数年ずっと話題の「Chat系AI」などのように、ユーザーのプロンプトに反応して「テキスト」を返してくる系のWebAPIから得られるその「テキストの応答」をUMGで表示する方法を書いてみようと思います。
と言うのも。
(以下、筆者の「回想トーク」なのでスルーしてOK)
実を言うとまだ「ChatGPTシリーズ」がリリースされておらず「GPT-3」ぐらいしかなかったころ(確か2022年のGWのころだったと思う)、そのころすでにOpenAIのそのGPT-3とやり取りできるUE用のプラグインが無料で配布されていて、それを用いることでOpenAIのAI(GPT-3)とテキストでのやり取りが可能なアプリはUEで作成することが可能な状態でした。
しかしその後、2022年のStableDiffusionの爆発的認知拡大につられてOpenAIの認知も広まり、ChatGPT(というUI)もリリースされ、あとは御存じの通りChatGPTで利用可能なモデルも次々にリリースされ、GoogleやAnthoropic等の競合もAPIを解放し・・・という状況。
相変わらずWebAPIを経由して各社のAIとやり取りをしようとすると従量課金がかかる始末ですが(GoogleのGemini等を除く)、ココまでくると都合に合わせてAI/APIを切り替えられるようにもしたくなるし、あるいは例えばエヴァのMAGIを組んでみたい!みたいな柔軟な対応もできるようになっておいた方がいいな、、というか作ってみたいソレ、と思いまして、やり方を探ってみたのでそのメモです。
・・・そう。
これができると、エヴァのMAGIっぽいのをUEでも作れるんじゃないかな、って思ってるんですよね。
ということでいずれそれは作ってみようと思っています。
(エヴァちゃんと見てないからよくわからんけど。。)