cocos creator 升级到3.x之后加载进度条取消了，测试了多个3.x版本最终以creator 3.6.3版本，构建了简单的进度加载
参考链接：
https://forum.cocos.org/t/topic/137113
打包web-mobile后，没有进度条。加载的时候只显示一个黑屏。 - Creator 3.x - Cocos中文社区
cocos creator 3.6.x 版本H5下 启动页做进度条加载 - 掘金
参考了多个实例，大部分之解决到了第一个场景的加载进度，但creater 中cc.js加载时还是会留下空白时间，所以做了个伪进度条，让进度更平滑
主要对以下文件修改
设计思路：添加个计时函数，让进度每秒都长，确保每个时间都在增长，然后在一些关键点，插入手动更新，让进度更真实平滑
//------------------中间是新增加内容-----------------------
//-------------------end-----------------
1、 style.css中添加进度条及logo的布局
html {-ms-touch-action: none;
}body, canvas, div {display: block;outline: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-khtml-user-select: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}/* Remove spin of input type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {/* display: none; <- Crashes Chrome on hover */-webkit-appearance: none;margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}body {position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 0;border: 0;margin: 0;cursor: default;color: #888;background-color: #333;text-align: center;font-family: Helvetica, Verdana, Arial, sans-serif;display: flex;flex-direction: column;
}canvas {background-color: rgba(0, 0, 0, 0);
}#GameDiv, #Cocos3dGameContainer, #GameCanvas {width: 100%;height: 100%;
}
/******************以下 进度条和logo **********/
.progress-bar {background-color: #1a1a1a;position: absolute;left: 25%;top: 80%;height: 14px;padding: 5px;width: 50%;/*margin: 0 -175px; */border-radius: 5px;box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}.progress-bar span {display: block;height: 100%;border-radius: 3px;box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;transition: width .4s ease-in-out; background-color: #34c2e3;
}.stripes span {background-size: 30px 30px;background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent); animation: animate-stripes 1s linear infinite;
}#splash {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #171717 url(./splash.png) no-repeat center;background-size: 45%;
}
/******************end**********/2、 index.html中添加节点，并且启动显示
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Cocos Creator | spider</title><!--http://www.html5rocks.com/en/mobile/mobifying/--><meta name="viewport"content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,minimal-ui=true"/><!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html--><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="format-detection" content="telephone=no"><!-- force webkit on 360 --><meta name="renderer" content="webkit"/><meta name="force-rendering" content="webkit"/><!-- force edge on IE --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="msapplication-tap-highlight" content="no"><!-- force full screen on some browser --><meta name="full-screen" content="yes"/><meta name="x5-fullscreen" content="true"/><meta name="360-fullscreen" content="true"/><!--fix fireball/issues/3568 --><!--<meta name="browsermode" content="application">--><meta name="x5-page-mode" content="app"><!--<link rel="apple-touch-icon" href=".png" />--><!--<link rel="apple-touch-icon-precomposed" href=".png" />--><link rel="stylesheet" type="text/css" href="style.css"/></head>
<body><div id="GameDiv" cc_exact_fit_screen="true"><div id="Cocos3dGameContainer"><canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="99"></canvas></div></div><!--------------添加节点 --------------><div id="splash"><div class="progress-bar stripes"><span style="width: 0%"></span></div></div><!-----------------end---------------><!-- Polyfills bundle. -->
<script src="src/polyfills.bundle.js" charset="utf-8"> </script><!-- SystemJS support. -->
<script src="src/system.bundle.js" charset="utf-8"> </script><!-- Import map -->
<script src="src/import-map.json" type="systemjs-importmap" charset="utf-8"> </script><script>System.import('./index.js').catch(function(err) { console.error(err); })
</script>
<!--------------启动显示进度 -------------->
<script type="text/javascript">(function () { var splash = document.getElementById('splash');splash.style.display = 'block';})();
</script>
<!--------------end -------------->
</body>
</html>
3、 添加进度条更新onProgress，和自动一个计时更新函数，onProgress手动调用分的越细节，进度曲线越平滑
System.register([], function (_export, _context) {"use strict";var cc, Application;//---------------计时函数 和更新进度函数--------------var percentJd=0;//每秒更新进度条var timer =setInterval(() => {const now = new Date();//console.log(now.toString());if (percentJd<90) {percentJd=percentJd+1;onProgress(percentJd);} else{clearInterval(timer);}}, 1000);//刷新ui 及进度function onProgress(percent){//用于手动跟新，比每秒进度大就更新if (percent>percentJd) {percentJd=percent;}var progressBar = splash.querySelector('.progress-bar span');// var percent = 100 * finish / total;if (progressBar) {progressBar.style.width = percent + '%';}}//---------------------------end-----------------function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }return {setters: [],execute: function () {_export("Application", Application = /*#__PURE__*/function () {function Application() {_classCallCheck(this, Application);this.settingsPath = 'src/settings.json';this.showFPS = false;}_createClass(Application, [{key: "init",value: function init(engine) {cc = engine;cc.game.onPostBaseInitDelegate.add(this.onPostInitBase.bind(this));cc.game.onPostSubsystemInitDelegate.add(this.onPostSystemInit.bind(this));}}, {key: "onPostInitBase",value: function onPostInitBase() {// cc.settings.overrideSettings('assets', 'server', '');// do custom logic}}, {key: "onPostSystemInit",value: function onPostSystemInit() {// do custom logic}}, {key: "start",value: function start() {、//---------------手动更新进度条--------------//上面的其他函数中可以拆分更细致onProgress(50);，//game.init，初始化第一个场景，第一个场景比较大的话也会比较耗时，所以定在50%//----------------------------------------return cc.game.init({debugMode: false ? cc.DebugMode.INFO : cc.DebugMode.ERROR,settingsPath: this.settingsPath,overrideSettings: {// assets: {// preloadBundles: [{ bundle: 'main', version: 'xxx' }],// }profiling: {showFPS: this.showFPS}}}).then(function () {return cc.game.run();});}}]);return Application;}());}};
});4、关闭进度条和logo的显示的监听
System.register(["./application.js"], function (_export, _context) {"use strict";var Application, canvas, $p, bcr, application;//------注册第一个场景 是否加载完成监听-----------------function setLoadingDisplay () {console.log('Engine is initialized');cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function () {console.log('game run over' ); //关闭进度条显示splash.style.display = 'none';//关闭计时，但有时无效，未找到原因，有好的修改方案告知下if (application.timer) {clearInterval(application.timer);}});}//------ end-----------------function topLevelImport(url) {return System["import"](url);}return {setters: [function (_applicationJs) {Application = _applicationJs.Application;}],execute: function () {canvas = document.getElementById('GameCanvas');$p = canvas.parentElement;bcr = $p.getBoundingClientRect();canvas.width = bcr.width;canvas.height = bcr.height;application = new Application();topLevelImport('cc').then(function (engine) {//------cc 文件加载完后，添加监听-----------------setLoadingDisplay();//------end-----------------return application.init(engine);}).then(function () {return application.start();})["catch"](function (err) {console.error(err);});}};
});以上就是全部修改内容，但由于每次发布都得修改，所以我将以上内容放入到引擎默认模板中，splash.png放在了项目模板下，就可以勾选md5 也不会更新不到了
5、修改引擎模板
路劲：F:\cocos-dashboard-editors\3.6.3\resources\resources\3d\engine\templates\web-mobile
index.html-》index.ejs
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title><%= projectName %></title><!--http://www.html5rocks.com/en/mobile/mobifying/--><meta name="viewport"content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,minimal-ui=true"/><!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html--><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="format-detection" content="telephone=no"><!-- force webkit on 360 --><meta name="renderer" content="webkit"/><meta name="force-rendering" content="webkit"/><!-- force edge on IE --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="msapplication-tap-highlight" content="no"><!-- force full screen on some browser --><meta name="full-screen" content="yes"/><meta name="x5-fullscreen" content="true"/><meta name="360-fullscreen" content="true"/><!--fix fireball/issues/3568 --><!--<meta name="browsermode" content="application">--><meta name="x5-page-mode" content="app"><!--<link rel="apple-touch-icon" href=".png" />--><!--<link rel="apple-touch-icon-precomposed" href=".png" />--><link rel="stylesheet" type="text/css" href="<%= cssUrl %>"/></head>
<body><div id="GameDiv" cc_exact_fit_screen="true"><div id="Cocos3dGameContainer"><canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="99"></canvas></div></div><div id="splash"><div class="progress-bar stripes"><span style="width: 0%"></span></div></div><%- include(cocosTemplate, {}) %><script type="text/javascript">(function () {var splash = document.getElementById('splash');splash.style.display = 'block';})();</script>
</body>
</html>
index.js-》index.js.ejs
import { Application } from '<%= applicationJS %>';const canvas = document.getElementById('GameCanvas');
const $p = canvas.parentElement;
const bcr = $p.getBoundingClientRect();
canvas.width = bcr.width;
canvas.height = bcr.height;// 是否加载执行完成
function setLoadingDisplay () {console.log('Engine is initialized');cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function () {console.log('game run over' ); splash.style.display = 'none';if (application.timer) {clearInterval(application.timer);}});
}function topLevelImport (url) {return System.import(url);
}const application = new Application();topLevelImport('cc')
.then((engine) => {//监听setLoadingDisplay();return application.init(engine);
}).then(() => {return application.start();
}).catch((err) => {console.error(err);
});
style.css
html {-ms-touch-action: none;
}body, canvas, div {display: block;outline: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-khtml-user-select: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}/* Remove spin of input type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {/* display: none; <- Crashes Chrome on hover */-webkit-appearance: none;margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}body {position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 0;border: 0;margin: 0;cursor: default;color: #888;background-color: #333;text-align: center;font-family: Helvetica, Verdana, Arial, sans-serif;display: flex;flex-direction: column;
}canvas {background-color: rgba(0, 0, 0, 0);
}#GameDiv, #Cocos3dGameContainer, #GameCanvas {width: 100%;height: 100%;
}
/********************进度条********************/
.progress-bar {background-color: #1a1a1a;position: absolute;left: 25%;top: 80%;height: 14px;padding: 5px;width: 50%;/*margin: 0 -175px; */border-radius: 5px;box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}.progress-bar span {display: block;height: 100%;border-radius: 3px;box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;transition: width .4s ease-in-out; background-color: #34c2e3;
}.stripes span {background-size: 30px 30px;background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent); animation: animate-stripes 1s linear infinite;
}#splash {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #171717 url(./splash.png) no-repeat center;background-size: 45%;
}
application.js-》application.ejs
F:\cocos-dashboard-editors\3.6.3\resources\resources\3d\engine\templates\launcher
<%- include(versionCheckTemplate, { version: '1.0.0'}) %>
let cc;//---------------自动 updata Progress--------------
var percentJd=0;
var timer =setInterval(() => {const now = new Date();//console.log(now.toString());if (percentJd<90) {percentJd=percentJd+1;onProgress(percentJd);} else{clearInterval(timer);}
}, 1000);function onProgress(percent){if (percent>percentJd) {percentJd=percent;}var progressBar = splash.querySelector('.progress-bar span');// var percent = 100 * finish / total;if (progressBar) {progressBar.style.width = percent + '%';}
}
//------------end-----------------export class Application {constructor () {this.settingsPath = '<%= settingsJsonPath %>';this.showFPS = <%= showFPS %>;}init (engine) {cc = engine;cc.game.onPostBaseInitDelegate.add(this.onPostInitBase.bind(this));cc.game.onPostSubsystemInitDelegate.add(this.onPostSystemInit.bind(this));}onPostInitBase () {// cc.settings.overrideSettings('assets', 'server', '');// do custom logic}onPostSystemInit () {// do custom logic}start () {// 手动更新onProgress(50);return cc.game.init({debugMode: <%= debugMode %> ? cc.DebugMode.INFO : cc.DebugMode.ERROR,settingsPath: this.settingsPath,overrideSettings: {// assets: {// preloadBundles: [{ bundle: 'main', version: 'xxx' }],// }profiling: {showFPS: this.showFPS,}}}).then(() => cc.game.run());}
}
