1. 経緯/はじめに
以前、無理やりMicrosoftのPowerAppでWeb API/エンドポイントを作成して、「ブラウザでボタンを押すと、その押された数だけUEで作ったシーン上に置かれたNiagaraのパーティクルが増える」というものを作りました。
が、やはりPowerAppで…というのはちょっと問題がありすぎる。。
ちゃんとサーバサイドも構築して、中でPythonなりを動かしてエンドポイントを用意する必要があって…UE側のBlueprintノードの組み方は把握できても、サーバ/APIエンドポイントを用意するところで詰まっていました。
それがようやく、ReplitというIDEを用いることで、「Python使えるしフロントエンドも作れる、当然ホスティングもできる!」という環境を入手できたので(課金した!)実践。
タイミング的に「UE5ぷちコン映像編6th」とも重なったので、ぷちコン用に作った作品を流用して、そこで作ってみました。
自分用のメモではありますが、例えば「ChatGPTと連携した何かをUEで作りたい!」場合だとか、そのほかネットで拝借できるリアルタイムデータをUE上で表現したいときなどに使えると思うので、置いておきます。
左上の「SpawnRateとして表現」は「SpawnCount」の間違い。。
Delayノードの挟まってるタイミングやサーバ側のPollingタイミングのせいで少しタイムラグが発生していたり、パーティクルの調整が巧く行ってないのでわかりにくいかもですが、ブラウザ側の数字と一致しています(黄色い「その他」パーティクルは除外しています)
2. 使うもの
今回WebAPIで取得するデータは「JSON」である前提で話を進めます。
①「Http Post Request」ノード
プリインのプラグインを有効化する必要があります。
また、このプラグインは「Experimental(実験的機能)」です。
「Post」と書かれている部分は、「Verb」の部分を変更すると変わります。
②「Load JSON from String」ノード
JSONデータを処理してくれるノード。
③「Get Field」ノード
②で取得したJSONのデータ中のフィールドを指定することで値を取得することができます。
④WebAPI/エンドポイント
「お好みのものをご用意ください、OpenAIのAPIでも、株価でも、お天気でも」
・・・と、わかる人にはこれでわかると思うけど、ウェブのほうの話にあまりなじみがない方向けに例を用意しました。
「例」というか・・・半分「宣伝」ですがお許しを。
こんなささやかなウェブアプリを作成して開発中です。
「Solitude ParticleS」というウェブアプリで、「同じ作業をしている人がいるのを感じられる」と言ったコンセプトのものです。
https://solitude-particles.carrd.co/
選択できる「作業」にUEやBlenderもありますので、よろしければふらりとお立ち寄りください。もくもくと作業する仲間が増えると嬉しいです。
前述の通りReplitでこのようなウェブアプリを作成し、APIも取得できるように組んでみました。
こんな感じでAPIを発行しています。
▼APIのエンドポイント:現在Solitude ParticleSにて作業中の人数
https://solitude-particlev-1.replit.app/api/sessions/total
{
"timestamp": "2025-01-16T12:18:02.903367",
"total_active": 2
}
上のURLにアクセスすると、下のデータが表示されます。
このデータの内、”total_active”の「2」を、Niagara/パーティクルの(例えば)SpawnCountなどに読み込んで、反映させる、というシナリオです。
このAPIは御自由にお試しいただいて大丈夫です。
ただし、後述しますが「Event Tick」には繋がないこと…!
このエンドポイントのURLやエンドポイントの設計は今後変更される可能性があります。
変更があった場合は、別途公開する予定です(おそらくGitHubにて公開します)
とりあえず、注目すべき「用意するもの」はこんな感じです。
続いて、「”total_active”の値を、NiagaraのパーティクルのSpawnCountに適用してみる場合」の詳細です。
3. 組んでいきます
今回の作業はこのような順序で進めてみます。
① Niagaraを作って、変数を設定する
② ①のNiagaraをBP_Actorに組み込んで、このBPの中でJSONの処理等も行う
① Niagaraを作って、変数を設定する
今回はわかりやすいように、Niagaraのサンプルを利用します。
”SpawnCount”をあらかじめ持っている「AttributeReaderTrails」を選びました。
a) UserExposeで、変数を作ります。
”SpawnCount”はIntegerなので、型も指定(Int32)。
Parametersタブ > Active Overview > User Exposed : [+]で追加
b) エミッターのSpawnCountのところで、作成した[User: SpawnCount]を指定。
今までデフォの状態でパーティクルはランダム個数放出されていましたが、作成した変数「SpawnCount」には初期値が入っていないので、パーティクルは放出されない状態になります。
② 作ったNiagaraをBP_Actorに組み込む
かつ、ここで一緒にHttp Request/JSONの処理を組んでいきます。
a) Blueprint Classを作成
Actorを選択。
b) NiagaraコンポーネントをAdd
c) ①で作ったNiagaraを指定
続いてHttp Requestの処理を組んでいきます
(プラグインをActiveにしておいてください)
d) Search: “http post request”
[Event Graph」タブにて。
「http request」と間違えないように。
2枚目。
リクエストメソッドは今回は単純にデータを参照したいだけなので[Get]を選択。
URLの箇所にはエンドポイントのURLを記載します。
e) [Event Begin Play]に接続
※注意:ここで[Event Tick]は繋がないでください。
Tickを利用してしまうと、サーバ側にDoS攻撃を仕掛けるようなことをしてしまいます
(↑やらかして一瞬アクセスブロックされた)
ここで[Print String]などデバッグ表示を試すと、JSONのデータが返ってくるのがわかると思います。
f) エンドポイントから得たJSONデータをBP内で使えるように
[Load JSON from String]ノードを接続。
また、取得したJSONデータから欲しいデータ(フィールド)を指定します。
[Get Field]ノードも追加。
なお、このGet Fieldノードで指定できるField nameは1つだけです。
なので、もしJSONデータの階層が深く、末端近くにあるデータが欲しいときは、その階層の分Get Fieldノードを用意し、1つのField Nameに1つずつ、JSONのフィールド名を入力します。
例えば、(↓)1枚目のような状況で、マーカー部分のデータを取得したい場合は、2枚目の様に組みます。
g) 取得した値を変数に格納
ここまでくるともう、あとは皆さんのお好みに料理していただく段階だと思いますが、とりあえず自分のメモという形で書き進めます。
変数「currentCnt」を作成(String)
作成した変数CurrentCntに、取得した値(Value)をSet。
h) Delayノードを設置
更新頻度を調整できるように、とDelayノードを置いています。
お好みで。
i) Niagaraコンポーネントを設置し、[Set Niagara Variable(int32)】ノードを召喚。
この[Set Niagara Variable」はどうやら「型」の分だけ用意があるようです。
なので、適切なものを選択してください。
今回はSpawnCountがInt型なので、[Set Niagara Variable(int32)]を選択。
(SpawnRateなどを利用するときはint32ではなくFloatを要選択)
Target:先ほど用意したNiagaraのコンポーネントを繋ぎます
In Variable Name[]:Niagara内で作成した変数(User: SpawnCount)を記載(一字一句間違えないこと!)
In Value[]:ここのBPで作った変数CurrentCntを接続
j) [Set Niagara Variable()]から、ノードを[Http Get Request]へ接続。
これで、Delayの制御を受けつつループして、サーバ側の情報を取得できるように。
これで出来上がりです!
4. こんな感じに
ちょっとわかりにくい動画になってしまいましたが、放出されるパーティクル(3つ)と、左上の青字のデバッグ表示「3」が合致しています。
前述のサイト「Solitude ParticleS」にて、スマホや各ブラウザからアクセス+「Start」ボタンを押していただいて作業者数を増減していただくと挙動が確認になると思います。
あとがき。
Niagaraのパーティクル(SpawnCount)の変数化。
Http (Get) Requestとの連携。
……ようやく把握できた……orz……
まぁ、これをやるにはUEだけの話じゃなくて「サーバサイド」の用意も必要なので、3DCGだけしかやってないとなかなかたどり着きにくいお題じゃないかな、、と思ったりはします。(ガチの開発現場まで行くとそうでもなくなると思うものの)
私の場合はもともと3DCG/Blenderを始める前までは「ネットセキュリティ」方面の勉強をしていたこともあり、「これを実現するにはサーバサイドとフロントエンドも必要だ」と気づいていたものの、技量が無くてPythonを挫折、HTTP/CSSはなんとかワカル、Shell/サーバもまぁ何とか・・・でも一人で全部やるにはちょっとやっぱ無理だよ!!?という状況で、その状態でコロナ禍に突入したタイミングであったこともあり一度手放した技術スタック/スキルでした。
状況が変わったのはやはり「AI」ですね。
あと、オンラインでサーバのホスティングまでサポートしてくれるIDEがいつの間にかできてたこと。
・・・AIはClaudeを愛用していますが・・・ホント、コードはどんどん書いてくれる。。
おかげ様で「なんちゃってフルスタック人材」になることができました。
ClaudeはUEのBPノード図もスクショで渡せば理解してくれて「そこのノード、ソケットの接続をし損ねてるよ」とも教えてくれる。。
(BPに関する知識は50%ぐらい有用、残り50%は間違ってる、という印象でした)
・・・この調子だと、ちょっとがんばったらそのうちC++も触りにいけるんだろうか、、と言う気も少ししています。
あ。
今回利用した「Http Request」ノード。
これ、過去のUEバージョンからずっとExperimental状態ですが、今後正式なものになるんでしょうかねぇ。。
(じゃないと、ちゃんとした製品等を作りたい場合はC++頑張らないといけないのかな。。)
UEでWebAPI連携できるものを作成してる人たちに「どうやって実装してるんですか?」ってちょっと聞いてみたいですね。
ということで。
お読みいただきありがとうございました。
記載やスクショに不備等あるかもしれませんが、気が付いたら修正します。
また、よろしければ「Solitude ParticleS」、覗いてみてやってください。