「Cluster Creator Kit」を使ってみるhattori

自分のワールドで告知してみよう！──Url Texture・Url Raw Imageの使い方

今回はワールドや画面に表示する画像を更新するときに便利な「Url Texture」、「Url Raw Image」の解説をしていきます。更新のしやすさを活かした使い方をいくつか紹介します！

Url Texture と Url RawImage とは？

まず、今回使用するコンポーネントについて説明します。

  • Url Texture
    • 対象のRendererに割り当てられているMaterialに対して、指定したUrlの画像を設定できます。ワールドに配置する画像の更新に使用することができます。
  • Url Raw Image
    • 対象のRaw Imageのテクスチャーを指定したUrlの画像に変更できます。UIで表示される画像の表示をUrlを利用して更新できるようになります。

Url Texture、Url Raw ImageはURLから画像を取得してワールドで使用しているテクスチャを更新できる機能です。

GoogleDriveなどのクラウドサービスを併用することで、ワールドの更新をしなくてもワールド内のテクスチャを変えることができます。
以前の記事では、Url Textureを使って、写真展の作り方を紹介しています。

Url Textureを使って入れ替えが簡単なバーチャル写真展をつくろう

この記事ではこの更新のしやすさを活かし、Url Raw Imageも使用して、ワールドで告知する方法をいくつか紹介します。

画像更新用のurlを作成する

GoogleDriveを使用して更新用のurlを作成します。
まず、使いたい画像をGoogleDriveにpng形式かjpeg形式でアップロードします。

次に共有の設定をします。
リンクの取得から、共有対象をリンクを知っている全員に変更します。

GoogleDriveの共有リンクは直接使えないので以下のようにURLを書き換えます。

https://drive.google.com/file/d/<ファイルID>/view?usp=sharing
↓
https://drive.google.com/uc?id=<ファイルID>

これでUrlの準備ができました！

注意
Googleドライブなどを利用する場合は、一時的なアクセス制限などにより表示されなくなる場合もありますので、ご注意ください。

自分のワールドで告知してみよう！

今回は自分のワールドで3つの告知の仕方をつくります。

  • カレンダーをつくってみる (Url Texture)
  • 「ワールドへようこそ！」をつくってみる (Url Raw Image)
  • 「一緒にワールド巡りしませんか？」に変えてみる (Url Raw Image)

それでは、順を追って解説していきます！

今回は、テンプレートワールドの1つであるProgressionを利用します。このプロジェクトはテンプレートプロジェクトの「Asset/ClusterCreatorKitTemplate/Progression/Scenes/Progression」に入っています。

テンプレートの導入の仕方が分からない……という方は下記の記事をご覧ください！

すぐにワールド制作をはじめたい方へおすすめ！──テンプレートワールドとメインスクリーンと（サンプルプロジェクト）の導入方法

カレンダーをつくってみる (Url Texture)

Url Textureを使ってカレンダーを設置します！
Progressionの入り口の右の壁に設置し、毎回ワールドに入った人の目につくようにしてみましょう。

  • まずはHierarchyのCreate Emptyから空のGameObjectを作成します。
  • 作成した空のGameObjectを右クリックして、子オブジェクトとしてQuadを作成します。
  • QuadのTransformを以下のように変更します。
xyz
Position000
Rotation000
Scale1画像の縦サイズ/画像の横サイズ1
  • 今回は1920×1080の画像を使用したので、このようになりました。

Url Textureを設定する

  • QuadのInspectorの一番下のAddComponentからUrl Textureを追加します。
  • Url TextureのUrlの欄に先ほど書き換えたGoogleDriveの画像のURLを入力します。
https://drive.google.com/uc?id=<ファイルID>

この状態でワールドアップロードしてみると…

アップロードした画像が表示されました！

マテリアルを設定する

このままだと写真の表面にテカリがあったりして見づらいので、画像を見やすくするために光の影響を受けないマテリアルを設定します。

  • Project欄から新規Materialを作成し、好きな名前を付けます。
  • 今回は『UrlTexture-Calender』と名前をつけます。
  • 次に新しく作成したマテリアルを選択し、インスペクタのShader欄にtextureと入力し、Texture (Unlit/Texture)というShaderを選択します。
  • マテリアルのシェーダーがUnlit/Textureに変更されていることを確認したらUrl Textureを設定しているQuadにつくったマテリアルをドラッグアンドドロップで適用します。

