はじめに
VRChatのワールドでuGUIを使う際の注意事項や必要事項などを
具体例をあげて紹介していきます
本記事ではUnity本来のuGUI寄りの使い方を紹介しています
また, ワールド作成をしたことある人向けの内容になってると思います
VRChatでの黒魔術的な使い方(AnimationからPressでuGUIのButtonを叩いて~)はこの記事では解説しません
butadiene121さんのこちらの動画を参考にどうぞ
また、uGUI自体の一般的な使い方についてはここでは紹介しないので各自調べてみてください
uGUIとは
Unityで提供されているGUI構築を簡単にする機能
例) Button, InputFiled, Slider
VRChatでは単にuGUIだけだと基本的にはローカルでしか動作しません
(操作内容は他人と同期しません)
VRCSDKのVRC_Triggerをうまく絡ませたりすることで同期するuGUIを作ることができます
(2019/10/19更新) 海外の方が同期するuGUIスライダーを公開されました
https://twitter.com/Phasedragoon/status/1185207396202774528
これを使う方法は@hatuxesさんがこちらの記事で紹介されています
https://qiita.com/hatuxes/items/7be6e1ef4c5fb446512b
操作できるuGUIを設定する
VRChatのワールドで操作可能なuGUIにするためには以下が必ず必要です
ワールドに設置する場合, CanvasのRenderModeをWorldSpaceにしてScaleやサイズを調整する
(Scaleそれぞれ0.005, Width:300, Height:200とか)
CanvasのレイヤーをDefaultにする
(UIもしくはUiMenuの場合はクイックメニューを開いている際にレイキャストが出て操作できる)
SliderのNavigationはNoneにするように
(Noneにしないとアバター移動時にSliderを動かしてしまう)
Button以外はすべてNoneにしてもいいと思います
操作しているとEventSystemというのが作成されますが, これは必要なので削除せずに残しておいてください
同期するuGUIのButtonを作る
- VRC_TriggerをButtonにつけてOnClick()でVRC_TriggerのInteractを設定する (VRC_Triggerは必ずしもButtonにつけないといけないわけではないです)
- VRC_TriggerのOnInteractが実行されるため、ここにAlwaysUnBufferedなどを設定し、
Buttonを押したときのActionを設定する
VRC_TriggerでCustomで設定してButtonからExecuteCustomTriggerで発火させても良い
InputFiledで動画URLをSyncVideoPlayerなどに入力する
Youtubeなどの動画URLをSyncVideoPlayer(またはSyncVideoStream(以下省略))に動的に追加する方法です
入力内容は同期しませんが, SyncVideoPlayerの本来の仕様で再生される動画内容は同期します
SyncVideoPlayerのOwnerのユーザーが入力することで入力内容が反映されます
(特に意図的にOwnerを切り替えることをしていなければ, おそらくインスタンスのMasterがOwnerになっている)
- InputFiledのOnEndEditの右下の+を押す
- RuntimeOnlyの下の選択部分でSyncVideoPlayerがついたオブジェクトを選択する(またはドラッグ&ドロップする)
- RuntimeOnlyの右側にあるところでSyncVideoPlayerのAddURLを選択する(この時, Dynamic(上のほう)のAddURLを選択)
- これで入力後にEnterを押すと, SyncVideoPlayerに新しい動画URLとして追加される。
その後追加されたURLの動画を再生するように組めばよい
追加前にSyncVideoPlayerに対してStop->Clearをして, 動画URL追加後にPlayすると追加した動画が再生できます(あくまで1例)
その際に動画URL追加後に反映に時間がかかるため5秒ぐらい開けてPlayする必要があります
SliderでAudioSourceの音量を変更する
ワールドのBGMやSyncVideoPlayerの音量などを調整する方法です
- OnValueChanged(Single)に対象のAudioSourceを設定する
Dynamic float(上のほう)のfloat volumeを選択する
(SliderのValueの値がAudioSource.volumeに入るようになる)
ちなみにButton等でAudioSource.muteをtrueにするようにするとミュートボタンを作れる
また, SilderAでSliderBのmaxValueを設定するとSliderAを操作することでSliderBの最大値を変更するみたいな使い方もできる
ここらへんは同期せず、ローカルで動作する
(同期するSliderはTPCスライダーを使わないといけない。もしくはAnimator周りを絡ませる(結構複雑な機構))
別のSliderも同時に操作する
Sliderを操作すると別のSliderも一緒に動くみたいなこともできます
- SliderAのOnValueChangedにSliderBのDynamic floatのvalueを設定する
- 逆も同じように設定する。SliderAを動かすとSliderBも動くようになる
参考
VRChat技術メモ帳 uGUI : 下のほうに実装サンプルもあります
JetDogs-Prefabs : Jetdogさんのワールド制作向けPrefab集で一部uGUIのものが含まれています
uGUIについての解説
【Unity入門】Canvasって何が出来るの?UIの基礎を学ぼう!
uGUI (UnityのUI機能) の使い方まとめ