展示室・額縁の配置紹介
画像を入れる前の展示室・額縁の配置を紹介する共通動画です。
活用例
- 自己紹介パネル
- イベントのリンク付きキャスト紹介パネル
- 1名につき小ボタン1個・1リンクを割り当てる場合、1枚の額縁で最大3名を紹介可能
- 作品や商品の展示・紹介
Gallery Roomには額縁が含まれます。額縁のために両商品を購入する必要はありません。
リンク機能付きポスターフレーム
自分のワールドに、作品や商品画像を飾るためのポスターフレームです。 ウッド・ブラック・シルバーの3色から選び、画像やリンクボタンをUnityのInspectorで設定できます。
額縁単体で使用できます。Gallery Roomの導入は必要ありません。
購入前に確認すること
本商品はVRChatのワールド制作向けUnityデータです。設定済みPrefab、額縁のモデル・マテリアル・テクスチャ、設定・リンク機能のスクリプトを含みます。
展示室は付属しません。室内も含めて展示ワールドを用意したい場合は、Gallery Roomをご覧ください。 商品画像に掲載しているポスターは使用例で、付属データには含まれません。
設定画面の青い画像とexample.comは説明用のサンプルです。画像とリンク先はご自身のものに置き換えてください。全桁0のグループIDは仮の値で、実際のリンク先には使えません。
制作・導入確認環境
| 項目 | 確認に使用したバージョン |
|---|---|
| Unity | 2022.3.22f1 |
| VRChat SDK - Worlds | 3.10.5 |
| lilToon | 2.3.4 |
別プロジェクトへインポートし、VRChatワールドでリンクが動作することを確認しています。
導入手順
- VRChat Creator CompanionでWorlds用プロジェクトを作成するか、使用するワールドのプロジェクトを開きます。
- lilToonを導入します。
- 購入したunitypackageをインポートします。
Assets/n72room/PosterDisplay/Prefabsから、使いたい色のPrefabを選びます。- PrefabをHierarchyにドラッグし、設置したい場所へ移動します。
既存プロジェクトへ導入する場合は、先にプロジェクトをバックアップしてください。 文字データの不足を案内された場合は、Unityの「Window → TextMeshPro → Import TMP Essential Resources」から必要なリソースを読み込みます。
ベイク済み照明を使うワールドへ配置する場合
設置先でlilToonにライトマップを反映する場合は、導入時に以下を確認します。
- Projectで、ShaderがlilToonのマテリアルを1つ選択します。
- Inspector上部の「シェーダー設定」を選びます。
- 「ビルドサイズの最適化（全マテリアル共通）」を開きます。
- 「ライトマップを使用」をONにします。
これはプロジェクト内のlilToonに共通する設定です。
額縁の場所と色の選び方
Assets/n72room/PosterDisplay/Prefabsに、次の3つがあります。
| Prefab | 色 |
|---|---|
| Wood.prefab | ウッド |
| Black.prefab | ブラック |
| Silver.prefab | シルバー |
色を変更したい場合は、使いたい色のPrefabを新しくHierarchyへ配置し、設置位置・大きさ・画像・リンクを設定します。 新しい額縁の表示・動作を確認してから、以前の額縁を削除してください。 画像・リンクは額縁ごとの設定なので、新しいPrefabにも設定します。
Inspectorの主な項目は「日本語 / English」で併記しています。以下の手順では日本語側の表記を使います。
基本の設定
Hierarchyで配置した額縁の親オブジェクトを選択します。 Inspectorのポスター・フレーム・ボタンの設定欄から変更します。
画像を入れる
- 使用する画像をUnityのProjectに読み込みます。
- 額縁の「画像」欄に、その画像を指定します。
- Scene上で見え方を確認します。
画像はUnityに取り込んだTextureを指定します。画像のURLを入力して読み込む機能ではありません。 画像を差し替える場合も、Hierarchyで対象の額縁を選び、同じ「画像」欄へ新しい画像を指定します。
向きと縦横比を変える
「向き」で縦向き・横向きを選択します。 「縦幅（%）」で元の比率から調整できます。初期サイズは100%です。
横向きにすると、フレームを90度回転し、ライトを上、ボタンを下に配置します。 縦幅の調整は回転前の縦方向に適用されるため、横向きでは横幅の調整になります。 元の比率へ戻す場合は「縦幅を元に戻す」を使用します。
額縁全体を大きく・小さくする場合は、親オブジェクトのTransformで均等に拡大・縮小します。
ボタンを選ぶ
| 形式 | 使用例 |
|---|---|
| メインボタン | 1つの案内先を大きなボタンで表示する |
| 小さいボタン | 複数の案内先をコンパクトに並べる |
| ボタンなし | 作品だけを展示する |
小さいボタンは最大3個まで配置できます。 各ボタンにリンク・X・YouTubeのアイコンと案内先を設定します。 詳細設定では、大きさ・間隔・高さを調整できます。
通常のURL
案内したいWebページのURLを設定します。 ワールド内のURL表示からコピーできます。外部ブラウザーを自動で開く動作ではありません。
アイコンをYouTubeやXにしても、動画や投稿を額縁内で再生・表示する機能にはなりません。
VRChatグループへのリンク
リンクボタンのグループ設定を有効にし、グループIDまたはグループURLを指定します。 操作すると、VRChat内のグループ画面を開きます。 参加手続きは開いた画面で行います。
グループID・URLが正しく指定されていないボタンは操作できません。
色と明るさ
外枠の色は、ウッド・ブラック・シルバーのPrefabから選びます。 発光の「色・明るさ」は、ライト・内フレーム・ボタンの光る部分に適用されます。
HDRのIntensityを上げると明るく、下げると暗くなります。 ポスター画像の明るさは別の設定なので、発光の変更だけで画像自体の明るさは変わりません。
画像が白飛びする・発光が強く感じる場合
画像の色合いによって、白い部分が明るすぎたり、細部が見えにくくなったりする場合があります。
- Hierarchyで対象の額縁を選択します。
- Inspectorの「ポスター」にある「画像専用マテリアルを選択」を押します。画像を指定した後に表示されます。
- 選択されたマテリアルのlilToon「詳細設定 → 発光設定」で、「発光テクスチャ」のチェックをOFFにするか、発光色（HDR）を開いてIntensity（強度）を下げます。
- Sceneと実際のワールドで、画像の色合いや細部を確認します。
この画像専用マテリアルへの変更は、対象の額縁に反映されます。 ライト・内フレーム・ボタンの発光を調整したい場合は、額縁側の「発光 → 色・明るさ」を使います。 lilToon公式：発光設定
操作距離と音
詳細設定で、ボタンを操作できる距離と操作音を設定します。 操作距離の外にいる場合、ボタンを押せません。 操作音は有効・無効の切り替えと音量の調整ができます。
設定後の確認
- 使用するすべての額縁で画像・向き・ボタンを確認します。
- URLとグループIDが意図した案内先になっているか確認します。
- シーンを保存します。
- VRChat SDKのテスト機能で、実際の操作距離・URL表示・グループ画面を確認します。
よくある質問
Gallery Roomを持っていなくても使えますか？
使えます。既存のVRChatワールドに額縁のPrefabを配置できます。
ボタンが反応しません
操作距離の内側にいるか、URLまたはグループIDが設定されているか確認してください。 リンクを操作するUIにはEventSystemが必要です。シーン内で有効になっているか確認します。 EventSystemを複数追加して解決しようとせず、既存のものを確認してください。
EventSystemは何ですか？
入力欄やボタンなどのUI操作を扱うUnityのオブジェクトです。 額縁のURL表示・操作にも関わるため、不要な装飾として削除しないでください。
額縁がピンク色になりました
lilToonが導入されているか、UnityのConsoleに読み込みエラーが出ていないか確認してください。
文字が表示されません
TextMeshProのリソースの読み込みと、Consoleのエラーを確認してください。
使用例と同じ画像は付属しますか？
付属しません。ご自身の作品や商品画像を設定してお使いください。
更新
更新データはBOOTHの購入履歴から確認してください。 更新前にはプロジェクトをバックアップし、更新後に画像・リンク設定とシーンを確認します。
商品画像は使用例です。掲載している作品・商品画像は付属しません。
商品画像は使用例です。掲載している作品・商品画像は付属しません。
商品画像は使用例です。掲載している作品・商品画像は付属しません。