跳到主要内容

加载画面

所有新建的 PlayCanvas 项目都使用默认加载画面：

默认加载画面

启动页和已发布应用都会显示该画面。

自定义加载画面​

要创建自定义加载画面，请单击工具栏或视口中的齿轮图标，在检查器中打开设置。

设置

然后找到 LOADING SCREEN 区域：

加载画面设置

这里有两个选项：

  1. CREATE DEFAULT：在资源面板中创建加载画面脚本，包含默认加载画面的完整代码。你可以根据需求修改它。
  2. SELECT EXISTING：从资源面板中选择已有的自定义加载画面脚本。

假设你没有现成脚本，选择创建默认脚本。下面是仅显示纯色背景的最简加载画面：

pc.script.createLoadingScreen((app) => {
    // Create the main loading screen div
    const div = document.createElement('div');
    div.style.backgroundColor = "#232323"; // Dark gray background
    div.style.position = "absolute";
    div.style.top = "0";
    div.style.left = "0";
    div.style.height = "100%";
    div.style.width = "100%";
    document.body.appendChild(div);

    // Hide the loading screen when the app starts
    app.once('start', () => {
        document.body.removeChild(div);
    });
});

不过，用户通常更希望看到加载进度条！下面给脚本加上进度条：

pc.script.createLoadingScreen((app) => {
    // Create the main loading screen div
    const div = document.createElement('div');
    div.style.backgroundColor = "#232323"; // Dark gray background
    div.style.position = "absolute";
    div.style.top = "0";
    div.style.left = "0";
    div.style.height = "100%";
    div.style.width = "100%";
    document.body.appendChild(div);

    // Create the progress bar div, centered on the screen
    const progressBar = document.createElement('div');
    progressBar.style.position = "absolute";
    progressBar.style.top = "50%";
    progressBar.style.left = "25%";
    progressBar.style.transform = "translateY(-50%)";
    progressBar.style.width = "50%";
    progressBar.style.height = "20px";
    progressBar.style.backgroundColor = "#d3d3d3"; // Light gray for the bar background
    div.appendChild(progressBar);

    // Create the filler for the progress bar
    const progressFiller = document.createElement('div');
    progressFiller.style.height = "100%";
    progressFiller.style.backgroundColor = "#4caf50"; // Green for the progress
    progressFiller.style.width = "0%";
    progressBar.appendChild(progressFiller);

    // Update the progress bar on preload progress
    app.on('preload:progress', (value) => {
        progressFiller.style.width = (value * 100) + '%';
    });
    app.once('preload:end', () => {
        app.off('preload:progress');
    });

    // Hide the loading screen when the app starts
    app.once('start', () => {
        document.body.removeChild(div);
    });
});

添加图片​

自定义加载画面属于普通 DOM 内容，因此可以通过标准 HTML 和 CSS 添加图片。对于需要在加载画面出现时立即展示的品牌图片，推荐将图片以 Base64 数据 URI 的形式嵌入加载脚本。

Base64 数据 URI 将图片编码为文本，例如 data:image/png;base64,...。由于数据已经包含在加载脚本中，浏览器无需等待 PlayCanvas 资源注册表就绪，也无需额外请求即可显示图片。

创建方法如下：

  1. 先导出并压缩图片，尽量减小标志和启动图片的体积。
  2. 使用 img64 等在浏览器本地处理文件的工具，或团队惯用的本地编码工具转换图片。
  3. 将完整的 data:image/...;base64,... 字符串复制到加载脚本中。
  4. 将字符串直接赋给 img.src，或在 CSS 中通过 background-image: url("...") 使用。
pc.script.createLoadingScreen((app) => {
    const LOGO_IMAGE = "data:image/png;base64,iVBORw0KGgo...";

    const wrapper = document.createElement('div');
    wrapper.style.position = "absolute";
    wrapper.style.inset = "0";
    wrapper.style.display = "flex";
    wrapper.style.alignItems = "center";
    wrapper.style.justifyContent = "center";
    wrapper.style.backgroundColor = "#232323";
    document.body.appendChild(wrapper);

    const logo = document.createElement('img');
    logo.alt = "";
    logo.src = LOGO_IMAGE;
    logo.style.width = "240px";
    wrapper.appendChild(logo);

    app.once('start', () => {
        document.body.removeChild(wrapper);
    });
});

嵌入图片会增大加载脚本，因此应控制图片体积，避免用这种方式嵌入大型背景图。

有关使用 Base64 数据 URI 将图片直接嵌入加载画面的项目示例，请参阅 Base64 加载画面图片教程。

其他图片来源​

如果装饰图片不影响关键信息，且可以接受延迟出现，也可以使用项目资源，但这不适合必须立即显示的图片。加载画面脚本执行得很早，此时应用尚未完全初始化和配置。虽然 app.assets 注册表已存在，但所需的项目资源记录可能要等应用配置后才可用；等待 preload:start 或资源注册表事件可能导致图片出现明显延迟。

也不建议使用相对路径。编辑器通过 API 生成的 URL 提供资源，而不是通过加载脚本旁的简单路径提供资源。相对 URL 在启动页、发布构建以及下载或自行托管的构建中可能表现不同。

托管或 CDN URL 也可以使用。将完整 URL 直接用于 img.src 或 CSS 的 background-image，并确保托管、缓存和跨域行为符合部署要求。

尽情发挥创意，使用你喜欢的 HTML 和 CSS 创建理想的加载画面吧。