３Ｄレールガンシューティング　発展９

　ゲーム内でのムービー再生機能の実装を行います。
非常に実装内容が多くなるため、３回の手順に分けて実装します。

発展９ームービー再生機能の準備ー

＜学習内容＞

　・RenderTexure コンポーネント
　・VideoPlayer コンポーネント

設計

　最初の手順としては、ムービー用の動画のインポート、また、ムービー再生時に利用するスクリーン用のゲームオブジェクトの作成などを行います。

　残りの２回の手順では既存のスクリプトを修正して、ムービー再生機能を実装していきます。
たとえば、ムービー再生中での画面タップは無効化するのか、あるいはスキップする機能を追加するのか、など多岐に渡る設計を検討していく必要があります。

動画ファイルを Unity にインポートする

　Projects フォルダ内に新しく Videos フォルダを作成します。
Videos 内に無料の動画や、自分で作成した動画(mp4 ファイルの動画)をドラッグアンドドロップしてインポートします。

インスペクター画像

　以上でこの手順は完了です。

RenderTexure を作成する

　同じく Videos フォルダ内で右クリックをしてメニューを開き、Create => RenderTexure を選択します。
名前は Video に変更します。

Unity 公式マニュアル
RenderTexure
https://docs.unity3d.com/ja/current/Manual/class-R...

インスペクター画像

　以上でこの手順は完成です。

新しい Canvas ゲームオブジェクトを作成する

　ムービーを専用に表示するスクリーンとなるための Canvas ゲームオブジェクト群を配置します。

　新しい Canvas ゲームオブジェクトを作成し、名前を VideoClip_Canvas や、CanvasWithVideoClip のように分かりやすい名称に変更してください。

　Canvas を作成したら、インスペクターより、CanvasScaler コンポーネントの設定を行います。

　UI Scale Mode の設定を Scale With Screen Size に変更し、Reference Resolution の X と Y の値をそれぞれ Game ビューの解像度と合わせます。
また、Screen Match Mode を Expand に変更します。

インスペクター画像(Reference Resolution の X と Y の値は参考値です。自分のプロジェクトの Game ビューに合わせてください)

　以上でこの手順は完成です。続いて、子オブジェクトを作成します。

Canvas ゲームオブジェクトの子オブジェクトとして RawImage ゲームオブジェクトを作成し、設定を行う

　先ほどの手順で作成した Canvas ゲームオブジェクトの子オブジェクトとして、RawImage ゲームオブジェクトを作成します。
Canvas ゲームオブジェクトの上で右クリックを押してメニューを開き、UI → RawImage を選択すると、RawImage コンポーネントのアタッチされたゲームオブジェクトが作成されます。
名称は任意です。現時点では変更しなくてもよいです。

ヒエラルキー画像

　これはムービーを描画するためのスクリーン用のゲームオブジェクトです。
Scale(サイズ)は Canvas の解像度に合わせてください。この例では 2880 * 1440 の解像度のため、サイズも同じサイズになっています。

　なお、作成したばかりの RawImage ゲームオブジェクトは白く表示されます。(Iamge ゲームオブジェクトと同じです)

インスペクター画像

Sceneビュー画像

　続いて、先ほど作成しておいた Video という名称の RenderTexure を RawImage コンポーネントの Texure 欄にドラッグアンドドロップしてアサインします。
こうすることで、白かった画像がゲーム画面の画像になります。

インスペクター画像

Sceneビュー画像

　以上で設定は完了です。

＜VideoPlayer コンポーネント＞

　ムービー再生には Unity の用意している VideoPlayer コンポーネントを利用します。
下記のマニュアルにはコンポーネントの紹介のほかに、サンプルプログラムも記載されています。

Unity 公式マニュアル
ビデオの概要

Unity 公式マニュアル
VideoPlayer

　VideoPlayer コンポーネントにも、インスペクターに表示させる設定項目だけではなく、スクリプトで利用できるメソッドなどが用意されています。

RawImage ゲームオブジェクトに VideoPlayer コンポーネントをアタッチして設定を行う

