関連ブログ
- [UE4][UE5]開発環境の容量を少しでも減らす 2024.08.14UE
- [UE5] PushModel型のReplicationを使い、ネットワーク最適化を図る 2024.05.29UE
- [UE5]マテリアルでメッシュをスケールする方法 2024.01.17UE
CATEGORY
2021.05.26UE4UE/ Editor拡張
執筆バージョン: Unreal Engine 4.26 |
今回は Remote Control Web Interfaceを紹介したいと思います。
※現在、ベータ版ですので、実制作に使用する場合は注意してください。
UE4.23にネットワークを利用し、Unreal Editorを操作するRemote Control APIが提供されていました。
しかし、APIのみしか提供されておらず、コマンドでの利用もしくは、UIの独自実装が必要でした。
UE4.26から追加されたリモートコントロールプリセットとRemote Control Web Interface プラグインを利用することにより
あらかじめ用意されたカッコイイUIを利用することができるようになり、簡単に利用することが出来ます。
以下のページからプラグインをインストールして下さい。
https://www.unrealengine.com/marketplace/ja/product/remote-control-web-interface?sessionInvalidated=true
Node.js 公式サイト
https://nodejs.org/en/download/
※インストール後、PCを再起動して下さい。
「Remote Control API」と「Remote Control Web Interface」プラグインを有効にしてUnrealEditorを再起動して下さい。
UnrealEditorの再起動後、Node.jsの動作環境の構築準備処理が実行されます。 完了するまで待って下さい。
動作環境によりポート番号の変更が必要であれば、ProjectSettingsからポート番号を変更して下さい。
Web Remote Control の設定確認
Remote Control Web Interfaceの設定確認
コントロールパネル内で「その他 (英語:Miscellaneous)」→「リモートコントロールプリセット(英語:Remote Control Preset)」アセットを追加して下さい。
追加したリモートコントロールプレセットアセットをダブルクリックでリモートコントロールパネルを表示させます。
※このとき「編集モード(英語:EditorMode)」にチェックマークがついていなければチェックをつけて下さい。
リモートコントロールパネルを表示を表示されている状態になると、詳細パネルの各プロパティに目の閉じたアイコンが表示されるようになります。
アイコンをクリックし、目を開いた状態にすると、リモートコントロールで操作することができます。
なお、この目のアイコンが表示されるのは詳細パネルだけではなく、他のアセットのパネル(例:テクスチャ)でも表示されます。
一部試してみましたが、操作することが可能ですが、即時反映されないものやウィンドウが閉じると操作ができくなるプロパティがあるようですので注意して下さい。(まだベータなので…)
ウェブブラウザを利用してhttp://127.0.0.1:7000(Remote Control Web Interfaceのポート番号変更した場合nはその番号)にアクセスすると下のような画面が表示されます。
① 表示切り替え用タブ
② 新規タブ追加
③ モード切り替えボタン
・Edit
機能・UIの追加がでます。
リモートでの操作エディタも同時にできます。
・Play
機能・UIの追加ができません。
リモートでの操作エディタはできます。
誤操作でUIを消したり、変更したくない場合はこのモードにしてください。
④ タブレイアウト
タブ内に複数のUIを表示するパネルのレイアウトを変更できます。
⑤タブのアイコン変更
⑥タブの名前変更
⑦タブの複製
1.+のアイコンをクリックして下さい
2.リモートコントロールプレセットアセットに追加した項目が表示されます。
3.UIを追加したいプロパティをクリックして下さい。
4.UIの種類を選択して下さい。
5.「Save」ボタンを押して下さい。
※となりの「Save&Create another」ボタンは、追加後ウィンドウは閉じないため、連続で追加することができます。
名称 | UI | 使用できるプロパティ型 |
---|---|---|
スライダー | float int Vector Rotator Color 等 数値を扱うもの全般 |
|
ゲージ | float int Vector Rotator |
|
ジョイスティック | Vector Rotator |
|
カラーピッカー | Color | |
トグル | Boolean | |
テキスト | String Text ※Nameは対応されていません |
|
ボタン | イベント・関数 |
以下のボタンを押すことにより追加したUIのレイアウトを同じUIでまとめる表示とすべて表示を切り替えることができます。
プラグインはランタイムになっていますが… 現状はUnrealEditor上で配置されているもの、アセットを操作することしかできないようです。 (いろいろと頑張ってはみたのですが、使えませんでした。)
パッケージすると利用できないのが難点ですが、ネットワークを利用して外部からエディタを操作できるのは、おもしろい仕組みです。
こっそりプラグインを適用して、「http://PC名:7000」で他人のエディタにアクセスして勝手に動かすいたずらが出来ます。
Web Interfaceの方も使ってみると、作り込んでいるUIで使いやすいです。