LoginSignup
8

More than 1 year has passed since last update.

posted at

updated at

Udonでプリクラを作った話

はじめに

VRChat Advent Calendar 2021の14日目の記事を書かせていただきますmkc1370mkc1370@VRC)です。
前回はPetanocoさんの「[VRChat] 相対位置を維持するワールド固定の解説」でした。

今回はU#(Udon)で作成したプリクラの簡単な技術的な話を書きました。
前半はプリクラの概要で、後半はU#寄りな話です。
この記事で紹介しているプリクラを使ってみたい方はこちらのイベントをご覧ください。

注意 : この記事は2021年12月14日に作成されたもので、VRChat SDKやUdon Sharpの更新によって情報が古くなる可能性があります。

要約

  • プリクラ体験したい方はこちらのイベント
  • 開発中に変数同期方法が何度か変わった
  • 同期は大変
  • FieldChangeCallbackは良い
  • UdonBehaviourSyncModeは良い
  • UIを改善したい
  • U# 1.xの正式リリースが楽しみ

経緯

このプリクラの原案であるSDK2版プリクラは1年ほど前にせりかさんが作成していました。
当時のプリクラはSDK2ということもあり機能追加や複数台設置、Late Joiner対応はかなり難しい状態でした。
そこで、僕がちょうどUdonを触っていたということもありUdon対応と機能追加を担当することになりました。

プリクラの機能

このプリクラには主に3個の機能(画面)があります。
それぞれの画面で選択している情報はそのインスタンスに居る人にも同期されていて、複数人で同時に操作することが可能です。

レイアウト選択画面

この画面では撮影する台紙のレイアウトを決めます。
この画像の台紙の背景は無地ですが、必要に応じてオリジナルの背景を設定することもできます。
image.png

背面・前面画像選択画面

この画面ではそれぞれの写真の背面・前面の画像を選ぶことができます。
プリクラの写真のレイヤー構成は以下のようになっています。

  • 前面画像
  • 撮影画像(プレイヤー)
  • 背面画像

image.png

撮影画面

この画面では今までの画面で選択した情報を元に撮影を行います。
音声案内に合わせて自動で撮影が進みます。

苦労したこと

同期

プリクラの開発で一番苦労したのは同期です。
まず、U#(Udon)には主にSendCustomNetworkEventUdonSyncedの2つの同期方法があります。

SendCustomNetworkEvent

SendCustomNetworkEventはRPCのように全てのクライアントで指定したメソッドを呼び出すことができます。
しかし、一般的なネットワークライブラリと違いメソッドに引数を渡すことができません。
そのため、このような方法で間接的に引数を渡す方法が使われることがあります。

SendCustomNetworkEvent(NetworkEventTarget.All, $"Foo{index}");
public void Foo0() => Foo(0);
public void Foo1() => Foo(1);
public void Foo2() => Foo(2);
public void Foo3() => Foo(3);
public void Foo4() => Foo(4);
public void Foo5() => Foo(5);
public void Foo6() => Foo(6);

これであれば意図した挙動は実現できるのですが、保守性がかなり厳しくなってしまいます。
そこで今回は後述のUdonSyncedを使用して、引数付きのRPCのような挙動を実現しました。

UdonSynced