　RawImage ゲームオブジェクトを選択し、インスペクターの一番下にある Add Component ボタンを押して VideoPlayer コンポーネントをアタッチします。

　TargetTexure 欄に Video(RenderTexure) をドラッグアンドドロップしてアサインしてください。
これでムービー再生した際に動画を映す情報として利用できるように登録されます。

インスペクター画像

VideoData スクリプトを作成する

　ムービーの情報を登録するためのクラスと、それをまとめて管理するためのスクリプタブル・オブジェクトを作成します。
まずはムービー単位で管理するために VideoData クラスを作成します。これを List として扱えるようにします。

　他にも情報が必要な場合には適宜追加してください。

VideoData.cs

<= クリックすると開きます

using UnityEngine.Video;　　//　<=　☆　宣言が異なるため、注意してください


[System.Serializable]
public class VideoData {
    public int videoNo;
    public VideoClip videoClip;
}

VideoDataSO スクリプトを作成する

　VideoData クラスを List でまとめて管理して、スクリプタブル・オブジェクトとして利用できるようにします。

VideoDataSO.cs

<= クリックすると開きます

using System.Collections.Generic;
using UnityEngine;

[CreateAssetMenu(fileName = "VideoDataSO", menuName = "Create VideoDataSO")]
public class VideoDataSO : ScriptableObject {
    public List<VideoData> videoDatasList = new List<VideoData>();
}

VideoDataSO スクリプタブル・オブジェクトを作成する

　Datas フォルダ内で右クリックをしてメニューを開き、Create => Create VideoDataSO を選択してスクリプタブル・オブジェクトを作成します。

　Size を 0 から変更し、Videos フォルダ内にインポートした mp4 ファイルの動画をドラッグアンドドロップしてアサインします。
この例では Size を 2 にし、２つの mp4 ファイルをアサインしています。

インスペクター画像

VideoClipManager スクリプトを作成する

　VideoPlayer を活用してムービー再生するための機能を持つスクリプトを作成します。

　再生するムービーは毎回固定で同じ、という訳にはいきません。
先ほど作成した VideoDataSO スクリプタブル・オブジェクト内に登録されている VideoClip (ムービー動画)をその都度読み込んで、
ゲームの場面に適したムービーを再生する機能を持つ汎用的な処理が行えるように設計をしています。

　また今回は再生の途中でも画面をクリックすることでスキップする機能も合わせて実装します。
ただし、内部的にはムービーの一時停止の処理をスキップ用に流用していますので、スキップだけではなく一時停止の機能も実装したい場合には、別の実装方法を検討する必要があります。

VideoClipManager.cs

<= クリックすると開きます

using System.Collections;
using UnityEngine;
using UnityEngine.Video;
using DG.Tweening;

[RequireComponent(typeof(CanvasGroup))]
public class VideoClipManager : MonoBehaviour {

    public static VideoClipManager instance;

    [SerializeField]
    private VideoPlayer videoPlayer;

    [SerializeField]
    private CanvasGroup canvasGroup;

    public VideoClip clip;

    public bool IsVideoPlaying { get => videoPlayer.isPlaying; }

    private float fadeDuration = 1.0f;


    void Awake() {
        if (instance == null) {
            instance = this;
            DontDestroyOnLoad(gameObject);
        } else {
            Destroy(gameObject);
        }

        // 初期化
        Initialize();
    }

    /// <summary>
    /// Video 処理の初期化
    /// </summary>
    private void Initialize() {
        canvasGroup.alpha = 0;
        canvasGroup.blocksRaycasts = false;

        videoPlayer.clip = null;

        // 解放して前のテクスチャを削除
        videoPlayer.targetTexture.Release();
    }

    /// <summary>
    /// デバッグ用(Awake でやらないこと。DataBaseManager の準備が競合して間に合わない)
    /// </summary>
    /// <returns></returns>
    IEnumerator Start() {

        yield return null;

        // VideoClip の準備
        //PrepareVideoClip(1);
    }

