簡単に画像を配置できるように!画像をSpriteに変更する

投稿者:

「Creators Guide」は、メタバースプラットフォーム「cluster」で「つくる」ことにチャレンジしてみたい方に向けた導入ガイドです。

Creators Guideで読むことができるすべての情報はこちらにまとめています。


今回はワールドに写真や画像を展示するときに便利な「Sprite (2D and UI)」の解説をしていきます。かんたんにワールドにポスターや写真を展示したい方には必見です!

ドラッグアンドドロップするだけで画像が配置できるように!

ワールドに画像を配置する時に……

ワールドに画像を配置するときに、縦や横に伸びてしまい困ったという経験はないでしょうか?

この問題は画像のサイズに合わせて、貼り付けるオブジェクトのアスペクト比を調節すると解決できます。しかし、配置したあとには画像の大きさの微調整がしづらくなってしまいます。

縦横に伸びた画像
Scaleを調節して画像サイズに合わせている画像

今回紹介する「Sprite (2D and UI)」の形式に変換すると、よりかんたんに画像を配置・微調整ができるようになります!

変換は簡単!テクスチャーの設定を変えるだけ!

「Sprite (2D and UI)」の形式への変換は非常に簡単。ひとつ設定を変えるだけです!

  • Projectフォルダ上の使用するテクスチャーを選択します
  • Inspector の一番上にある 「Texture Type」を変更しましょう
  • 「Default」から「Sprite (2D and UI)」に変更し、右下の「Apply」ボタンを押して適用します。

これで変換は完了です!

透明部分がある場合は

立ち絵やロゴなど透明部分のあるテクスチャーを使用する場合は追加の設定が必要になります。

  • 「▼」マークを押して Advanced 設定を開きます
  • Alpha Source を「Input Texture Alpha」に、Alpha is Transparency の欄には「✓」チェックマークを入れます
  • 設定が完了したら同様に「Apply」ボタンを押して適用しましょう。

これによって画像の透明部分は透明に表示されます!

設定を変更したテクスチャを選択し、Hierarchy にドラッグアンドドロップしましょう。
背景やワールドの大きさに合わせて、画像の大きさを調整したら完成です!

解像度が高い画像を置きすぎるとワールドが重くなってしまうので注意!

解像度が高い画像や設置する画像の枚数が多いと、ワールドの容量が大きくなりプレイ体験が損なわれる可能性があります。
その時はUnity上で画像の解像度を変更できます!

  • Projectフォルダ上の使用するテクスチャーを選択
  • Inspectorの下の方にあるMax Size を変更した
  • 「Apply」ボタンを押して適用する

これだけで解像度の変更ができます!ワールドの軽量化が必要になった際にこちらの設定を見直してみてください。

Url Texture と Sprite の違い

clusterで画像を配置する方法の一つに、「Url Texture」があります。Url TextureとはURLから画像を取得してワールドのテクスチャとして使用する機能です。

Url Texture はGoogleDriveなどのクラウドサービスを併用すると、ワールドの更新をしなくてもワールド内のテクスチャを変えることができます。その一方で、画像のアップロードをして、Url を発行する手順が必要になります。

Sprite を用いて画像を配置する方法では、Unity に画像をインポートして配置するだけなのでかんたんに展示ができます。しかし、画像を変更したくなったらワールドの更新が必要になります。

このようにそれぞれの手段には一長一短があります。

  • 画像を更新しない場合、Sprite で画像を配置。
  • 画像を更新する場合、Url Texture を用いて配置。

使用用途に合わせて使い分けてみましょう!


最後に公式による記事や多くのクリエイターの皆さんによるドキュメントやコミュニティを紹介します。
ぜひ活用して自分だけのワールドを制作してみましょう!

▼ 「Cluster Creator Kit」の全てが分かる公式ドキュメント
Cluster Creator Kit ドキュメントhttps://docs.cluster.mu/creatorkit/

▼ クリエイターによる投稿記事まとめ
ワールド制作部https://note.com/cluster_official/m/m1fd772ab8f45
アバター制作部https://note.com/cluster_official/m/m6b18e343f35c
イベント制作部https://note.com/cluster_official/m/m7155e6f6887f

▼ 分からないことがあればコミュニティを活用してみましょう!
Cluster Creator Community Discord
https://discord.gg/DHQmAfDhkt