Unityに関連する記事です

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

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

<学習内容>
 ・RenderTexure コンポーネント
 ・VideoPlayer コンポーネント



設計


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

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


動画ファイルを 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

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



VideoDataSO スクリプトを作成する


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


VideoDataSO.cs

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




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


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

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


インスペクター画像




VideoClipManager スクリプトを作成する


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

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

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


VideoClipManager.cs

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


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

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


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


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


インスペクター画像




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

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

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます