无需修改替换,另类插件式修改插屏、默认进度条、背景、logo

暂时只研究了h5的

这个是3.x版本,其他版本只需要自己修改相关元素名称,通杀!!!

主要官方默认的插屏,强制显示进度条
与我们的加载场景的进度条重复 了

使用方法:
1、复制粘贴代码到你工程里,保存为js文件,勾不勾选【导入为插件】无所谓
2、预览,出效果

(function () {

    // 设置 logo 图像的 Base64 数据

    const logoBase64Data = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAABYlAAAWJQFJUiTwAAADx0lEQVR4nO2a0XHbMBBEl+lALTglqAWlBLegFpQS7BKcEpQS5BLsEuwS6BIuH4Jl+AgQoEiGK2nfDGdiDXI63CMAAlRjZhA8/Fg6AfEdCSFDQsiQEDIkhAwJIUNCyJAQMiSEDAkhQ0LIkBAyJIQMCSFDQsiQEDIkhAwJIUNCyJAQMiSEDAkhQ0LIkBAyJIQMCSFDQsiQEDIkhAwJIUNCyJAQMiSEDAkhQ0LYMLNhF7AxwOJr6T5cEqX6aoSQISFkSAgZEkKGhJAhIWRICBl0QgzYGrA3oI32Om34bHtGvDsDdgYcongv4bNVaLNze6vVErkeg5JsDEPcNx87cb0ZsK6MuXXF8ldrwNoLmTPXUn0phITClTrnC9l7Bybu+r5YD7X9GZsrvZBwh6burG34rk0orr/TWwPuMjHvMzF3Id69fZ/CqvozRa6XIMQP/RdLzOGhGL6jh5ExH3xfCkJG50otJDH821QHo/ad7/ajJBMzOZJC+5ea/kyVK/vh4sb9/acBPnKNG+AZwKv7+L4i5ntPDn/7U+yNOzbXDmxCniv+jy+gjzE0pi9ajjly7bCYkDDc/ZCvKY6/20/T0YiYvcyRa44lR0hnL9E3BUT4NnEnz41ZYo5ckyw9ZQnHkkI6C23fU0uEb/Oe+feUzJFrksWEZJ58ao5EfJvTXJ6KaRULaYk5cs2x9JTln1SKj4WJNr6T/u+SkKpzMcyTaxeyjWFnoze0vXXPsEobuM4h4Zy5Uu/UQ+L+iGHIccRTot1dohD7zHc/Jdpm+zNFrqX6NmYD69k0G3TPkH5X/u/Xxg19Ow5rX7B3AI/4mrvXAHb43vkPAD9Tj592bPvQE3OF4wlscjprgCb1+RS5Fus9xQgZcO0yHU0e8vVcrfXM/QasLHFGlbn2Q0b82Fz/y5Q1VkjoaOll0ud1sIoNVpDSKbbPJ9Wfithn53oxQqIi+tetZseF98nOeIQN+cavWds4VqI/b5Vxz8p1ciHXhnVfZiXfsUz2fYX6Lr0PYcCvRXPt9qu4aSH29bQVM/p0eBTXOmVVLvx+H9K7iZwkr1tdQ0JxP39/tY4+X1n+Rw69Dx2T5HWLQiz965DSNetifsrtRhf1oY/Hjw3wa5ZMhnKNIwQ4bd78zzz9enHW3mZUXoX6Dj7LaprkMQ81YaGOH29fJ3q1OzyXQr2HHy6KWbnWNeRikRAyJIQMCSFDQsiQEDIkhAwJIUNCyJAQMiSEDAkhQ0LIkBAyJIQMCSFDQsiQEDIkhAwJIUNCyJAQMiSEDAkhQ0LIkBAy/gEiKwGhBhG7FgAAAABJRU5ErkJggg==';

    // 自定义背景元素

    let backgroundDiv;

    // 添加全屏背景层,并置于cocos画布层上面

    function addFullScreenBackground() {

        const gameContainer = document.getElementById('Cocos3dGameContainer');

        const gameCanvas = document.getElementById('GameCanvas');

        if (gameContainer && gameCanvas) {

            backgroundDiv = document.createElement('div');

            backgroundDiv.style.position = 'absolute';

            backgroundDiv.style.top = '0';

            backgroundDiv.style.left = '0';

            backgroundDiv.style.width = '100%';

            backgroundDiv.style.height = '100%';

            backgroundDiv.style.backgroundColor = '#ADD8E6'; // 设置背景颜色为浅蓝色

            backgroundDiv.style.zIndex = '0'; // 确保背景在cocos画布节点层的上面,cocos画布层默认为-1

            gameContainer.style.position = 'relative'; // 确保容器是相对定位的,以便背景能够覆盖整个容器

            gameContainer.insertBefore(backgroundDiv, gameCanvas); // 将背景插入到 canvas 之前

            // 添加 logo 图像

            addLogoToBackground();

        }

    }

    // 设置 Base64 图片为 logo 并添加到 backgroundDiv

    function addLogoToBackground() {

        const logoImg = document.createElement('img');

        logoImg.src = logoBase64Data;

        logoImg.style.position = 'absolute';

        logoImg.style.top = '50%';

        logoImg.style.left = '50%';

        logoImg.style.transform = 'translate(-50%, -50%)'; // 横竖居中

        logoImg.style.zIndex = '2'; // 确保 logo 在背景层的前面

        backgroundDiv.appendChild(logoImg);

    }

    // 隐藏进度条

    function hideProgressBar() {

        const splashElement = document.getElementById('splash');

        if (splashElement) {

            splashElement.style.display = 'none';

        }

    }

    // 隐藏背景

    function hideBackgroundDiv() {

        if (backgroundDiv) {

            backgroundDiv.style.display = 'none';

        }

    }

    if (typeof cc !== 'undefined' && !cc.EDITOR) {

        addFullScreenBackground();

        hideProgressBar();

        // 只监听一次,渲染过程之前所触发的事件。

        cc.director.once(cc.Director.EVENT_BEFORE_DRAW, hideBackgroundDiv);

    }

})();

