Skip to main content

图片加载示例

Udon 可以从互联网加载图片，并将其显示为 UI 元素或世界对象上的纹理。我们的示例世界演示了该系统的工作方式，以及如何使用 GitHub 托管图片和标题。

示例世界​

下载示例项目或访问 GitHub 仓库自行克隆。

此场景有一个相框，它会自动更换显示不同的图片和匹配的标题。图片和标题都免费托管在 GitHub Pages 上，并包含在上面的 GitHub 仓库中。

场景文件：Assets/_Project/Gallery

在世界中使用预制件​

要使用预制件，你需要将其添加到项目中并设置图片标题 URL。

此仓库发布到 GitHub Pages 以免费托管。你可以将图片和标题托管在任何地方，但我们建议使用 GitHub Pages，因为它是免费的，易于设置，并且你可以将图片和标题与世界保存在同一个仓库中。如果你将它们托管在其他地方，请跳到第 4 步。

  1. 将示例仓库 fork 到你的 GitHub 账户。

  2. 编辑"Web"目录中的图片和标题。你可以忽略或删除 index.html 页面，它只是作为在浏览器中测试图片和标题的示例。你可以保持图片命名为 1.jpg 等以方便使用预制件，或者重命名它们并更新预制件 URL。

  3. 将仓库克隆到你的计算机。

  4. 确保你的项目具有 SDK 3.2.3 或更新版本，以及 ClientSim 和 UdonSharp，这些可以通过 Creator Companion 轻松添加。

  5. 将预制件 Unitypackage 导入到你的项目中。

  6. 将 SlideshowFrame 预制件拖入场景。

  7. 在场景的检视面板中选择 SlideshowFrame。

  8. 在 SlideshowFrame 组件中，将 Image Urls 数组大小设置为要加载的图片数量，然后更新 URL 以匹配你的图片 URL。

  9. 更新 String Url 以匹配你的标题 URL。

测试​

  1. 在 Unity 中进入播放模式。
  2. 图片和标题应自动加载。如果没有，请检查控制台是否有错误。
  3. 运行 Build and Test 以确保它在 VRChat 中也能工作。你可能需要在设置中打开"Untrusted URLs"。

重要游戏对象​

场景中最重要的对象是 TheFrame 和 SlideshowFrame。

SlideshowFrame​

SlideshowFrame UdonBehaviour 包含从网络服务器下载图片和标题的所有逻辑。

创建图片下载器​

使用 ImageDownload 脚本下载图片​

SDK 包含一个脚本来轻松下载图片：

  1. 在场景中创建一个新的 GameObject。
  2. 添加一个 UdonBehaviour 组件。
  3. 选择 ImageDownload 作为程序源。
  4. 选择一个材质以应用下载的纹理。

创建你自己的 VRCImageDownloader 脚本​

你可以在自己的 Udon Graph 脚本中使用 VRCImageDownloader。

  1. 使用其 Constructor 节点创建一个新的 VRCImageDownloader 对象。
  2. 将新创建的 VRCImageDownloader 保存为变量。（这是必需的。）
  3. 在 VRCImageDownloader 实例上执行 DownloadImage 函数。
  4. （可选）等待 OnImageLoadSuccess 或 OnImageLoadError 事件执行。

已知问题​

  • 第一张图片的标题加载不够快，因此直到第一次循环才会显示。
Udon

查看图片加载主要文档页了解图片加载系统的完整详细信息，包括域名和文件限制。