UdonSyncedはこのようにフィールドのアトリビュートに追加することで、そのフィールドの値を同期することができます。
ただし、同期できる型には制限があります。(詳しくはこちら

[UdonSynced]
private int _foo;

UdonSyncModeを指定して同期をするときの値の補完方法を設定することもできます。(今回は使用していません)

[UdonSynced(UdonSyncMode.Linear)]
private int _foo;

また、そのクラスのいずれかのフィールドに更新があった場合はOnDeserialization()で知ることができます。
このメソッドの挙動には何かと癖があり、VRChatの更新によって挙動が変わることが多いのでここでは詳しい内容については触れません。

public override void OnDeserialization()
{
    // いずれかのフィールドに更新があったよ
}

UdonSyncedは便利な機能ではあるのですが、同期するフィールドの数を増やしたり変数同期をするUdonBehaviourが増えると動作が不安定になることがありました。
そのため、同期するフィールドは極力1つのクラスにまとめて、フィールドの型もできる限り小さいものにしています。

UdonSyncedの変化

プリクラの開発中に2回ほど変数同期の大幅な更新があり、更新の度にプリクラも更新してきました。

UnU(2021年5月)

UnU(Udon Networking Update)とは2021年5月にリリースされたUdonのネットワーク周りの大幅なアップデートです。(リリースノート
このアップデートによって、オーナーが変数を同期するタイミングを手動で設定できるようになりました。
また、RequestSerializationを使った変数同期はレスポンスが早く、SendCustomNetworkEventよりも早く届く場合があります。

// 変数の値を更新する
_foo = 1;
// 変数の同期を要求する
RequestSerialization();
FieldChangeCallback (2021年7月)

FieldChangeCallbackは2021年7月のアップデートで使うことができるようになりました。
これを使うことにより、OnDeserializationではできなかった「どのフィールドの更新があったか」を知ることができます。
これは、Udon GraphでのOn Variable Changed Node相当の機能です(ドキュメント

U#では次のようにして使うことができます。

[UdonSynced, FieldChangeCallback(nameof(Foo))]
private int _foo;

public int Foo
{
    set
    {
        // 値が変更されたときの処理
        _foo = value;
    }
    get => _foo;
}

Synchronization Methodで詰まった話

少し話がずれますが、前述のUnUのアップデートで追加されたSynchronization Methodで少し詰まったことがありました。
Synchronization MethodはUdonBehaviourの同期方法を変更することができ、全く同期を必要としないものにはNoneを設定すると負荷を下げることができます。
この設定はUdonBehaviourのInspectorから変更することができます。
Attributeなし
UnUのアップデートと同時に不要なものは同期しない設定にしていました。
しかし、誤って必要なUdonBehaviourの設定もNoneにしてしまい、同期ができない状態になってしましました。
(これに気付くまで1時間以上掛かりました…)
そもそも、InspectorからそれぞれのGameObjectのコンポーネント毎にこの設定をするということ自体があまり便利ではない(コンポーネント毎ではなく、クラス毎に決めることの方が多いため)と思い、何かいい解決策が無いかと探していたところ、UdonBehaviourSyncModeのアトリビュートがあることを知りました。
このアトリビュートを使ってUdonSharpBehaviourを継承したクラスのBehaviourSyncModeを指定することにより、Inspector側からSynchronization Methodを変更することができなくなります。

[UdonBehaviourSyncMode(BehaviourSyncMode.Manual)]
public class SyncSample : UdonSharpBehaviour
{
}

Before
Attributeなし
After
Attributeあり

定期的な処理

プリクラ開発当初はタイマー用のフィールドを用意してUpdate()内でTime.deltaTime分を引いて、指定秒数経過したらメソッドを呼び出すような処理をしていました。
2021年3月頃の更新でSendCustomEventDelayedSeconds()SendCustomEventDelayedFrames()が使えるようになり、定期的にメソッドを呼び出すのが比較的簡単にできるようになりました。
しかし、MonoBehaviour.CancelInvoke()System.Threading.CancellationToken相当の機能が無いためキャンセルの機構を作るのが少し難しいです。
現在はキャンセルされたかどうかのフラグをフィールドに持たせておいて、呼び出されるメソッドの最初にそのフラグを確認する処理を挟んでいます。

今後の予定

改善したいこと

UIが"Made with unity"な見た目でワールドや筐体のクォリティに比べてだいぶ浮いてしまっています。
実際のプリクラを参考にしたり、デザイナの方と相談してもう少しUnity臭さを無くしたUIにできたらなと思っています。

U# 1.xの正式リリースが楽しみ

U#のメジャーアップデートであるU# 1.xのβ版がU#の開発者であるMerlinさんのDiscordで配布されています。
この更新では以下のような様々な便利な機能が追加されています。
しかし、2021年10月下旬から更新がされていないということもあり、VRChatの更新に伴って現在のβ版が使えなくなる可能性もあったので今回は採用を見送りました。
U# 1.xの正式版がリリースされたら一気に乗り換える作業を進めようかなと思っています。

おわりに

本来はもう少し踏み入った技術的な内容について書く予定でしたが、簡単な内容に留めることにしました。
単純に記事が長くなってしまうというのと、最近のU#について書かれている記事が少なかったので今回のような内容も少しは需要はあるのかなと思います。

Udonのギミックでガッツリ同期について考える必要のあるギミックを作ったのは今回が初めてで、最初に想定していた工数の10倍は掛かってしまいました。
今回のプリクラを通して学んだことは多いので、別で作っているUdon Graphをセルフホスティングするギミックにも活かしていく予定です。

今回は初めて技術的な記事をネットに公開してみました。
まだまだ不慣れなことが多いですが、何かイベントがあったときにでも何か公開できたらなと思います。

次回はshivaduke28さんの「【VRCAdvent Calendar】UdonでRealtimeGIっぽいことをする仕組み」です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
8