uGUIのボタンをクリックすることで動画表示を切り替える

1 この記事は

VRChatのワールドの中で、uGUIのボタンをクリックすることで表示させる動画を繰り替えるギミックの作り方を説明します。

「切替」ボタンをクリックすると、表示が「ボリンジャー」か「一目均衡表」の表示に切り替わります。uGUIの上に「日経225」「S&P500」「米国10年金利」の記載がありますが、これらをクリックすると、クリックした株価指数(「日経225」or「S&P500」or「米国10年金利」)と表示：にて記載されたチャートの種類を表示します。例えば、表示：ボリンジャーの時に、S&P500のボタンをクリックした場合、S&P500のボリンジャーバンドが表示されます。

2 やり方は

2-1 uGUIを用意する。

下記の図のとおりパネルを生成する。

パネルの生成方法はこちらを参照ください。

2-2 動画プレイヤーを挿入する

下記の図示のとおり、VRCHat Examples-> Prefabs -> VideoPlayers -> UdonSyncPlayer(AVPro).prefab をインポートします。

2-3 Udon #コーディングを行う。

2-3-1 切替ボタンの機能実装

「切替」ボタンをクリックすると、「表示：ボリンジャー」と「表示：一目均衡表」を切り替えます。また「表示：xxxxx」はグローバル表示されるように設定します(ワールド滞在者に同じものが見える)。前述機能を実現するコードをCchange.csに作成します。Cchange.csを作成して下記のコードをコピペしてください。c#ファイルの作成方法とオブジェクトへのアタッチメントは下記サイトを真似して作ってみてください。

Cchange.cs

using UdonSharp;
using UnityEngine;
using UnityEngine.UI;
using VRC.SDKBase;
using VRC.Udon;

public class Cchange : UdonSharpBehaviour
{
    Button _button;
    [UdonSynced(UdonSyncMode.None)] public bool mode=true;  //[UdonSynced(UdonSyncMode.None)]を冒頭に宣言することでmirrorEnableは同期変数になる。
    [UdonSynced(UdonSyncMode.None)] public string content;  //  [UdonSynced(UdonSyncMode.None)] 後から来た人にも同様な値を見せる
    public Text displayText; //[SerializeField]を冒頭につけることでUnity inspectorから編集できる

    void Start()
    {
        _button = this.gameObject.GetComponent<Button>(); //オブジェクトbuttonを取得する。
        RequestSerialization();  //次の通信で全ユーザーに対して同期変数の同期を実施する
    }


    //OnDeserialization 変数の同期が行われると呼び出されるメソッド 全員に同じdataを表示させるために必要なコマンドである。
    public override void OnDeserialization()
    {
        displayText.text = content;
    }

    //スイッチを押した人を「オーナ」にする関数
    public override void Interact()
    {
        //スイッチを押した人を「オーナ」にする命令
        if (!Networking.IsOwner(Networking.LocalPlayer, this.gameObject)) Networking.SetOwner(Networking.LocalPlayer, this.gameObject);

        //すべてのプレイヤに「public void mirrorOn()」を実行させる（同期させる）命令
        SendCustomNetworkEvent(VRC.Udon.Common.Interfaces.NetworkEventTarget.All, "mirrorOn");
    }

    //ボタンを押すと表示を「ボリンジャー」か「一目均衡表」に切り替える。
    public void Changemode()
    {
        mode = !mode;
        if (mode == true)
        {
            content = "表示:ボリンジャー";
            displayText.text = content;
        }
        else if (mode == false)
        {
            content = "表示:一目均衡表";
            displayText.text = content;
        }
    }

    //パネルの表示:xxxxのxxxxのdataを取得する関数
    public string Modeget()
    {
        // content = "TEST1";
        return displayText.text;
    }
}

2-3-2 動画表示ボタンの機能実装

