UE5 PixelStreamingで、マウスカーソルを別の画像に変更してクリックイベントを作成する

こんにちは、ISID 金融ソリューション事業部の岡崎です。
今回はUE5 PixelStreamingで、マウスカーソルを別の画像に変更してクリックイベントを作成します。
前回までの記事でもPixelStreamingについて調べているので、まだご覧になっていない方はそちらも参考にしていただけると嬉しいです。

UE5 PixelStreamingで、WebUI経由でUE Blueprintを操作する
 UE5 PixelStreamingで、Blueprint経由でWebブラウザを操作する

はじめに

PixelStreamingを利用してブラウザからUEを操作する利用場面を考えた際、重要になってくるUXのひとつとしてマウスクリックが考えられます。
例えばUE上にショップのようなものを展開し、ユーザーの気になるオブジェクト（商品サンプルなど）がある場合、マウスクリックを通じてECサイトへ遷移することなどできます。
今回はそのようなPixelStreaming上でのマウスクリックやマウスカーソルに関する調査を行いました。

検証環境/ツール

Unreal Engine5.1.1
AWS EC2
- Windows_Server-2022-English-Full-Base-2023.01.19
Chrome ver.110.0.5481.177

実装手順

マウスカーソルの座標を取得
マウスカーソル用の画像を設定する
マウスカーソルの動きに画像が連動するようにする
作成したウィジェットをUEプロジェクトに適用する
作成したウィジェットをPixelStreamingでも動くようにする

1. マウスカーソルの座標を取得

まず初めにマウスがクリックした際の座標を取得するBlueprintを作成します。
適当なプロジェクトを用意して、LevelBlueprintを開きます。

Blueprintでマウスの座標を取得するための関数は2つ存在します。

Get Mouse Position
Get Mouse Position Scaled by DPI

今回は下の「Get Mouse Position Scaled by DPI」を使用します。
DPIとは解像度のことで、「Get Mouse Position Scaled by DPI」を使用すると解像度に合わせてマウスの座標を算出してくれます。

「Get Mouse Position Scaled by DPI」を使用してマウスの座標を取得するために、まずはコントローラーの情報を取得するための「Get Player Controller」のノードを作成します。
作成したノードのReturn Valueから上記で説明した「Get Mouse Position Scaled by DPI」のノードを作成します。

このLocation X/Y にマウスの座標が入っているので、それぞれを「Print String」でUEに表示させます。

このままでは、まだマウスの座標を表示させるためのイベントが設定されていないので、今回はマウスを左クリックした際に座標を表示させるようにします。
「Left Mouse Button」のイベントノードを作成し、先ほど作成した「Print String」に繋ぐことで、左クリックをした際にマウスの座標をUEに表示するイベントが発火するようになります。

※この段階でPixelStreamingでプレイをしても後述する設定がまだ完了していないためうまく作動しません。

2. マウスカーソル用の画像を設定する

次に、マウスカーソルを任意の画像に変えるためのBlueprintを作成します。
ContentDrawerを開き、任意の場所にWidgetBlueprintを作成します。（User Interface ＞ Widget Blueprint）
今回は「WBP_MouseCursor」という名前で作成しました。

続いて、マウスカーソルとして使う画像も用意します。今回はグレーの丸いpng画像を用意しました。
同じ階層にインポートを行います。

それではBlueprintの作成に入っていきます。
先ほど作成した「WBP_MouseCursor」を開き、デザイナーエディターで作業を行います。
WidgetBlueprintを開くと最初に表示されている画面がデザイナーエディターなので、そのまま進めます。
まずは左上のpaletteにImageと記述し、検索します。

出てきたImageを左下のWBP_MouseCursorの中にドラッグ&ドロップをして配置します。

次に左下に配置したImageを右クリックし、「Wrap With ＞ Canvas Panel」を選択し、Canvas Panelでラッピングします。
これにより使用する画像のサイズや、位置の調整を行えるようになります。

またImageに「image_数字」という名前が付けられているので、任意の名前に変更します。今回はgray_circleという名前に変更しています。

Imageを追加しただけだと、白い四角い画像が追加されているだけなので、先ほどインポートしたグレーの丸い画像に変更します。
画面右側のBrush配下のImageのセレクトボックスから追加した画像の名前を検索します。

画面右側からサイズも変更します。

