めーぷるのおもちゃばこ

- アイドルになりたいエンジニア女子の制作日記 -

【Unity】UnityのVideoPlayerで透過の動画を再生する方法

はじめに

Unityで透過(アルファ付きの動画)を再生する場合、.webmという形式の動画でないといけないみたいです。やり方を記載しておきます。

手順

🐼まずはPremiere Proで.webm形式で動画を書き出せるように

   
まずは.webmで動画を書き出します。
Premiere Proでの方法を記載します。
Premiere Proではデフォルトで.webm形式の書き出しができないので以下の手順でまず書き出せるようにします。
www.wwwmaplesyrup-cs6.work

  

  

🐼Unity用に書き出す設定

.webm形式をUnityで使用する場合、書き出しの設定を以下のようにする必要があります。

f:id:maplesyrup-cs6:20200727141405p:plain
まず動画形式をwebmに

  

f:id:maplesyrup-cs6:20200727141435p:plain
ビデオの設定

  

f:id:maplesyrup-cs6:20200727141454p:plain
オーディオの設定

  
このように設定して書き出すことでUnityで使用できるようになります。
  
  

🐼Unityでの設定

つぎにUnityでの設定です。
webmで書き出すと二つのファイルが出来上がります。
このうちの.webmだけをUnityに入れます。

f:id:maplesyrup-cs6:20200727142012p:plain
二つのファイル

  
  
動画をUnityに入れたら、Keep AlphaにチェックしてApplyします。これをしないと透過が反映されません。

f:id:maplesyrup-cs6:20200727142539p:plain
Keep Alphaにチェック

  
次に、VideoPlayerコンポーネントをつけているオブジェクトのマテリアルをCutoutにします。これをしないと透過が反映されてくれませんでした。光の影響はいらないのでUnlitのCutoutを使用しました。

f:id:maplesyrup-cs6:20200727142905p:plain
マテリアル をCutoutに



あとはこれでVideoPlayerのところに動画をセットすれば、透過の動画を流すことができます。

f:id:maplesyrup-cs6:20200727143156p:plain
ビデオを設定

  
透過の動画を再生できました!

f:id:maplesyrup-cs6:20200727143421g:plain
わーい

   
   

その他補足事項

Android向けの場合、メニューのFile > Build Setting > Player Settings でMultithreaded Renderingのチェックを外しておかないと表示がおかしくなるみたいです。

f:id:maplesyrup-cs6:20200727143715p:plain
Androidの場合Multithreaded Renderingのチェックを外す