暂时只研究了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();
}
})();
