ムービー再生機能の準備��
最終更新：
orika_ex_miyako 2023年01月22日(日) 20:50:51履歴
ゲーム内でのムービー再生機能の実装を行います。
非常に実装内容が多くなるため、まずは２回の手順に分けて機能実装のための事前の準備を行います。
＜学習内容＞
１．設計
最初の手順としては、ムービー用の動画のインポート、また、ムービー再生時に利用するスクリーン用のゲームオブジェクトの作成などを行います。
Canvas 内にスクリーンとして機能させるためのゲームオブジェクトを配置し、そちらにムービーを再生させることで、ゲーム画面の最前面にムービーを再生します。
次の手順ではスクリプトを作成して、スクリーン用のゲームオブジェクトにムービーを再生するための機能を実装していきます。
加えて、ムービー再生中での画面タップは無効化するのか、あるいはスキップする機能を追加するのか、など多岐に渡る設計を検討していく必要があります。
２．動画ファイルを Unity にインポートする
Projects フォルダ内に新しく Videos フォルダを作成します。
Videos 内に無料の動画や、自分で作成した動画(mp4 ファイルの動画)をドラッグアンドドロップしてインポートします。
インスペクター画像
以上でこの手順は完了です。
３．RenderTexure を作成する
同じく Videos フォルダ内で右クリックをしてメニューを開き、Create => RenderTexure を選択します。
名前は Video に変更します。
Unity 公式マニュアル
RenderTexure
インスペクター画像
以上でこの手順は完成です。
４．新しい 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 ゲームオブジェクトと同じです)
画面全体を覆っているため、Game ビューも白く表示されます。
インスペクター画像
Sceneビュー画像
Gameビュー画像
続いて、先ほど作成しておいた Video という名称の RenderTexure を RawImage コンポーネントの Texure 欄にドラッグアンドドロップしてアサインします。
こうすることで、白かった画像がゲーム画面の画像になります。
インスペクター画像
Sceneビュー画像
Gameビュー画像
以上で設定は完了です。
６．＜VideoPlayer コンポーネント＞
ムービー再生には Unity の用意している VideoPlayer コンポーネントを利用します。
下記のマニュアルにはコンポーネントの紹介のほかに、サンプルプログラムも記載されています。
VideoPlayer コンポーネントにも、インスペクターに表示させる設定項目だけではなく、スクリプトで利用できるメソッドなどが用意されています。
７．RawImage ゲームオブジェクトに VideoPlayer コンポーネントをアタッチして設定を行う
RawImage ゲームオブジェクトを選択し、インスペクターの一番下にある Add Component ボタンを押して VideoPlayer コンポーネントをアタッチします。
TargetTexure 欄に Video (RenderTexure) をドラッグアンドドロップしてアサインしてください。
これでムービー再生した際に動画を映す情報として利用できるように登録されます。
インスペクター画像
以上でムービーの表示に必要なゲームオブジェクトの作成が完了しました。
次の手順では、ムービー再生の機能をまとめたスクリプト群の作成を行います。
=> 次は ムービー再生機能の準備�� です。
非常に実装内容が多くなるため、まずは２回の手順に分けて機能実装のための事前の準備を行います。
＜学習内容＞
・RenderTexure コンポーネント ・VideoPlayer コンポーネント
１．設計 
最初の手順としては、ムービー用の動画のインポート、また、ムービー再生時に利用するスクリーン用のゲームオブジェクトの作成などを行います。
Canvas 内にスクリーンとして機能させるためのゲームオブジェクトを配置し、そちらにムービーを再生させることで、ゲーム画面の最前面にムービーを再生します。
次の手順ではスクリプトを作成して、スクリーン用のゲームオブジェクトにムービーを再生するための機能を実装していきます。
加えて、ムービー再生中での画面タップは無効化するのか、あるいはスキップする機能を追加するのか、など多岐に渡る設計を検討していく必要があります。
２．動画ファイルを Unity にインポートする
Projects フォルダ内に新しく Videos フォルダを作成します。
Videos 内に無料の動画や、自分で作成した動画(mp4 ファイルの動画)をドラッグアンドドロップしてインポートします。
インスペクター画像
以上でこの手順は完了です。
３．RenderTexure を作成する
同じく Videos フォルダ内で右クリックをしてメニューを開き、Create => RenderTexure を選択します。
名前は Video に変更します。
Unity 公式マニュアル
RenderTexure
インスペクター画像
以上でこの手順は完成です。
４．新しい 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 ゲームオブジェクトと同じです)
画面全体を覆っているため、Game ビューも白く表示されます。
インスペクター画像
Sceneビュー画像
Gameビュー画像
続いて、先ほど作成しておいた Video という名称の RenderTexure を RawImage コンポーネントの Texure 欄にドラッグアンドドロップしてアサインします。
こうすることで、白かった画像がゲーム画面の画像になります。
インスペクター画像
Sceneビュー画像
Gameビュー画像
以上で設定は完了です。
６．＜VideoPlayer コンポーネント＞
ムービー再生には Unity の用意している VideoPlayer コンポーネントを利用します。
下記のマニュアルにはコンポーネントの紹介のほかに、サンプルプログラムも記載されています。
Unity 公式マニュアル
ビデオの概要
Unity 公式マニュアル
VideoPlayer
VideoPlayer コンポーネントにも、インスペクターに表示させる設定項目だけではなく、スクリプトで利用できるメソッドなどが用意されています。
７．RawImage ゲームオブジェクトに VideoPlayer コンポーネントをアタッチして設定を行う
RawImage ゲームオブジェクトを選択し、インスペクターの一番下にある Add Component ボタンを押して VideoPlayer コンポーネントをアタッチします。
TargetTexure 欄に Video (RenderTexure) をドラッグアンドドロップしてアサインしてください。
これでムービー再生した際に動画を映す情報として利用できるように登録されます。
インスペクター画像
以上でムービーの表示に必要なゲームオブジェクトの作成が完了しました。
次の手順では、ムービー再生の機能をまとめたスクリプト群の作成を行います。
=> 次は ムービー再生機能の準備�� です。
コメントをかく