Cocos Creator 3.8.8 自定义启动加载页（分3种方案，从简单替换LOGO到完整动画Loading场景）

先分清两个概念：

1. 引擎闪屏Splash（构建后黑屏前那张Cocos图）：Web/小程序/原生打包前的静态图片，项目设置一键替换；
2. 游戏内Loading加载场景（资源加载进度条、动画、动态LOGO）：引擎初始化完成后，加载贴图/预制体/关卡时的自定义页面，支持骨骼动画、液体/软体特效、渐变过渡（你做肉块液体项目优先用这个）

方案一：最简替换默认Splash闪屏（只换LOGO，无动画，5分钟搞定）

1. 编辑器内置配置（全平台通用：Web/微信小游戏/Android/iOS）

1. 顶部菜单 项目 → 项目设置 → Splash Setting（插屏设置）

2. 参数说明：
3. 预览框点击加号，上传你的Logo图片（png/jpg，5M以内）；
4. TotalTime：最小显示毫秒，建议2000（至少显示2秒，不能太短）；
5. Image Size Multiplier：图片缩放比例，100%=原图，200%放大；
6. 取消勾选可直接关闭引擎默认闪屏。
7. 构建项目，打包后自动替换Cocos默认Logo。

2. Web端深度自定义（改背景、隐藏进度条、全屏图）

每次构建会覆盖build文件夹，必须用构建模板build-templates永久保存修改：

1. 项目根目录新建文件夹：build-templates/web-mobile
2. 先构建一次Web，复制build/web-mobile/index.html、style-mobile.css到上面文件夹；

3. 修改css，替换背景图、全屏、隐藏进度条：

   #splash {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000 url(./myLogo.png) no-repeat center;
    background-size: 80%; /* logo占屏幕80% */
   }
   /* 隐藏默认进度条 */
   .progress-bar {
    display: none !important;
   }

4. 把你的logo图片放进build-templates/web-mobile/，下次构建自动生效。

方案二：完整游戏内Loading加载场景（推荐你的肉块液体项目，最强自定义）

优势

• 支持骨骼动画、粒子液体、软体肉块、渐变淡入淡出；
• 实时读取资源加载进度，自定义进度条、文字；
• 不受引擎Splash限制，所有平台通用，微信小游戏/安卓/iOS都能用；
• 可以复用前面写的全局数据单例控制加载参数。

完整实现步骤

步骤1：新建Loading场景

1. 新建场景 Scene_Loading，设为启动场景（项目设置 → 项目数据 → 默认启动场景选Scene_Loading）；

2. 节点结构：

   Canvas
   ├─ Sprite_Bg 背景图
   ├─ Sprite_Logo 你的品牌logo（可加缓动缩放动画）
   ├─ ProgressBar 进度条组件（ProgressTimer）
   └─ Label_Progress 文字：0%

步骤2：加载脚本 LoadingManager.ts

核心逻辑：异步预加载所有游戏资源、实时更新进度、加载完成跳转主场景

import { _decorator, Component, ProgressTimer, Label, director, resources, Vec3, tween } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('LoadingManager')
export class LoadingManager extends Component {
    @property(ProgressTimer) progressBar!: ProgressTimer;
    @property(Label) progressText!: Label;

    onLoad() {
        // Logo入场缩放动画
        const logo = this.node.getChildByName("Sprite_Logo");
        tween(logo)
            .set({ scale: new Vec3(0,0,0) })
            .to(0.6, { scale: new Vec3(1,1,1) })
            .start();

        // 开始预加载资源
        this.loadGameAssets();
    }

    // 批量预加载所有游戏资源（肉块预制体、液体贴图、场景）
    async loadGameAssets() {
        const bundleList = ["textures", "prefabs", "scenes"];
        let total = bundleList.length;
        let loaded = 0;

        for(const bundleName of bundleList) {
            await new Promise(res => {
                resources.loadBundle(bundleName, (finish, totalAll) => {
                    // 更新实时加载进度
                    const curPercent = (loaded + finish / totalAll) / total;
                    this.updateProgress(curPercent);
                }, ()=>{
                    loaded++;
                    res(null);
                })
            })
        }

        // 全部加载完成，跳转主游戏场景
        director.loadScene("Scene_Game");
    }

    // 更新进度条+文字
    updateProgress(percent: number) {
        this.progressBar.progress = percent;
        this.progressText.string = `${Math.floor(percent * 100)}%`;
    }
}

进阶扩展（适配你的软体/液体项目）

1. 加载页放液体粒子、晃动肉块软体
   在Loading场景直接挂载之前写的液体发射器、弹簧质点肉块，加载资源时同步播放动态效果；
2. 全局数据联动
   读取GlobalData里的液体粘度、肉块软度参数，在加载页预览默认效果；
3. 过渡动画
   加载完成加淡出Tween，黑屏后再进入游戏场景，丝滑切换。

方案三：原生平台Android/iOS替换启动图（解决APP打开黑屏）

Android

1. 构建安卓项目后打开proj.android/app/src/main/res/mipmap-xxx；
2. 替换所有ic_launcher、splash图片；
3. 修改values/styles.xml设置全屏启动页背景色。

iOS

1. Xcode打开工程，修改LaunchScreen.storyboard；
2. 替换启动图资源，移除Cocos默认占位图。

三种方案对比，按需选择

避坑关键点

1. 不要混淆Splash和Loading场景
   引擎Splash是引擎初始化前，只能静态图；Loading场景是引擎跑起来之后，能做任意游戏动画；
2. Web端直接修改build文件夹图片会失效
   必须用build-templates模板目录保存自定义html/css，否则每次构建覆盖；
3. 加载场景资源尽量轻量化
   Loading场景只用1-2张小图，不要放大量贴图/物理预制体，避免加载页本身卡顿；
4. 多场景数据共享
   Loading场景和游戏主场景共用之前写的GlobalData全局单例，加载进度、配置互通。

最简推荐流程（你的项目直接照做）

1. 项目设置Splash替换自家Logo（解决开机Cocos标）；
2. 新建Scene_Loading作为启动场景，写上面LoadingManager脚本；
3. 在Loading场景添加液体粒子、弹簧肉块软体做动态视觉；
4. 预加载所有肉块、液体、关卡资源，进度条实时展示，加载完进入游戏。

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/1497.html

转载时须注明出处及本声明