菊の花のようになっている部分の中心がカーソルの先端部分になるので、追加したグレーの丸の中心が菊の花の中心になるように画面右のPosition X/Y を変更します。今回は「-32」を記述しました。

下画像のようになっていたら成功です。

続いてグラフエディターに移動します。

3. マウスカーソルの動きに画像が連動するようにする

マウスカーソルの動きに先ほど作成した画像を連動させるために、グラフエディターを使用します。
画面右上のGraphを選択し、グラフエディターに移動します。

先ほど作成したグレーの丸い画像をマウスの位置に置くために、一番初めに行ったマウスの座標を取得する処理と同じものを作成します。
「Get Player Controller」のノードを作成し、「Get Mouse Position Scaled by DPI」のノードにつなげます。

次に、先ほどデザイナーで作成したgray_circleを使うために、ノード追加で「Get gray_circle」と検索し追加します。

続いて、追加した「Gray Circle」からピンを伸ばし、「Slot as Canvas Slot」ノードを追加します。

次に、「Slot as Canvas Slot」のReturn Value から「Set Position」ノードを繋ぎ、先ほど作った「Get Mouse Position Scaled by DPI」のLocation X/Y も「Set Position」に繋ぎます。

最後に「Event Tick」と「Set Position」を繋いでグラフエディターでの作業も完了です。

4. 作成したウィジェットをUEプロジェクトに適用する

今まで作成したWidgetBlueprintを本プロジェクトに追加するために、LevelBlueprintに処理を追加します。
今回は「Event BeginPlay」を使用します。実行ピンを伸ばし「Create Widget」ノードを作成します。

作成すると属性の中にクラスを選択するセレクトボックスがあるので、先ほど作成した「WBP_MouseCursor」を選択します。

先ほど作成した「Create Widget」ノードから「Add to Viewport」を繋げます。これでUEをプレイ時にマウスカーソル位置にグレーの丸い画像が表示されるようになります。

実際にプレイ画面を見てみると、マウスカーソルの位置にグレーの画像が表示されていることと、クリックした位置で座標がプリントされていることが確認できます。

5. 作成したウィジェットをPixelStreamingでも動くようにする

次は、作成したプロジェクトをPixelStreamingでブラウザに反映させていきます。
PixelStreamingの設定方法はこちらの金融ソリューション事業部の山下さんの記事を参考にしました。

ここまで作成したものをPixelStreaming上で接続すると、マウスクリックを行うたびにポインターが画面の左上（座標0.0の位置）に移動してしまいます。

これはPixelStreamingを行う際、プレイヤーがUE画面をクリックすると、マウスカーソルをキャプチャしてロックする仕様で起こる事象なので、この設定を変えていきます。

変更するファイルは、こちらの記事（UE5 PixelStreamingで、WebUI経由でUE Blueprintを操作する）で修正を行ったplayer.htmlになります。
先ほどの記事で「emitUIInteraction」を追加している近くの箇所で下記記述を追加します。

//マウスイベント変更
inputOptions.controlScheme = ControlSchemeType.HoveringMouse;
inputOptions.hideBrowserCursor = true;

この設定により、カーソルの制御をUE画面上でも行えるようになります。
またカーソルを隠すことにより、UE画面上でのカーソルを設定したグレーの丸い画像に置き換えることができます。

これにより、マウスクリックを行うたびにポインターが画面の左上（座標0.0の位置）に移動してしまうこともなく、想定通りの挙動をブラウザ上でも行うことができます。

所感

今回はPixelStreamingのプラグインを用いて、マウスクリックイベント（クリックした座標を表示させる）と、マウスカーソルを任意の画像に変更させてみました。
UEだけでプロジェクトを行う時とPixelStreamingを用いる時で、ユーザーインプットの扱い方があまりよくわかっていませんでしたが、今回の実装でよく理解することができました。

今回の調査を通じて、マウスクリックを使用してキャラクターオブジェクトの移動や、ECサイトへの遷移などができることで、ゲームに慣れていない人もさまざまなシーンでUEを使うことができるのではないかと感じました。

現在ISIDはweb3領域のグループ横断組織を立ち上げ、Web3およびメタバース領域のR&Dを行っております（カテゴリー「3DCG」の記事はこちら）。もし本領域にご興味のある方や、一緒にチャレンジしていきたい方は、ぜひお気軽にご連絡ください！
私たちと同じチームで働いてくれる仲間を、是非お待ちしております！
ISID採用ページ（Web3/メタバース/AI）