LoginSignup
42
37

More than 3 years have passed since last update.

@gatosyocora(がとー しょこら)

VRChatのワールドでuGUIを使う

Last updated at Posted at 2019-05-14

はじめに

VRChatのワールドでuGUIを使う際の注意事項や必要事項などを
具体例をあげて紹介していきます

本記事ではUnity本来のuGUI寄りの使い方を紹介しています
また, ワールド作成をしたことある人向けの内容になってると思います

VRChatでの黒魔術的な使い方（AnimationからPressでuGUIのButtonを叩いて～）はこの記事では解説しません
butadiene121さんのこちらの動画を参考にどうぞ

また、uGUI自体の一般的な使い方についてはここでは紹介しないので各自調べてみてください

uGUIとは

image.png
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にするためには以下が必ず必要です

  1. Create>UI>Canvasで作成し, CanvasにVRC_UiShapeコンポーネントをつける
    image.png

  2. ワールドに設置する場合, CanvasのRenderModeをWorldSpaceにしてScaleやサイズを調整する

    (Scaleそれぞれ0.005, Width:300, Height:200とか)
    image.png

  3. CanvasのレイヤーをDefaultにする

    (UIもしくはUiMenuの場合はクイックメニューを開いている際にレイキャストが出て操作できる)
    image.png

  4. 作成したCanvasの子にCreate>UIでButtonやSliderなどを追加していく（子にしていく）
    image.png

SliderのNavigationはNoneにするように
(Noneにしないとアバター移動時にSliderを動かしてしまう)
Button以外はすべてNoneにしてもいいと思います
image.png

操作しているとEventSystemというのが作成されますが, これは必要なので削除せずに残しておいてください
image.png

同期するuGUIのButtonを作る

  1. VRC_TriggerをButtonにつけてOnClick()でVRC_TriggerのInteractを設定する (VRC_Triggerは必ずしもButtonにつけないといけないわけではないです)
  2. VRC_TriggerのOnInteractが実行されるため、ここにAlwaysUnBufferedなどを設定し、
    Buttonを押したときのActionを設定する

image.png

VRC_TriggerでCustomで設定してButtonからExecuteCustomTriggerで発火させても良い

image.png

InputFiledで動画URLをSyncVideoPlayerなどに入力する

Youtubeなどの動画URLをSyncVideoPlayer(またはSyncVideoStream(以下省略))に動的に追加する方法です
入力内容は同期しませんが, SyncVideoPlayerの本来の仕様で再生される動画内容は同期します
SyncVideoPlayerのOwnerのユーザーが入力することで入力内容が反映されます
(特に意図的にOwnerを切り替えることをしていなければ, おそらくインスタンスのMasterがOwnerになっている)

  1. InputFiledのOnEndEditの右下の+を押す
  2. RuntimeOnlyの下の選択部分でSyncVideoPlayerがついたオブジェクトを選択する（またはドラッグ&ドロップする）
  3. RuntimeOnlyの右側にあるところでSyncVideoPlayerのAddURLを選択する（この時, Dynamic(上のほう)のAddURLを選択）
  4. これで入力後にEnterを押すと, SyncVideoPlayerに新しい動画URLとして追加される。
    その後追加されたURLの動画を再生するように組めばよい

image.png

追加前にSyncVideoPlayerに対してStop->Clearをして, 動画URL追加後にPlayすると追加した動画が再生できます（あくまで1例）
その際に動画URL追加後に反映に時間がかかるため5秒ぐらい開けてPlayする必要があります

image.png

SliderでAudioSourceの音量を変更する

ワールドのBGMやSyncVideoPlayerの音量などを調整する方法です

  1. OnValueChanged(Single)に対象のAudioSourceを設定する

  2. Dynamic float（上のほう）のfloat volumeを選択する
    （SliderのValueの値がAudioSource.volumeに入るようになる）
    image.png

  3. SliderのMin ValueとMaxValue, Valueを設定する
    image.png

ちなみにButton等でAudioSource.muteをtrueにするようにするとミュートボタンを作れる
image.png
また, SilderAでSliderBのmaxValueを設定するとSliderAを操作することでSliderBの最大値を変更するみたいな使い方もできる

ここらへんは同期せず、ローカルで動作する
(同期するSliderはTPCスライダーを使わないといけない。もしくはAnimator周りを絡ませる(結構複雑な機構))

別のSliderも同時に操作する

Sliderを操作すると別のSliderも一緒に動くみたいなこともできます

  1. SliderAのOnValueChangedにSliderBのDynamic floatのvalueを設定する
  2. 逆も同じように設定する。SliderAを動かすとSliderBも動くようになる

参考

VRChat技術メモ帳 uGUI : 下のほうに実装サンプルもあります
JetDogs-Prefabs : Jetdogさんのワールド制作向けPrefab集で一部uGUIのものが含まれています

uGUIについての解説
【Unity入門】Canvasって何が出来るの?UIの基礎を学ぼう!
uGUI (UnityのUI機能) の使い方まとめ

関連記事

【VRChat】uGUIを使ったワールドメニューのサンプル公開+解説

42
37
0

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
  3. You can use dark theme
What you can do with signing up
Sign upLogin
42
37