Unity2Dで動画を流してみる
ゲームの中で動画を使ってみたい人向けの記事です。
私も2Dゲームのチュートリアルを動画で作ってみようと思い実装してみました。
そういう人向けの記事になっています。
始めるなら今
パズル、脱出、RPG...目標のゲームを完成させよう！
人気のUnity講座はこちら
必要なものを用意する
では早速やってみましょう。
Unityの新規2Dプロジェクトを作成し作業をしていきます。
縦型のスマホゲームを想定して作ってみます。
画面サイズは1080×1920にします。
まずは動画ファイルをプロジェクトにインポートします。
対応している動画フォーマットは公式のリンクを掲載しておきます。
今回私はmp4の動画を用意しました。
その動画も1080×1920のサイズです。
ProjectのAssetsにMovieというフォルダを作成し、そこに動画を入れます。
その動画ファイルをそのままにヒエラルキーにドラッグアンドドロップしても動画自体は再生されます。
試しにプレイしてみます。
上記は音が含まれておりませんが、実際には音が流れています。
これはこれで良いのですが、動画の大きさなどはこの状態では変化させられませんでした。
そこでUIのRawImageに動画を貼り付けて色々やってみたいと思います。
RawImageに表示させてみる
Hierarchy上でRawImageを作成します。
Hierarchyで右クリック→UI→RawImage。
名前はVideoImageとしておきます。
続いてVideoImageにVideoPlayerコンポーネントを追加します。
VideoPlayerコンポーネントのVideoClipに先程の動画をアタッチします。
インスペクターはこんな感じになっています。
このまま再生しても音は流れますが、動画は見れません。
そこでProject上で右クリックしRenderTextureを作成します。
作成したRenderTextureのインスペクターを見るとSizeが256×256となっていますので、動画のサイズに合わせます。
続いてVideoImageのRawImageコンポーネントとVideoPlayerコンポーネントのTextureに今作ったRenderTextureをアタッチします。
試しにこの状態で再生させてみましょう。
Gameシーンの真ん中にある正方形がVideoImageです。
インスペクターを見て頂ければわかると思いますが、widthとHeightが100ですので、これを調整すればサイズの変更ができそうです。
試しに画面サイズいっぱいに広げてみましょう。
width：1080 Height:1920にしてみます。
画面いっぱいに動画が表示されました。
更に実験で半分のサイズにしてみます。
width：540 Height:960
ちゃんと半分のサイズになり動画がRawImageに表示されています。
再生ボタンを付けてみる
先程VideoImageに追加したVideoPlayerコンポーネントでは動画に対して色々操作ができるようです。
最後に再生ボタン、一時停止ボタン、停止ボタンを作って動画を操作してみたいと思います。
Canvasの下にボタンを3つ作成します。
それぞれPlayButton、PauseButton、StopButtonとしました。
次に空のオブジェクトを作成し、VideoControllerというものを作ります。
このような状態になっています。
続いてAssetsにScriptsフォルダを作成し、その中にVideoControllerという名前のC#スクリプトを作成し、HierarchyにあるVideoControllerにコンポーネントとして追加します。
ソースコードはこのような感じにしました。
Hierarchy上のVideoControllerを選択し、インスペクターにそれぞれ必要なものをアタッチしていきます。
このような感じになりました。
起動していきなり動画が再生されないようにVideoImageにあるVideoPlayerコンポーネントのPlay On Awakeのチェックを外しておきます。
それでは期待した通り動くかチェックしてみましょう。
少しわかりにくいですが、再生、一時停止、再開、終了、最初から再生という感じで動画が操作されました。
このようにUnityで簡単に動画を操作することができます。
今回は2Dで動画を入れてみましたが、もちろん3Dでもできます。
色々と試してみて下さい。
おすすめUnityオンライン学習
一人でゲーム開発が不安な方はオンラインスクールで学習すると効率が良いと思います。
以下に当てはまる人は検討してみると良いかもしれません。
「入門書をの次に何をしたらいいの？」
「疑問や問題を一人で解決出来ない。。」
「ゲームを完成させる自信がない。。」
「気軽に質問できる環境が欲しい。。」
自分で学習することに限界を感じたら
オンライン学習しましょう！
Udemy
テックアカデミー
テックスタジアム
ゲーム開発に特化したオンラインスクールですので、Unityはもとより、他のゲームエンジンやゲーム業界に興味がある方にはオススメです。
デジハリONLINE
関連記事
UnityでCSVを活用したメッセージウィンドウの作り方
ゲーム開発では、プレイヤーに重要な情報を伝えるためにメッセージウィンドウを頻繁に使います。 しかし、ゲーム内で表示するメッセージが増えてくると、それらを一つ一つ管理していくのは非常に大変な作業になります。 メッセージの内 […]
Unityで9-sliceテクニックを使った効果的なUI作成方法
UI作成時に非常に便利なテクニック9-sliceをやってみます。
とても簡単に使える技です。
ドラクエ風 簡単な名前入力システムを作る
ドラクエをはじめ、名前などを入力するシステムを作っていきます。
非常にシンプルな作りになっています。
【初心者向け】ButtonのOnClickをC#スクリプトで登録する
ButtonのクリックイベントをInspectorではなくC#スクリプトから登録する方法です。
初心者の方でも簡単に出来る内容です。
Unity コルーチンとカラーでレインボーカラー
派手な演出レインボーの点滅を実装します。ゲームが華やかになります。
最後までご覧頂いてありがとうございました。