目次
＜初めに＞
こんにちは！橋本ゼミ9期生の石川と人見です。
私たちが所属する橋本ゼミでは、学園祭にバーチャルＳＮＳ「cluster」を用いて大学の教室を作成し、研究発表を行いました。
clusterは、コロナ禍で急速に認知度を上げたバーチャル技術を利用したイベント開催ツールです。誰でも簡単にバーチャル世界（ワールドといいます）をアップロードすることができ、公開されたワールドはclusterに登録してさえいれば、全ての人が訪れることができます。(ワールドの非公開・イベントの限定公開を除く。)
そのClusterにアップロードするためのワールドを制作するためにunityというゲームエンジンを活用し、その過程で、それぞれ石川は研究発表用の「動画の挿入」、人見は「画像の挿入」を試みました。
しかし最初は、思うようにいかず試行錯誤する日々が続きました。もしかすると同じような状況で同じようなことに躓いている人がいるんじゃないか…！！
そう言った人たちのためにこの記事を執筆することにしたのです。
※この記事は「学園祭発表をワールド作成ツールを使って開く」と言う特異な状態での試行錯誤です。この記事に書いてあるものが最善ではない可能性がございますのでご了承ください。
＜記事執筆にあたって＞
さて、では具体的にこの記事では何が得られるのか。
その目的の明確化からしていきたいと思います。
〈初めに〉で述べたように、私たちは学祭の中でcluster、unityと言ったツールを使った研究発表を行いました。大学の教室を舞台にする流れだったので、教室だと分かりやすいワールドを作成する必要がありました。
そのためこの記事では以下のものをお伝えします！
・画像の挿入の仕方
・動画の挿入の仕方
・挿入した動画の音声の立体音響化
・動画の容量が多すぎた場合の対処法
尚、我々がワールドを作成するにあたって使ったツールの情報は以下の様になっています。
① Unity Hub 2019.4.1
② ClusterCreatorKitSample-master
これらをインストールした上でUnityを使用している前提で話が進んでいきます。
インストールなどの詳しい手順は下のURL先のページに飛んでください。
＜画像挿入編＞
この章で出てくるワードの説明をします。
Asset：ワールドに設置する置物
例）椅子、机、建物等
まず、画像挿入の手順について説明していきます。
はじめに[Project]欄の”Assets”を右クリックします。
出てくるタブの中の[Import New Assets]をクリックすると、”File Explorer”が出てくるので、そこから使用したい写真を選択し「Import」をクリックします。
すると、[UnityのAssets]欄に”Import”した画像が追加されます。しかし、このままではワールド内に挿入することができません。
そのため、先ほど追加された画像を選択し、画面右に”Inspector”タブを出します。
この”Inspector”タブの一番上にある”Texture Type”をクリックし、”Sprite”(2D and UI)を選択して右下のApplyをクリックすると、ワールド内に画像をドラッグ＆ドロップできるようになります。(以下右の写真)
画像挿入、完了です！
まとめ
- FileExplorerから画像を選択する
- TextureTypeをSprite(2D and UI )に変更する
＜動画挿入編＞
続いては動画を挿入するにあたっての手順や、調べても出てこず苦戦した部分などを説明していきます。
動画の挿入自体は簡単です。
まずは[Project]タブの中にある”Assets”のファイルの上で右クリックをします。そこから「Import New Asset」をクリックし、挿入したい動画ファイルを選択します。そうすると”Assets”のファイルの中に、挿入したい動画のサムネイルが表示されたと思います。
次に動画を投影するスクリーンを作ります。
[Hierarchy]タブで右クリック→”3D object”から好きなものを選択。そうすると[Hierarchy]たタブに新しく項目が追加されていると思います。
私は今回わかりやすくするために[Plane](平面)に設定しました！
※PlaneのScaleは、挿入したい動画のアスペクト比に合わせる必要があります。もし違うと変に引き延ばされるなどのトラブルが発生する可能性があります！
それでは追加したPlaneの中身を見ていきましょう！
[Hierarchy]タブから新しく作成した”3D object”(ここでは”Plane”)をクリックします。
そうすると[Inspector]タブにそのオブジェクトが何で構成されているかの情報が出てくると思います。(下の画像)
[Tranceform]にはオブジェクトの座標、角度、大きさがそれぞれ表示され、その他[Plane] [Mesh Renderer] [Mesh Collider]と言った要素があるとわかりますね。
それではここに動画を挿入するために必要な箱のようなものを作ってあげましょう。 まずは[Inspector]タブにある”Add Component”をクリックします。
このように様々なコンポーネントの項目が表示されていると思います。この中から探すのももちろんアリです。
ですが今回はどのコンポーネントを追加するのか決まっているので、上の検索バーを活用していきましょう。
検索バー内をクリックし、[Video Player]と入力してクリックしましょう。[Inspector]タブに”Video Player”と言う項目が追加されていると思います。
これで動画を入れる箱の完成です。
それでは実際に動画の挿入をしていきましょう。
[Video Player]内の”Video Clip”の部分に先ほどインポートした動画を貼り付けていきましょう。「None」の部分へドラッグ&ドロップで貼り付けることができます。ループ再生をしたいときは”Loop”の項目にチェックを入れましょう。
これで、ワールド内で動画を再生することができます。
まとめ
- 動画用のスクリーン(Plane)を設置する
- Planeに”Video Player”を挿入する
- Video Clipに動画をドラッグ＆ドロップする
しかし、これでは動画の音声がワールド全体で再生されてしまいます。
今回私たちの研究発表では動画を複数貼り、スクリーンに近付いた時のみ音が聞こえてればいいので、スクリーンから遠ざかると音が消える設定にする必要があります。
どのように工夫していったか、次の項で書いていきます。
※この方法で動画を挿入すると、Android端末からワールドに入って頂いた方には動画が再生されなくなってしまいます。
＜立体音響編＞
さて、前項の最後でも述べたように、ここでは近付けば音が聞こえ、離れると徐々に音が小さくなる「立体音響」の方法について調べていきます。
自分自身、ここのポイントでかなり躓き、検索などもしましたがあまり出てきませんでした…。
やはりunityはあくまでも「ゲームエンジン」であるため、私たちのように動画の複数挿入と立体音響化する人は少ないようです。
ですので同じ部分で苦戦している人に少しでも有益な情報を届けられたらと思います。
まず私は[Video Player]のコンポーネントのみでは立体音響は不可能だと感じました。なぜならコンポーネント内にそれらしき項目が存在しないからです…(笑)
つまりほかに何かコンポーネントを追加して操作する必要があるはず！と思い探し始めました。 先ほど追加したPlaneの[Inspector]タブからもう一度”Add Component”をクリックし、”Audio” と入力してみました。すると…。
なんかいっぱいでてきた！
この中にあるかもしれない！と思い片っ端から試してみたところ、黄色のアイコン最下部にある[Audio Source]で3Ｄにできそうでした！
早速追加してみます！
何やらいっぱい項目があります。
一番上に[AudioClip]とあることから、どうやら動画の音声を立体にするためにはその動画の音源ファイル(MP3ファイル)が必要になる、と気付きました。
インターネット上のサイトや動画編集ソフトなどでMP4ファイルをMP3ファイルに変換することはそう難しくないので早速変換。
先ほど動画をインポートしたのと全く同じ手順でMP3ファイルもunityにインポートします。その後も全く同じで、[AudioClip]にインポートしたMP3ファイルをドラッグ＆ドロップ。
これで準備は完了です。
“Audio Source”内の項目は殆どそのままの設定で大丈夫です。
今回変更する必要があったのは[Loop] と[Spatial Blend]、[Volume Rolloff]のみです。
また、今回私たちはイベントを開催するにあたって動画を流しっぱなしにする必要があったため、[Loop]にチェックを入れてループ再生を可能にしましたが、その必要がない場合は空欄のままで大丈夫です。
Spatial Blendはその横のバーを見てもらえばわかると思いますが、音源を2Dにするか3Ｄにするかです。今回は実際に聞こえる形に近付けたかったため、3Dの方に設定しました。
そして[Volume Rolloff]は「Linear Rolloff」に変更しておきましょう。下の[Min Distance]と[Max Distance]は聞こえる最小距離と最大距離です。こちらは[Max Distance]を聞こえるようにしたい距離に設定しておきましょう。
私たちが作成していたワールドでは大体10～20程が最適でした。
これでできたはず！！
かなりウッキウキで実際に音が立体になっているのかを試すべくワールドに入ってみました。
その結果がこちらです。
・・・。
離れても普通に聞こえるし何より音が二重になってしまっています。
しかも[Inspector]タブのグラフであ”Lisner”の項目が移動しているのにも関わらず特に変化なくどれだけ離れても聞こえてしまうため、かなり混乱しました。
時間にもあまり余裕がなかったため「どうしよう・・・どうしよう・・・」と焦りながら考えていましたが、もしかするとこれは[Video Player]の部分に問題があるのかもしれないと思い、気になる箇所をいじってみました。
よく見てみると下の方に”Audio Output Mode”と言う項目を見つけました。
「絶対これじゃん！！！」と思い半ば反射的にクリック。
そうすると「Direct」の他に「Audio Source」とあるのを発見。
これを選択してみると、”Audio Output Mode”の下に、新たに”Audio Source”と項目が追加されたと思います。一番最初は「None」となっているので「Plane」に変更しておきましょう。
これで大丈夫なはず！
謎の自信とともにもう一度トライ。
やっとできた！！！
しっかりと離れればそれに伴って音量も小さくなっています。
先ほど失敗してしまったのは[Video Player]に入れていた動画に元々ついている音声と、新たに[Audio Source]にて追加したMP3ファイルが同時に再生されていたからだったんですね。
ともあれ動画の立体音響ができるようになりました！
それでは実際にclusterにアップロードしていきましょう。
まとめ
- Planeに”Audio Source”を挿入する
- Audio Sourceの最大距離と最小距離を設定する
- Video Clipのアウトプットは”Audio Source”にする
＜アップロード編＞
動画や画像を一通り挿入し終えたので実際にアップロードしてみました。
しかし、複数の動画や数十にも上る画像を1つのワールドにまとめてしまったため、嫌な予感はありました。
そしてそれが的中。
いざアップロードしようとすると、いつまで経っても終わりません。
私たちは学園祭当日に、何かcluster内でトラブルがあった際、随時担当者が変更を加えて反映させていく予定だったため、5分～長くても10分ほどでアップロードできるのが理想でした。
しかし、900ＭＢを超えてしまっているワールドがそんな短時間でアップロードできるはずもなく…。
当然学校指定のＰＣを使用していたメンバーはアップロード自体ができませんでしたし、それより性能の良いマシンを使用してもかなりの時間がかかってしまいました。
そこで、私たちが考えた打開策は
- Googleドライブを使用して動画を外部から引っ張ってくる
- ワールドとワールドを繋げるゲートを設置しワールド数を増やす
この2つです。
どちらか1つでも良かったのですが、保険は多い方が良いと言うことで、どちらも実践することにしました。
アップロード方法がわからない！と言う方はこちらのURLをご参照ください。
※ワールドを公開する前にワールドに不安な点があるのであれば、公開する前に「ワールドに入る」を選択して一度ワールド内を確認するのがおすすめです。
＜Googleドライブ＞
Googleドライブとは、Googleが展開している、オンライン上に画像や動画などを保存することができるサービスのことです。このGoogleドライブには、URLを送ることで特定の画像や動画を第三者と共有できる特徴があります。
つまり、この特徴を利用してオンライン上から動画を持ってこようとしたわけです。
そうすれば、Unityのワールド上には「URLがある」という情報しか入っていないため、容量をかなり削ることができます。
加えて、先ほど〈動画挿入編〉の最後に書いた、Androidで動画が再生されない問題も解決でき、一石二鳥です。
それでは、具体的にどうしたのか。それを見てみましょう！
まず、Googleドライブにある動画を右クリックします。出てきたタブの中の「リンクを取得」をクリックすると、以下の写真になると思います。そこで、閲覧者を「制限付き」から「リンクを知っている全員」に変更します。
また、ここで注意しなければならないのは以下のURLを一番下のURLの形に書き換えなければならない点です。ここで書き換えをしないと、Unity内で動画が再生されません。
https://drive.google.com/open?id=<ファイルID>
https://drive.google.com/file/d<ファイルID>/view?usp=sharing↓
https://drive.google.com/uc?id=<ファイルID>ここまで出来たらUnityに戻り、[Plane]の”Video Player”を見ます。
ここの[Source]の部分を”Video Clip”から”URL”に変更します。後はさきほど先ほど書き換えたURLをコピーし、ペーストするだけ！
まとめ
- Googleドライブを使えばAndroid端末でも再生できる
- 使う際はURLの書き換えを行う
＜ワールドゲート＞
ワールドゲートとは複数のワールドを繋げる方法です。ゲートをワールド内に設置するとアップロードした他のワールドに訪れることができます。
この方法は各ワールドがアップロードされていないとできません。と言うのも、ゲートを貼る際には各ワールドの「World or Event ID」が必要です。だからこそ、IDを取得するためにはあらかじめワールドをアップロードすることが必須なのです。
それでは、詳しい方法を説明していきます！
まず、ワールド内にゲートにしたいアセットを設置しましょう。これは壁でもドアでも何でも構いません。
その後、挿入したアセットをクリックして、右横にInspectorタブを表示させます。
この画像の一番下にある「Add Component」をクリックして「World Gate」と検索してください。すると、Inspector内にWorld Gateが追加されると思います。
大事なのはこの次です。World Gateのタブに表示されている「World or Event ID」に繋げたいワールドのIDを入力します。
IDってどうやって入手するの？？と思った方！！
実はclusterのサイトの「ワールド管理」から、ワープ先に指定したいワールドのページに移動し、URLの「 https://cluster.mu/w/」もしくは「 https://cluster.mu/e/」以降がそのままIDになっています。
ワールドIDが手に入ったら、先ほど追加した[World Gate (Script)]の”World Or Event Id”の部分にコピー＆ペーストしてあげましょう。これでこのゲートにぶつかった際、自動的にIDの先にあるワールドへワープすることができます。
この[World Or Event Id]の下にある[Key]が何か気になった人。
お目が高いです。
このKeyの部分は、ワールド作成に欠かせない、[Spawn Point]に関係しています。
[Spawn Point]とは、そのワールドに入った際に「プレイヤーが一番最初に生まれる場所」です。これが設定されていないと、そもそもワールドに入れませんからね。非常に重要なものになっています。
じゃあ具体的にどう関係あるの？
と思った方。
よく考えてみてください。
「ワールドゲート」なのですから、最初にいたワールドから移動した際、戻る手段がないと不便ですよね。それを解消するためにあります。
もうお気付きですね？？
そうです。この[Key] の部分に細工を施すと、ワールドゲートをくぐって移動した際に、プレイヤーの位置を元々の[Spawn Point]とは別の場所にしていすることができちゃうんです！
詳しい説明は下のURLから。
よく分からないと言う人のために捕捉をすると、上の[World Or Event Id]を指定した上で、[Key]の部分に自分自身で決めたワードを入力し、移動先のワールドに置いた[Spawn Point]の同じく[World Gate Key]の部分に、全く同じワードを入力する。
これだけです。
まとめ
- ワールドゲートは２つ以上のワールドを繋ぐことができる
- ワールドやイベントのIDはURLから取得する
- ワールドを移動した際はプレイヤーの場所も指定できる
＜終わりに＞
一番最後に紹介したgoogleドライブから動画を引っ張ってくる方法は、実は本番では使えませんでした。
リンクを共有可能なものにしても、何故か時間が経つと再生されなくなってしまったためです。
本番に使用すると、このエラーがまた起きた際に動画が再生されなくなる危険性があったため、Android OSのお客様には大変申し訳なかったのですが、Video Clipとして載せ直しました。
ワールドゲートとで二重の対策を取っていたのが幸いして、なんとかアップロードは可能でした。
後日、この記事の執筆のために再度検証してみましたが、その際は上手くいきました。
恐らくは何かの手違いでリンクの共有をオフにしていた可能性があります。
みなさんもお気を付けください…(笑)
＜参考文献＞
・【すぐ出来る！】ワールド作成の始め方
・ワールドアップロードのやり方
・Googleドライブに動画をホストしてVideoPlayerで再生する
・World Gateについて
執筆：橋本ゼミ9期生 石川太晴 人見啓太