    /// <summary>
    /// VideoClip の準備
    /// </summary>
    /// <param name="videoNo"></param>
    public void PrepareVideoClip(int setVideoNo, VideoClip sourceVideoClip = null) {

        // VideoClip が未設定なら
        if (videoPlayer.clip == null) {

            // VideoClip の引数情報がない場合
            if (sourceVideoClip == null) {

                // 対象の VideoClip を検索して設定
                videoPlayer.clip = DataBaseManager.instance.GetVideoData(setVideoNo).videoClip;
            } else {

                // VideoClip の情報がある場合は、それを使う
                videoPlayer.clip = sourceVideoClip;
            }
        }

        // 読み込み後のイベントのコールバック登録
        videoPlayer.prepareCompleted += OnCompletePrepare;

        // 読み込み開始
        videoPlayer.Prepare();

        Debug.Log("VideoClip ロード開始");

        // TODO 必要に応じて、VideoClip の始まるタイミング(フェードイン)と合わせる


        /// <summary>
        /// Prepare 完了時に呼ばれるコールバック用のローカル関数
        /// </summary>
        /// <param name="vp"></param>
        void OnCompletePrepare(VideoPlayer vp) {

            // イベントのコールバックから削除(残っていると次回も実行されるため)
            videoPlayer.prepareCompleted -= OnCompletePrepare;

            Debug.Log("VideoClip ロード完了");

            // 再生
            StartCoroutine(PlayVideo());
        }

        //// 読み込むまで待機(videoPlayer.prepareCompleted を使わない場合)
        //while (!videoPlayer.isPrepared)
        //    yield return null;
    }

    /// <summary>
    /// VideoClip の再生
    /// </summary>
    /// <returns></returns>
    private IEnumerator PlayVideo() {

        // 画面のタップを制御
        canvasGroup.blocksRaycasts = true;

        // TODO フェードインして再生(簡易。後でトランジションと合わせる)
        canvasGroup.DOFade(1.0f, fadeDuration);   // なお、OnComplete を使って VideoPlayer の Play メソッドを処理すると動かないため、使わない。

        // VideoClip 再生
        videoPlayer.Play();

        Debug.Log("VideoClip 再生");

        // 再生が終了するか、スキップするまで待機(一時停止の処理も実装したい場合には、この条件式を変更する必要があります)
        while (videoPlayer.isPlaying) {

            // 再生中にタップしたら再生停止してスキップ
            if (Input.GetMouseButtonDown(0)) {
                SkipVideo();
            }
            yield return null;
        }

        // 停止
        StopVideo();
    }

    /// <summary>
    /// VideoClip のスキップ
    /// </summary>
    public void SkipVideo() {

        // 再生中の VideoClip がある場合
        if (videoPlayer.isPlaying) {

            // 内部的には一時停止(isPlayng が false になる)だが、今回の PlayVideo メソッド内の while 文の条件式は、この処理でスキップするように条件設定している
            videoPlayer.Pause();

            Debug.Log("VideoClip スキップ");
        }
    }

    /// <summary>
    /// VideoClip の停止
    /// </summary>
    public void StopVideo() {

        // 停止
        videoPlayer.Stop();

        // フェードアウトして初期化
        canvasGroup.DOFade(0, fadeDuration)
            .OnComplete(() => {
                Initialize();
            });

        Debug.Log("VideoClip 停止");
    }
}

　スクリプトを作成したらセーブします。

　各メソッドや変数が、どういった役割を持って用意されているかをしっかりと理解してから進めてください。

VideoClip_Canvas ゲームオブジェクトに VideoClipManager スクリプトをアタッチして設定を行う

　VideoClipManager スクリプトをアタッチします。自動的に CanvasGroup コンポーネントもアタッチされます。

インスペクター画像

　以上でムービーの表示に必要なゲームオブジェクトの作成が完了しました。
次の手順では、スクリプトの修正を行い、ミッションの発生時にムービーを再生する機能を実装します。

　=>　次は　発展１０　ームービー再生機能①ー　です。

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

３Ｄレールガンシューティング　発展９ - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school