说明:
1、可以结合官方插屏设置,背景或logo,那么代码就没这么多了
2、另外你可以自己加入相关html代码,实现更多的效果

精简版只隐藏进度条:

(function () {

    function hideProgressBar() {

        const splashElement = document.getElementById('splash');

        if (splashElement) {

            splashElement.style.display = 'none';

        }

    }

    if (typeof cc !== 'undefined') {

        hideProgressBar();

    }

})();
11赞

分享一段自用代码:

(function () {

    // 自定义背景元素

    let backgroundDiv;

    // 添加全屏背景层,并置于cocos画布层上面

    function addFullScreenBackground() {

        const gameContainer = document.getElementById('Cocos3dGameContainer');

        const gameCanvas = document.getElementById('GameCanvas');

        if (gameContainer && gameCanvas) {

            backgroundDiv = document.createElement('div');

            Object.assign(backgroundDiv.style, {

                position: 'absolute',

                top: '0',

                left: '0',

                width: '100%',

                height: '100%',

                backgroundColor: '#ADD8E6', // 设置背景颜色为浅蓝色

                zIndex: '0' // 确保背景在cocos画布节点层的上面,cocos画布层默认为-1

            });

            gameContainer.style.position = 'relative'; // 确保容器是相对定位的,以便背景能够覆盖整个容器

            gameContainer.insertBefore(backgroundDiv, gameCanvas); // 将背景插入到 canvas 之前

            // 添加初始化文字

            addInitializationText();

        }

    }

    // 添加初始化文字并进行美化

    function addInitializationText() {

        const initText = document.createElement('div');

        initText.innerText = 'Cocos Creator游戏引擎初始化中...';

        Object.assign(initText.style, {

            position: 'absolute',

            top: '50%',

            left: '50%',

            transform: 'translate(-50%, -50%)', // 横竖居中

            color: '#FFFFFF', // 设置文字颜色为白色

            fontSize: '16px', // 设置字体大小

            fontFamily: 'Arial, sans-serif', // 设置字体

            padding: '10px 20px', // 设置内边距

            backgroundColor: 'rgba(0, 0, 0, 0.5)', // 设置背景颜色为半透明黑色

            borderRadius: '10px', // 设置圆角

            boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)', // 设置阴影

            zIndex: '1' // 确保文字在背景层的前面

        });

        backgroundDiv.appendChild(initText);

    }

    // 隐藏进度条

    function hideProgressBar() {

        const splashElement = document.getElementById('splash');

        if (splashElement) splashElement.style.display = 'none';

    }

    // 隐藏背景

    function hideBackgroundDiv() {

        if (backgroundDiv) backgroundDiv.style.display = 'none';

    }

    if (typeof cc !== 'undefined' && !cc.EDITOR) {

        addFullScreenBackground();

        hideProgressBar();

        // 只监听一次,渲染过程之前所触发的事件。

        cc.director.once(cc.Director.EVENT_BEFORE_DRAW, hideBackgroundDiv);

    }

})();

2赞

不错 卷啊。。。

嘿嘿,还好还好!

大佬 微信上能一开始就显示么

同求 !!!

但是在网页端 还是会先黑屏或者百屏一点点时间 估计在十几ms左右

很不错的方式

只要是属于webview加载的都可以用这个啊,按理微信也是可以的

我web端不会黑屏或白屏啊,我是在画布节点上建立了一个新层,会遮盖掉画布层

插件不是等引擎加载完成后才去加载插件吗?
在打包的时候是需要勾选去掉插屏啦?
因为打开游戏网页的时候加载引擎也需要时间吧,这期间网页就是默认的网页背景色,黑色或者白色

大佬 能给个最小demo包吗 新人想被喂到嘴里 求求了 太需要这个功能了

不是给你喂到嘴里了么?

1、你就复制第2楼代码保存为js文件
2、放到项目的assets目录下
3、然后浏览器刷新预览

谢谢大佬了虽然不知道是什么意思。但是似乎能用

厉害
还能这样操作