Unityに関連する記事です

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

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



1.設計


 最初の手順としては、ムービー用の動画のインポート、また、ムービー再生時に利用するスクリーン用のゲームオブジェクトの作成などを行います。
Canvas 内にスクリーンとして機能させるためのゲームオブジェクトを配置し、そちらにムービーを再生させることで、ゲーム画面の最前面にムービーを再生します。

 次の手順ではスクリプトを作成して、スクリーン用のゲームオブジェクトにムービーを再生するための機能を実装していきます。
加えて、ムービー再生中での画面タップは無効化するのか、あるいはスキップする機能を追加するのか、など多岐に渡る設計を検討していく必要があります。


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


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


インスペクター画像



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


3.RenderTexure を作成する


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


Unity 公式マニュアル
RenderTexure



インスペクター画像



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


4.新しい 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 ビューに合わせてください)



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


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


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


ヒエラルキー画像




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

 なお、作成したばかりの RawImage ゲームオブジェクトは白く表示されます。(Iamge ゲームオブジェクトと同じです)
画面全体を覆っているため、Game ビューも白く表示されます。


インスペクター画像



Sceneビュー画像



Gameビュー画像




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


インスペクター画像



Sceneビュー画像



Gameビュー画像



 以上で設定は完了です。



6.<VideoPlayer コンポーネント>


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

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


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


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

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


インスペクター画像




 以上でムービーの表示に必要なゲームオブジェクトの作成が完了しました。
次の手順では、ムービー再生の機能をまとめたスクリプト群の作成を行います。

 => 次は ムービー再生機能の準備 です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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