次に「日経225」「S&P500」「米国10年金利」と書かれたボタンをクリックすると、クリックしたボタンの株式指数チャートを表示させる機能を実装します。表示：ボリンジャーの場合はボリンジャーバンドを、表示：一目均衡表の時は一目均衡表を表示できるように動画の切り替えができるようになっています。前述機能を実現するコードをCchange.csに作成します。Cchange.csを作成して下記のコードをコピペしてください。c#ファイルの作成方法とオブジェクトへのアタッチメントは下記サイトを真似して作ってみてください。StreamPlayer.csに前述機能を実装するコードを記載します。なお、「日経225」「S&P500」「米国10年金利」と書かれたボタンにStreamPlayer.csをアタッチメントしてください。c#ファイルの作成方法とオブジェクトへのアタッチメントは下記サイトを真似して作ってみてください。

StreamPlayer.cs

using UdonSharp;
using UnityEngine;
using UnityEngine.UI;
using VRC.SDKBase;
using VRC.Udon;
using VRC.SDK3.Video.Components.AVPro;
using VRC.SDK3.Components.Video;
    public class StreamPlayer : UdonSharpBehaviour
    {
        public VRCAVProVideoPlayer videoPlayer;  //videoPlayeのインスタンスを定義する
        private bool waitForResponse; //動画読み込み状況フラグ
        public Text meigara;//動画のタイトルを表示させるテキストのインスタンスを定義する
        [Space(10)] public VRCUrl url0, url1; //動画のURLを示す。一目均衡表とボリンジャーバンドの表示動画のURL
        public string content;//動画のタイトル
        [UdonSynced(UdonSyncMode.None)] private bool mode;  //[UdonSynced(UdonSyncMode.None)]を冒頭に宣言することでmodeは同期変数になる。
        private Cchange config;//クラスCchangeのインスタンスオブジェクトconfigを定義している。
        public Text displayText; //[SerializeField]を冒頭につけることでUnity inspectorから編集できる


        //動画をストリーミングし再生させる。config.Modeget()の値により再生する動画を切り替える。
        public void Sync()
        {
            meigara.text = content;
            waitForResponse = true;
            config = this.GetComponent<Cchange>(); //クラスCchangeのインスタンスconfigを生成する。
            Debug.Log("config.mode");
            Debug.Log(config.Modeget());//別ファイルに定義したクラスCchangeのメソッドModeget()を実行する。Modeget()は、パネルのテキストを取得する。


            //一目均衡表のチャートを表示させる。
            if (config.Modeget() == "表示:一目均衡表")
            {
                videoPlayer.LoadURL(url1); //LoadUrl でリロードが行われます。成功すると OnVideoReady、失敗すると OnVideoError が呼ばれます。
            }
            else  //ボリンジャーバンドのチャートを表示させる。
            {
                videoPlayer.LoadURL(url0);
            }

        }

        //自身のオブジェクトのビデオプレイヤーが準備完了した際に呼ばれる関数
        //OnVideoReady が来たらさっさと再生を開始。そのうち OnVideoStart が呼ばれます。
        public override void OnVideoReady()
        {
            waitForResponse = false;
            //display.text = "Ready";
            videoPlayer.Play();
        }

        //自身のオブジェクトのビデオプレイヤーが停止状態から再生を開始した際に呼ばれる関数
        public override void OnVideoStart()
        {
            //display.text = "Start";
        }

        //自身のオブジェクトのビデオプレイヤーに何かしらのエラーが発生した際に呼ばれる関数
        public override void OnVideoError(VideoError videoError)
        {
            waitForResponse = false;
            //display.text = $"Error: {videoError}";
        }

        //自身のオブジェクトのビデオプレイヤーの再生が終了した場合、もしくはプレイヤーによって止められた場合に呼ばれる関数
        public override void OnVideoEnd()
        {
            //display.text = "End";
        }

        //操作対象とするオブジェクトの所有者が別のユーザーだった場合、所有者をオブジェクト操作者に移動させる。
        public void ChangeOwner()
        {
            if (!Networking.IsOwner(Networking.LocalPlayer, this.gameObject)) Networking.SetOwner(Networking.LocalPlayer, this.gameObject);
        }

    }

2-4 オブジェクトのアタッチメントを行う

Button(切替)のオブジェクトのアタッチメントを下記の図にように行ってください。

Button(日経225),Button(S&P500),Button(米国10年金利)のオブジェクトのアタッチメントを下記の図にように行ってください。