絵が光の影響を受けなくなって綺麗に見えるようになりました！

※絵に光を当てたい場合にはStandardシェーダーなどのマテリアルを使用しましょう！

画像を変えてみる

次はGoogleDriveでの画像の差し替え方を説明します。

  • 更新したい画像を右クリックし、版の管理を選択します。
  • 新規アップロードを押して、更新する画像をアップロードします。
  • 元画像との縦横比率が変わらないように注意してください。

ワールドに入りなおしてみると画像が変わりました！

（＋α）外部ツールの可能性

このUrlの仕組みは他のツールを利用することができる数少ないコンポーネントです(2022/03 現在)。

今回のものは、手動で更新することを想定していますが、Urlで更新できる仕組みを活用し、自動で更新するシステム…AIで最適なものを提示するシステム…といったものをつくることができるかもしれません。

たとえば、こんな感じの質問コーナーをワールドの中に置く…ということもできるかもしれません。
現実の施設のように他の人が質問しやすい仕組みを用意し、色々な質問が自動的に集まってくると楽しそうですね！

「ワールドへようこそ！」をつくってみる (Url Raw Image)

Url Raw Imageを使って、画面一面に「ワールドへようこそ！」と表示させるようにします。
ワールド入室時に表示されるように作成していきます。

  • HierarchyのPlayer Local UIを右クリックして、子オブジェクトとしてRaw Imageを作成します。

※Player Local UIがない場合は、HierarchyのCreate Emptyから空のPlayer Local UIを作成します。

  • Raw ImageのRect Transformを以下のように変更します。
Scale1画像の縦サイズ/画像の横サイズ1
  • 今回は1920×1080の画像を使用したので、このようになりました。
  • 少し小さすぎるので、ScaleのX、Yを5倍にします。

Url Raw Imageを設定する

  • RawImageのInspectorの一番下のAddComponentからUrl Raw Imageを追加します。
  • Url Raw ImageのUrlの欄に先ほど書き換えたGoogleDriveの画像のURLを入力します。
https://drive.google.com/uc?id=<ファイルID>

この状態でワールドアップロードしてみます。

アップロードした画像が表示されました！

Animationを設定する

このままだと画像が表示されつづけてしまうので、Raw ImageにAnimation、Animator Controllerをつけて非表示されるようにします。

今回はAnimation、Animator Controllerをあらかじめ用意しています。

  • まず、こちらをダウンロードしておいてください。
urlrawimage-fadeダウンロード
  • ダウンロードしたUnity package ファイルをProjectにドラッグ&ドロップするか、ダブルクリックします。
  • すると、下記のウインドウが表示されるので、すべての項目をチェックした状態で、Importをクリックしてください。

Animation、Animatorの作り方についてはこちらの記事で紹介しています。自分でつくりたいという方は是非ご覧ください！

Animation・Animatorを使ってワールドに動きを与える
  • RawImageのInspectorの一番下のAddComponentからAnimatorを追加します。
  • AnimatorのControllerの項目に、Importした AnimatorController(Asset/ClusterCreatorKitTemplate/Progression/AnimatorControllersの中にあります。)をドラッグアンドドロップで適用します。

この状態でワールドアップロードしてみます。

ワールドに入り直してみると、画像が入室時だけ見えるようになりました！
※演出したいものに合わせてAnimation、Animatorを作成・使用してみてください。

表示するものを切り替えてみる (Url Raw Image)

Url Raw Imageを使って、一時的に「一緒にワールド巡りをしませんか？」と表示させるように変更します。

  • 更新したい画像を右クリックし、版の管理を選択します。
  • 新規アップロードを押して、更新する画像をアップロードします。

ワールドに入りなおしてみると画像が変わりました！

  • 戻す際は再度新規アップロードを押して、元々の画像をアップロードします。

ワールドに入りなおしてみると画像が戻っているのが確認できました！

一時的に画像を更新することで、その場にいる人とコミュニケーションすることができます。たとえば、そのワールドで行われるイベントの告知をすることもできます。それがきっかけでイベントに参加してくれるかもしれませんね。
是非自分のワールドを活用して告知してみてください！