画像読み込みの例

Udonを使用すると、インターネット上の画像を読み込み、UI要素やワールド内のオブジェクトのテクスチャとして表示することができます。以下のサンプルワールドでは、このシステムの仕組みと、GitHubを使って画像やキャプションをホストする方法を解説しています。

サンプルワールド

サンプルプロジェクトをダウンロードするか、GitHubリポジトリにアクセスしてクローンを作成してください。

このシーンには、画像と対応するキャプションを自動的に切り替えて表示するフォトフレームが含まれています。画像とキャプションはどちらもGitHub Pages上で無料でホストされており、上記のGitHubリポジトリにも含まれています。

シーンファイル: Assets/_Project/Gallery

ワールドでPrefabを使用する

このPrefabを使用するには、プロジェクトに追加し、画像とキャプションのURLを設定する必要があります。

このリポジトリは、無料ホスティングのために GitHub Pages に公開する設定になっています。画像やキャプションはどこにホストしても構いませんが、無料で設定が簡単であり、画像やキャプションをワールドと同じリポジトリで管理できるため、GitHub Pagesの使用を推奨します。別の場所でホストする場合は、ステップ4に進んでください。

1. サンプルリポジトリをFork して、自身のGitHubアカウントにコピーを作成します。

2. 「Web」ディレクトリ内の画像とキャプションを編集します。index.html ページはブラウザ上で画像とキャプションをテストするためのサンプルですので、無視または削除して構いません。Prefabを使いやすくするために、ファイル名を 1.jpg のままにするか、あるいはリネームしてPrefab側のURLを更新してください。

3. リポジトリを自分のコンピュータにクローンします。

4. Creator Companion を使用して、プロジェクトにSDK 3.2.3以降、ClientSim、および UdonSharp が導入されていることを確認してください。

5. Prefab Unitypackage をプロジェクトにインポートします。

6. SlideshowFrame プレハブをシーンにドラッグ＆ドロップします。

7. シーン内の SlideshowFrame を選択し、Inspectorを表示します。

8. SlideshowFrame コンポーネントで、Image Urls 配列のサイズを読み込みたい画像の数に合わせ、URLを実際の画像URLに更新します。GitHub Pagesを使用している場合、URLの形式は https://<your-github-username>.github.io/<your-repo-name>/1.jpg となります。

9. String Url をキャプション用URLに合わせて更新します。GitHub Pagesを使用している場合、URLの形式は https://<your-github-username>.github.io/<your-repo-name>/captions.csv となります。

動作テスト

GitHubを使用して画像とキャプションをホストしている場合は、変更をコミットしてGitHubにプッシュしてください。これによりGitHub Actionが実行され、ファイルがGitHub Pagesに公開されます。

1. UnityでPlay Modeに入ります。
2. 画像とキャプションが自動的に読み込まれるはずです。読み込まれない場合は、Consoleにエラーが出ていないか確認してください。
3. Build and Test を実行し、VRChat上でも正しく動作することを確認します。その際、設定で「Untrusted URLs」を有効にする必要がある場合があります。

重要なGameObject

シーン内で確認すべき最も重要なオブジェクトは、TheFrame と SlideshowFrame です。

TheFrame

TheFrameは、いくつかの重要な要素を持つGameObjectです。

• SlideshowFrame: Webサーバーから画像とキャプションを読み込む UdonBehaviour です。
• Mesh: 写真の周りにある黒い枠です。
• Picture: ダウンロードしたテクスチャを描画する Mesh です。
• UI: キャプションを描画するワールド空間の Canvas です。

SlideshowFrame

SlideshowFrame UdonBehaviour には、Webサーバーから画像やキャプションをダウンロードするためのすべてのロジックが含まれています。

これには以下の公開変数が含まれます。

• Image Urls: ダウンロードする画像のすべての VRCUrls を格納した Array です。
• String Url: キャプションのテキストをダウンロードするための単一の VRCUrl です。
• Renderer: ダウンロードしたテクスチャがこのターゲット Renderer's の sharedMaterial に設定されます。
• Field: この UI Element's の text プロパティは、ダウンロードされた対応するテクスチャのキャプションから設定されます。
• Slide Duration Seconds: 各画像を表示する時間です。

このスクリプトの基本的なロジックの流れは以下の通りです。

画像ダウンローダーの作成

ImageDownload スクリプトを使用した画像のダウンロード

SDKには、簡単に画像をダウンロードするためのスクリプトが含まれています。

1. シーン内に新しい GameObject を作成します。
2. UdonBehaviour コンポーネントを追加します。
3. プログラムソースとして ImageDownload を選択します。
4. ダウンロードしたテクスチャを適用するマテリアルを選択します。
5. （任意）TextureInfo をカスタマイズして、ダウンロードされるテクスチャの設定を変更します。

VRCImageDownloader 用の独自スクリプトの作成

独自の Udon Graph スクリプトで VRCImageDownloader を使用できます。

1. Constructor ノードを使用して、新しい VRCImageDownloader オブジェクトを作成します。
2. 新しく作成した VRCImageDownloader を変数として保存します。（これは必須です。）
3. VRCImageDownloader インスタンスで DownloadImage 関数を実行します。
4. （任意）OnImageLoadSuccess または OnImageLoadError イベントが発生するまで待機します。

スクリプトの基本的なロジックフローは以下の通りです。

1. Start 時、すべての画像をダウンロードするために再利用する VRCImageDownloader を構築します。テクスチャを保持しておくために、これらを維持することが重要です。

// It's important to store the VRCImageDownloader as a variable, to stop it from being garbage collected!
_imageDownloader = new VRCImageDownloader();

2. String Url からキャプションや文字列をダウンロードします。

文字列のダウンロードに成功したら、行ごとに分割して個別の文字列にし、それらを _captions 配列に保存します。ダウンロードに失敗した場合は、エラーメッセージをログに出力します。

private void Start()
{
    _udonEventReceiver = this;

    // Captions are downloaded once. On success, OnImageLoadSuccess() will be called.
    VRCStringDownloader.LoadUrl(stringUrl, _udonEventReceiver);
}

public override void OnStringLoadSuccess(IVRCStringDownload result)
{
    _captions = result.Result.Split('\n');
    UpdateCaptionText();
}

public override void OnStringLoadError(IVRCStringDownload result)
{
    Debug.LogError($"Could not load string {result.Error}");
}

3. 次の画像を読み込みます。_loadedIndex をインクリメントして現在の位置を把握し、先ほど保存したダウンローダーで DownloadImage() を呼び出します。

画像のダウンロードに成功したら、その参照を保存し、Renderer に読み込みます。失敗した場合は、エラーメッセージをログに出力します。

4. SlideDurationSeconds だけ遅延させて、次の画像を読み込む関数を再度呼び出します。_loadedIndex は各読み込み呼び出し中にインクリメントされ、配列内の最後のURLに到達すると最初に戻ります。

各画像に2回目以降にアクセスした際は、初回ダウンロードに失敗していない限り、新しく読み込むのではなく、保存された Texture2D の参照から表示されます。

既知の問題

• 最初の画像はキャプションの読み込みが間に合わないため、最初のループが一周するまで表示されません。

最終更新: 2026年6月17日