Unity2Dで動画を流してみる

ゲームの中で動画を使ってみたい人向けの記事です。
私も2Dゲームのチュートリアルを動画で作ってみようと思い実装してみました。
そういう人向けの記事になっています。

Unityスキルアップ、
始めるなら今

パズル、脱出、RPG...目標のゲームを完成させよう!

人気のUnity講座はこちら

Udemy講座

必要なものを用意する

では早速やってみましょう。
Unityの新規2Dプロジェクトを作成し作業をしていきます。
縦型のスマホゲームを想定して作ってみます。
画面サイズは1080×1920にします。

まずは動画ファイルをプロジェクトにインポートします。
対応している動画フォーマットは公式のリンクを掲載しておきます。

今回私はmp4の動画を用意しました。
その動画も1080×1920のサイズです。

ProjectのAssetsにMovieというフォルダを作成し、そこに動画を入れます。
Movieフォルダ

その動画ファイルをそのままにヒエラルキーにドラッグアンドドロップしても動画自体は再生されます。
UnityのHierarchy

試しにプレイしてみます。
Unityエディタで動画を再生テスト
上記は音が含まれておりませんが、実際には音が流れています。

これはこれで良いのですが、動画の大きさなどはこの状態では変化させられませんでした。
そこでUIのRawImageに動画を貼り付けて色々やってみたいと思います。

RawImageに表示させてみる

Hierarchy上でRawImageを作成します。
Hierarchyで右クリック→UI→RawImage。
名前はVideoImageとしておきます。
続いてVideoImageにVideoPlayerコンポーネントを追加します。
VideoPlayerコンポーネントのVideoClipに先程の動画をアタッチします。
インスペクターはこんな感じになっています。
VideoPlayerコンポーネントの詳細

このまま再生しても音は流れますが、動画は見れません。
そこでProject上で右クリックしRenderTextureを作成します。
RenderTextureを追加

作成したRenderTextureのインスペクターを見るとSizeが256×256となっていますので、動画のサイズに合わせます。
RenderTextureのInspector

続いてVideoImageのRawImageコンポーネントとVideoPlayerコンポーネントのTextureに今作ったRenderTextureをアタッチします。
RawImageとVideoPlayerのコンポーネント

試しにこの状態で再生させてみましょう。
widthとHeightが100サイズの動画再生テスト
Gameシーンの真ん中にある正方形がVideoImageです。
インスペクターを見て頂ければわかると思いますが、widthとHeightが100ですので、これを調整すればサイズの変更ができそうです。

試しに画面サイズいっぱいに広げてみましょう。
width:1080 Height:1920にしてみます。
画面いっぱいに広げた動画再生テスト
画面いっぱいに動画が表示されました。

更に実験で半分のサイズにしてみます。
width:540 Height:960
ハーフサイズの動画再生テスト

ちゃんと半分のサイズになり動画がRawImageに表示されています。

再生ボタンを付けてみる

先程VideoImageに追加したVideoPlayerコンポーネントでは動画に対して色々操作ができるようです。
最後に再生ボタン、一時停止ボタン、停止ボタンを作って動画を操作してみたいと思います。

Canvasの下にボタンを3つ作成します。
それぞれPlayButton、PauseButton、StopButtonとしました。
次に空のオブジェクトを作成し、VideoControllerというものを作ります。
このような状態になっています。
Hierarchyにボタンを追加

続いてAssetsにScriptsフォルダを作成し、その中にVideoControllerという名前のC#スクリプトを作成し、HierarchyにあるVideoControllerにコンポーネントとして追加します。
ソースコードはこのような感じにしました。

Hierarchy上のVideoControllerを選択し、インスペクターにそれぞれ必要なものをアタッチしていきます。
このような感じになりました。
VideoControllerにボタンをアタッチ

起動していきなり動画が再生されないようにVideoImageにあるVideoPlayerコンポーネントのPlay On Awakeのチェックを外しておきます。
Play On Awakeのチェックを外す

それでは期待した通り動くかチェックしてみましょう。

少しわかりにくいですが、再生、一時停止、再開、終了、最初から再生という感じで動画が操作されました。

このようにUnityで簡単に動画を操作することができます。
今回は2Dで動画を入れてみましたが、もちろん3Dでもできます。
色々と試してみて下さい。

おすすめUnityオンライン学習

一人でゲーム開発が不安な方はオンラインスクールで学習すると効率が良いと思います。
以下に当てはまる人は検討してみると良いかもしれません。

「ゲーム作りけど何から初めればいい?」
「入門書をの次に何をしたらいいの?」
「疑問や問題を一人で解決出来ない。。」
「ゲームを完成させる自信がない。。」
「気軽に質問できる環境が欲しい。。」

自分で学習することに限界を感じたら
オンライン学習しましょう!

Udemy

Udemy
特徴:教材動画買い切り型
レッスン方法:動画教材/Q&Aで質問
習得スキル:教材動画によって異なる
コース概要: ピンポイントで作りたいゲームジャンルの動画を見つけることができるかもしれません。 また頻繁にセールを開催していますのでゲーム開発講座が1500円~で購入することも可能です。
ゲームジャンル別おすすめ講座はこちら Udemy 詳細

テックアカデミー

テックアカデミー
特徴:現役エンジニア伴走型レッスン
レッスン方法:チャット(週2回)/テキストチャット/課題レビュー
習得スキル:オリジナルゲームアプリの作成
コース概要: 途中で挫折しないためにメンター(相談者)が週2回、マンツーマンであなたの質問・相談に答えてくれるので、ゲーム開発・プログラミング未経験の人でも安心してゲーム開発に取り組めます。転職したい人向けのサポートもあります。無料体験もあります。
テックアカデミー 詳細

テックスタジアム

テックスタジアム
特徴:ゲーム開発の為のオンラインスクール
レッスン方法:動画教材,Slackでの質問(24時間)
習得スキル: Unity,UnrealEngine、CG、企画、サーバー、AI、XR等
コース概要: ゲーム業界で必須な技術の習得が可能です。Slack上で待機している先生への24時間、何度でも質問できます。またIT・ゲーム業界への就職サポートが無料で受けられます。
ゲーム開発に特化したオンラインスクールですので、Unityはもとより、他のゲームエンジンやゲーム業界に興味がある方にはオススメです。
テックスタジアム 詳細

デジハリONLINE

デジハリONLINE
特徴:動画カリキュラム型レッスン
レッスン方法:動画講座/Slack/予約制Zoom相談
習得スキル:Unity基礎,実践/ハイクオリティ3Dゲーム
コース概要: デジタルハリウッド大学・大学院などを通じたデジタルコンテンツ業界とのつながりを活かし、最新かつ実践的なカリキュラムを提供しています。【基礎編】【実践編】とカリキュラムが分かれていて、それぞれに課題があり、ご自身の理解度を把握できます。最終的にはハイクオリティの3Dゲームが作れるようになります。
デジハリONLINE 詳細

関連記事

最後までご覧頂いてありがとうございました。

Unityゲーム制作講座 多数公開

作りたかったジャンルの講座でスキルUP♪