例えば、このアニメーションロゴ動画をゲームの起動時に再生したい!
VIDEO www.youtube.com
そのやり方です。WebGL 上でUnity の Video Playerを使うのは困難ですが、AWS を使ったら出来ました。
※動画の利用は出来ましたが、問題があって起動時にロゴ動画は表示してません(最後まで読むとわかります)
1. AWS にパブリックアクセス可能な動画を用意
WebGL から再生するには、unityroomからアクセス出来る場所に動画を置いておく必要があります。
1.1. AWS のアカウント登録
AWS (Amazon Web Service)は、IT業界では超有名なサーバーサービスです。
メールアドレス、クレカ等を用意してこちらのURL からポチポチ押していれば簡単にアカウントが作れます。
1.2. アカウントのブロックパブリックアクセスを設定
「このアカウントのブロックパブリックアクセス設定」→「編集」
全チェックを外して「変更の保存」
※セキュリティがゆるいので、AWS を他用途でも使うなら適宜見直して下さい
1.3. S3ストレージにバケット を作成
バケット (ファイルを入れるフォルダのようなもの)を作成します。
AWS のコンソールから サービス/ストレージ/S3 を選択。
「バケット を作成」をクリック。
バケット に被りのない適当な名前を付けます。
画像のようにチェックを設定し、全パブリックアクセスを有効にします(放置するとマズいのでこれ以後は最後まで進んで下さい)
「バケット を作成」する
1.4. 動画を置く
作成したバケット をクリックして
アップロードを選択。
アップロード画面に動画をドラッグ&ドロップして、上げるファイルを確認して「アップロード」
無事にアップロード完了。「閉じる」。
1.5. 動画URLを取得
オブジェクト(ファイル)のリンクをクリック
動画のURLをコピー。Unity上で使うので、どこかにメモして下さい 。ブラウザに貼ればそのまま表示出来るはず。
1.6. バケット ポリシー設定
バケット の「アクセス許可」から・・
バケット ポリシーの「編集」
以下の内容を入れて「変更の保存」。 バケット 内のファイルが読み取れるようにします。
(marudice-test-test はバケット 名で置き換えて下さい)
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::marudice-test-test/*"
}
]
}
1.7. CORSの設定
多分これが一番大事です。
CORSというのは、ざっくり言うとウェブサイトAのファイルをウェブサイトBが勝手に表示するのを禁止するルールです。
ウェブサイトAに「ウェブサイトBは友達だから表示していいよ」と書いてある場合のみ表示でき、その設定をしています。
CORSの「編集」から・・
以下のコードを貼り付けて「変更の保存」します。
[
{
"AllowedHeaders": [],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"https://unityroom.com"
],
"ExposeHeaders": []
},
{
"AllowedHeaders": [],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"https://object-storage.tyo1.conoha.io"
],
"ExposeHeaders": []
}
]
※CORSの設定についてはこちらを参考にしました。
S3でCORSの設定を行う | AutomationTechブログ
1.8. 不要なパブリックアクセスを閉じる
ゆるゆるガバガバな設定になってるので、閉じます。
ブロックパブリックアクセスの「編集」から
上3つをチェックして「変更の保存」
2. VideoPlayerで動画を再生
2.1. Video Playerの設定(超シンプル版)
適当なGameObjectにVideoPlayerをAddComponentから追加して、
Sourceを「URL」に、Cameraにシーン内のカメラをアタッチします
※RenderTextureを使ってCanvas RawImageに描画なども出来ます。詳しくはこちら や、Unity VideoPlayerで検索ゥ!!
以下のコードで再生します。
ゲーム本体と別のサーバーに動画があるのでネットワーク状況で読み込み失敗があり、エラー処理は必須です。
public UnityEngine.Video.VideoPlayer video;
void Start()
{
video.url = (動画ファイルのURL);
video.prepareCompleted += PrepareCompleted;
video.errorReceived += ErrorReceived;
}
private void ErrorReceived(UnityEngine.Video.VideoPlayer vp, string message)
{
Debug.LogWarning($"動画の読み込みに失敗しました. message:{message}" );
vp.errorReceived -= ErrorReceived;
vp.prepareCompleted -= PrepareCompleted;
}
void PrepareCompleted(UnityEngine.Video.VideoPlayer vp)
{
Debug.Log("動画ロード完了" );
vp.prepareCompleted -= PrepareCompleted;
vp.Play();
}
以上です!!
先週作ったゲームに、タイトル画面で「E+R+U+I」を同時押しするとロゴ動画が再生されるバックドア を仕込んであるので、動作確認出来ます!
フラッグマニア エクストリーム パズルxクイズ | フリーゲーム投稿サイト unityroom
3. 起動時に即動画を再生すると起きる問題
この方法で、よく話題に上がるCORSの問題も解決しunityroom上で動画は再生出来ましたが、実は使ってません。
どうも、WebGL のVideo Playerは埋め込みWebGL が非アクティブな状態ではPlay()を読んでも動画が進まない問題(仕様?)があるようで、
「ゲームの起動時に動画を再生」とすると、「ページ読み込み後にWebGL 画面をクリックしない限り動画が再生されない」という挙動になりました。
Run in backgroundなども試しましたが、解決不能 なようなので諦めました
3.1. え、じゃあどうやったの?起動時にロゴ動画出てるじゃん?
Adobe After Effects から Unity Animation に気合で目コピしました!
元々のロゴアニメ動画も1時間くらいで作ったので、1時間で終わりました。
Video Playerの技術検証と調査は2日くらいかかってます・・・。つら・・・。