👾

【Verse】UEFNでカスタムアバターを使用する方法

2024/01/24に公開

Unreal Engine

やりたいこと

下記の動画のようにマップ上でユーザーがカスタムのアバターを着用できるようにしたい。
今回は簡易的にユーザーがスポーンした瞬間にアバターを変化させる。

背景

日本語でカスタムアセットの着用方法を解説している人がほぼ居なかったため。

何で実装するのか

UEFN・Verse
（学習初めて間もないため、使っている単語などがおかしいかもしれないです）

実装の手順

アバターの準備

着用するアバターをSketchfabからDLします。

アバターのダウンロード
今回は例として鳥のアセット(下記アバター)を利用させていただきます。
下記のリンクから3Dモデルをfbx形式でDLします。
https://sketchfab.com/3d-models/phoenix-bird-844ba0cf144a413ea92c779f18912042

ダウンロード後にファイルを展開して解凍します。

DLしたアバターのFBXファイルをimport

事前にUEFNで新規のプロジェクトを作成しておきます。

先ほどDLしてたsourceフォルダ配下のfly.fbxをコンテンツドロワーにあるコンテンツフォルダ配下にドラッグアンドドロップします。

importの際にFBXインポートオプションというウィンドウが現れるので
・アニメーションをインポート
にチェックが入っていることを確認し
「全てインポート」
します。

メッセージログが出てきますがクリアして無視します。

コンテンツドロワーにスケルトンやスケルタルメッシュ、アニメーション等がimportされていることを確認します。

アバターをレベルに配置

スケルトンをレベル上にドラッグアンドドロップします。

テクスチャimport

テクスチャをimportするために
コンテンツドロワーのコンテンツフォルダ上で→クリックして新規フォルダを作成します。

ダウンロードしたフォルダにtextureフォルダがあるので、フォルダ内のファイルを全てドラッグアンドドロップします。

下記のようにテクスチャがimportされていることを確認します。

マテリアルにテクスチャを貼り付けます。

コンテンツフォルダ配下の下記マテリアル(01_aで終わる)ファイルをダブルクリックして開きます。

編集用のウィンドウが開きます。

デフォルトのParamsを削除して、ウィンドウ下方のコンテンツドロワーからimportしたテクスチャのTex_Ride_FengHuang_01a_D_Aをドラッグアンドドロップします。

下記のようにRGBとベースカラーを紐づけます。

その後左上の「適用」を押し保存します。

するとレベル上の鳥にテクスチャが反映されているのを確認できます。

同様に、01_bで終わるマテリアルをダブルクリックして先ほどと同様にTex_Ride_FengHuang_01b_D_Aをベースカラーと紐づけます。

変更を適用すると下記のようにテクスチャが反映されます。

アバターを小道具に変換する
独自のアセットをブループリントクラスとして「小道具」に変換することで
アセットレベル上で使用する事でキャラクターは動くようになります。

コンテンツフォルダ上で右クリックしてブループリントクラスを選択します。

建築小道具をクリックして作成します。

BP_fireflyという名前をつけます。

次に作成したBP_fireflyをダブルクリックしてウィンドウを開きます。

コンテンツドロワーを開き、
スタティックメッシュコンポーネント配下に
「fly」というスケルタルメッシュをドラッグアンドドロップします。

アニメーションをつける
先ほどのウィンドウの右側の詳細ウィンドウに
Animation項目があるので、
「なし」から「fly_Anim」に変更します。

鳥にアニメーションが付くのが確認できれば、左上のコンパイルボタンを押します。

プログラムを実装する

プログラムを実装して実際に着用してみましょう。

UEFNでVerseのファイルを作成

メインのウィンドウの左上からverseExplorerをクリック
右側にEditorが出てくるので新規でverseファイルを作成
「fg_game」というファイル名で今回は作成

下記のコードをコピペ

エディタでソースコードを開き、下記コードをコピペします。

簡単に説明すると、スポーンしているときに着用しているアバターを見えなくして、
変わりにカスタムのアバターを表示し続けるようにループ処理を実行しています。
また、ユーザーが動くと座標や回転を検知して同じ座標に表示したり、向きを変えています。


using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/Diagnostics }
using { /Fortnite.com/Characters }
using { /UnrealEngine.com/Temporary/SpatialMath }

# See https://dev.epicgames.com/documentation/en-us/uefn/create-your-own-device-in-verse for how to create a verse device.

# A Verse-authored creative device that can be placed in a level
fg_game := class(creative_device):

    # A Fortnite prop that has been placed or spawned in the island.
    @editable FGChar : creative_prop = creative_prop{}

    @editable
    Speed:movement_modulator_device=movement_modulator_device{}

    @editable
    Trigger:trigger_device=trigger_device{}

    # Runs when the device is started in a running game
    OnBegin<override>()<suspends>:void=

        ALLPlayers := GetPlayspace().GetPlayers()
        if (Player := ALLPlayers[0], Agent := agent[Player], Fort := Agent.GetFortCharacter[]):
            Fort.Hide()
            spawn:
                UpdateCharacter(Fort, vector3{Z:=-90.0, Y:=-100.0})
    
    UpdateCharacter(Player : fort_character, Offset : vector3)<suspends>:void=
        loop:
            Sleep(0.0)

            # 移動後ユーザーの位置をNewPosとして定義
            NewPos := Player.GetTransform().Translation + Offset

            # キャラに新しい座標を与えて移動させる
            if (FGChar.TeleportTo[NewPos, Player.GetTransform().Rotation]) {}

ビルドしてログを確認
verseクラスをレベル上に配置

コンテンツドロワーのCreativeDevicesに作成したverseのクラスがあるのでこれをレベル上にドラッグアンドドロップ
下記のようなアセットを確認できれば大丈夫です

Verseで鳥のブループリントを取得
右側のアウトラーナーウィンドウから、作成したfg gameのインスタンスをクリック
下記画像のFG Charに鳥を設定します。
これを設定することでブループリントをVerse上で取得できるようになります。

実行してみる

セッションを開始して実際に動くのかを確認します。

カメラの位置を編集する

今回は割愛しますが
カメラが近すぎて鳥が見えないのでカメラ位置を編集します。

完成物（動画）

改良ポイント

・動きがトロすぎるので、3倍くらいの動きにする
・動きがカクついているので、スムーズに動く方法がないか模索する
・視点を上下に移せないのでできるようにする

応用アイデア

・モンハンの猫のように、自分の後をついてくる猫を実装する。
・ホラー映画のように自分に付き纏ってくるお化けの実装
・武器や服の着用
服だけ違う同じアバターを複数用意しておけば、服の切り替えなどもできそうです。

参考資料

最後に

・Fortnite特化型の受託開発会社FortStudioにてマップ制作しておりますので、
何かあればXにてお気軽にご連絡ください。
https://twitter.com/inf_twy