• cocos creator 3.6 发布web手机端 加载进度条添加

    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的布局
    1. html {
    2.   -ms-touch-action: none;
    3. }
    4.  
    5. body, canvas, div {
    6.   display: block;
    7.   outline: none;
    8.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    9.  
    10.   user-select: none;
    11.   -moz-user-select: none;
    12.   -webkit-user-select: none;
    13.   -ms-user-select: none;
    14.   -khtml-user-select: none;
    15.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    16. }
    17.  
    18. /* Remove spin of input type number */
    19. input::-webkit-outer-spin-button,
    20. input::-webkit-inner-spin-button {
    21.     /* display: none; <- Crashes Chrome on hover */
    22.     -webkit-appearance: none;
    23.     margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
    24. }
    25.  
    26. body {
    27.   position: absolute;
    28.   top: 0;
    29.   left: 0;
    30.   width: 100%;
    31.   height: 100%;
    32.   padding: 0;
    33.   border: 0;
    34.   margin: 0;
    35.  
    36.   cursor: default;
    37.   color: #888;
    38.   background-color: #333;
    39.  
    40.   text-align: center;
    41.   font-family: Helvetica, Verdana, Arial, sans-serif;
    42.  
    43.   display: flex;
    44.   flex-direction: column;
    45. }
    46.  
    47. canvas {
    48.   background-color: rgba(0, 0, 0, 0);
    49. }
    50.  
    51. #GameDiv, #Cocos3dGameContainer, #GameCanvas {
    52.   width: 100%;
    53.   height: 100%;
    54. }
    55. /******************以下 进度条和logo **********/
    56. .progress-bar {
    57.   background-color: #1a1a1a;
    58.   position: absolute;
    59.   left: 25%;
    60.   top: 80%;
    61.   height: 14px;
    62.   padding: 5px;
    63.   width: 50%;
    64.   /*margin: 0 -175px;         */
    65.   border-radius: 5px;
    66.   box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;           
    67. }
    68.  
    69. .progress-bar span {
    70.   display: block;
    71.   height: 100%;
    72.   border-radius: 3px;
    73.   box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    74.   transition: width .4s ease-in-out; 
    75.   background-color: #34c2e3;    
    76. }
    77.  
    78. .stripes span {
    79.   background-size: 30px 30px;
    80.   background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
    81.                       transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
    82.                       transparent 75%, transparent);            
    83.   
    84.   animation: animate-stripes 1s linear infinite;             
    85. }
    86.  
    87. #splash {
    88.   position: absolute;
    89.   top: 0;
    90.   left: 0;
    91.   width: 100%;
    92.   height: 100%;
    93.   background: #171717 url(./splash.png) no-repeat center;
    94.   background-size: 45%;
    95. }
    96. /******************end**********/
    2、 index.html中添加节点，并且启动显示
    1. html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.  
    6.   <title>Cocos Creator | spidertitle>
    7.  
    8.   
    9.   <meta name="viewport"
    10.         content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,minimal-ui=true"/>
    11.  
    12.   
    13.   <meta name="apple-mobile-web-app-capable" content="yes">
    14.   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    15.   <meta name="format-detection" content="telephone=no">
    16.  
    17.   
    18.   <meta name="renderer" content="webkit"/>
    19.   <meta name="force-rendering" content="webkit"/>
    20.   
    21.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    22.   <meta name="msapplication-tap-highlight" content="no">
    23.  
    24.   
    25.   <meta name="full-screen" content="yes"/>
    26.   <meta name="x5-fullscreen" content="true"/>
    27.   <meta name="360-fullscreen" content="true"/>
    28.  
    29.   
    30.   
    31.   <meta name="x5-page-mode" content="app">
    32.  
    33.   
    34.   
    35.  
    36.   <link rel="stylesheet" type="text/css" href="style.css"/>
    37.  
    38. head>
    39. <body>
    40.   <div id="GameDiv" cc_exact_fit_screen="true">
    41.       <div id="Cocos3dGameContainer">
    42.         <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="99">canvas>
    43.       div>
    44.     div>
    45.     
    46.     <div id="splash">
    47.       <div class="progress-bar stripes">
    48.         <span style="width: 0%">span>
    49.       div>
    50.     div>
    51.     
    52.   
    54. <script src="src/polyfills.bundle.js" charset="utf-8"> script>
    55.  
    57. <script src="src/system.bundle.js" charset="utf-8"> script>
    58.  
    60. <script src="src/import-map.json" type="systemjs-importmap" charset="utf-8"> script>
    61.  
    62. <script>
    63.     System.import('./index.js').catch(function(err) { console.error(err); })
    64. script>
    66. <script type="text/javascript">
    67.   (function () { 
    68.       var splash = document.getElementById('splash');
    69.       splash.style.display = 'block';
    70.   })();
    71. script>
    73. body>
    74. html>
    3、 添加进度条更新onProgress，和自动一个计时更新函数，onProgress手动调用分的越细节，进度曲线越平滑
    1. System.register([], function (_export, _context) {
    2.   "use strict";
    3.  
    4.   var cc, Application;
    5.   //---------------计时函数 和更新进度函数--------------
    6.   var percentJd=0;
    7.     //每秒更新进度条
    8.   var timer =setInterval(() => {
    9.     const now = new Date();
    10.     //console.log(now.toString());
    11.     if (percentJd<90) {
    12.       percentJd=percentJd+1;
    13.       onProgress(percentJd);
    14.     } else{
    15.       clearInterval(timer);
    16.     }
    17.   }, 1000);
    18.  
    19.     //刷新ui 及进度
    20.   function onProgress(percent){
    21.     //用于手动跟新，比每秒进度大就更新
    22.     if (percent>percentJd) {
    23.       percentJd=percent;
    24.     }
    25.     var progressBar = splash.querySelector('.progress-bar span');
    26.     // var percent = 100 * finish / total;
    27.     if (progressBar) {
    28.       progressBar.style.width = percent + '%';
    29.     }
    30.   }
    31.   //---------------------------end-----------------
    32.  
    33.   function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
    34.  
    35.   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); } }
    36.  
    37.   function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
    38.  
    39.   return {
    40.     setters: [],
    41.     execute: function () {
    42.       _export("Application", Application = /*#__PURE__*/function () {
    43.         function Application() {
    44.           _classCallCheck(this, Application);
    45.  
    46.           this.settingsPath = 'src/settings.json';
    47.           this.showFPS = false;
    48.         }
    49.  
    50.         _createClass(Application, [{
    51.           key: "init",
    52.           value: function init(engine) {
    53.             cc = engine;
    54.             cc.game.onPostBaseInitDelegate.add(this.onPostInitBase.bind(this));
    55.             cc.game.onPostSubsystemInitDelegate.add(this.onPostSystemInit.bind(this));
    56.           }
    57.         }, {
    58.           key: "onPostInitBase",
    59.           value: function onPostInitBase() {// cc.settings.overrideSettings('assets', 'server', '');
    60.             // do custom logic
    61.           }
    62.         }, {
    63.           key: "onPostSystemInit",
    64.           value: function onPostSystemInit() {// do custom logic
    65.           }
    66.         }, {
    67.           key: "start",
    68.           value: function start() {、
    69.             //---------------手动更新进度条--------------
    70.             //上面的其他函数中可以拆分更细致
    71.             onProgress(50);，
    72.             //game.init，初始化第一个场景，第一个场景比较大的话也会比较耗时，所以定在50%
    73.             //----------------------------------------
    74.             return cc.game.init({
    75.               debugMode: false ? cc.DebugMode.INFO : cc.DebugMode.ERROR,
    76.               settingsPath: this.settingsPath,
    77.               overrideSettings: {
    78.                 // assets: {
    79.                 //      preloadBundles: [{ bundle: 'main', version: 'xxx' }],
    80.                 // }
    81.                 profiling: {
    82.                   showFPS: this.showFPS
    83.                 }
    84.               }
    85.             }).then(function () {
    86.               return cc.game.run();
    87.             });
    88.           }
    89.         }]);
    90.  
    91.         return Application;
    92.       }());
    93.     }
    94.   };
    95. });
    4、关闭进度条和logo的显示的监听
    1. System.register(["./application.js"], function (_export, _context) {
    2.   "use strict";
    3.  
    4.   var Application, canvas, $p, bcr, application;
    5.  
    6.   //------注册第一个场景 是否加载完成监听-----------------
    7.   function setLoadingDisplay () {
    8.     console.log('Engine is initialized');
    9.     cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function () {
    10.       console.log('game run over' );  
    11.         //关闭进度条显示
    12.       splash.style.display = 'none';
    13.         //关闭计时，但有时无效，未找到原因，有好的修改方案告知下
    14.         if (application.timer) {
    15.           clearInterval(application.timer);
    16.         }
    17.     });
    18.   }
    19.     //------ end-----------------
    20.  
    21.   function topLevelImport(url) {
    22.     return System["import"](url);
    23.   }
    24.  
    25.   return {
    26.     setters: [function (_applicationJs) {
    27.       Application = _applicationJs.Application;
    28.     }],
    29.     execute: function () {
    30.       canvas = document.getElementById('GameCanvas');
    31.       $p = canvas.parentElement;
    32.       bcr = $p.getBoundingClientRect();
    33.       canvas.width = bcr.width;
    34.       canvas.height = bcr.height;
    35.       application = new Application();
    36.       topLevelImport('cc').then(function (engine) {
    37.         //------cc 文件加载完后，添加监听-----------------
    38.         setLoadingDisplay();
    39.         //------end-----------------
    40.         return application.init(engine);
    41.       }).then(function () {
    42.         return application.start();
    43.       })["catch"](function (err) {
    44.         console.error(err);
    45.       });
    46.     }
    47.   };
    48. });
    以上就是全部修改内容，但由于每次发布都得修改，所以我将以上内容放入到引擎默认模板中，splash.png放在了项目模板下，就可以勾选md5 也不会更新不到了
    5、修改引擎模板

    路劲：F:\cocos-dashboard-editors\3.6.3\resources\resources\3d\engine\templates\web-mobile

    index.html-》index.ejs 

    1. html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.  
    6.   <title><%= projectName %>title>
    7.  
    8.   
    9.   <meta name="viewport"
    10.         content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,minimal-ui=true"/>
    11.  
    12.   
    13.   <meta name="apple-mobile-web-app-capable" content="yes">
    14.   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    15.   <meta name="format-detection" content="telephone=no">
    16.  
    17.   
    18.   <meta name="renderer" content="webkit"/>
    19.   <meta name="force-rendering" content="webkit"/>
    20.   
    21.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    22.   <meta name="msapplication-tap-highlight" content="no">
    23.  
    24.   
    25.   <meta name="full-screen" content="yes"/>
    26.   <meta name="x5-fullscreen" content="true"/>
    27.   <meta name="360-fullscreen" content="true"/>
    28.  
    29.   
    30.   
    31.   <meta name="x5-page-mode" content="app">
    32.  
    33.   
    34.   
    35.  
    36.   <link rel="stylesheet" type="text/css" href="<%= cssUrl %>"/>
    37.  
    38. head>
    39. <body>
    40.   <div id="GameDiv" cc_exact_fit_screen="true">
    41.       <div id="Cocos3dGameContainer">
    42.         <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="99">canvas>
    43.       div>
    44.     div>
    45.     <div id="splash">
    46.       <div class="progress-bar stripes">
    47.         <span style="width: 0%">span>
    48.       div>
    49.     div>
    50.   <%- include(cocosTemplate, {}) %>
    51.  
    52.   <script type="text/javascript">
    53.     (function () {
    54.    
    55.         var splash = document.getElementById('splash');
    56.         splash.style.display = 'block';
    57.     })();
    58.   script>
    59. body>
    60. html>

     index.js-》index.js.ejs

    1. import { Application } from '<%= applicationJS %>';
    2.  
    3. const canvas = document.getElementById('GameCanvas');
    4. const $p = canvas.parentElement;
    5. const bcr = $p.getBoundingClientRect();
    6. canvas.width = bcr.width;
    7. canvas.height = bcr.height;
    8.  
    9. // 是否加载执行完成
    10. function setLoadingDisplay () {
    11.   console.log('Engine is initialized');
    12.   cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function () {
    13.     console.log('game run over' );  
    14.     splash.style.display = 'none';
    15.       if (application.timer) {
    16.         clearInterval(application.timer);
    17.       }
    18.   });
    19. }
    20.  
    21. function topLevelImport (url) {
    22.     return System.import(url);
    23. }
    24.  
    25. const application = new Application();
    26.  
    27. topLevelImport('cc')
    28. .then((engine) => {
    29.      //监听
    30.     setLoadingDisplay();
    31.     return application.init(engine);
    32. }).then(() => {
    33.     return application.start();
    34. }).catch((err) => {
    35.     console.error(err);
    36. });

    style.css

    1. html {
    2.   -ms-touch-action: none;
    3. }
    4.  
    5. body, canvas, div {
    6.   display: block;
    7.   outline: none;
    8.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    9.  
    10.   user-select: none;
    11.   -moz-user-select: none;
    12.   -webkit-user-select: none;
    13.   -ms-user-select: none;
    14.   -khtml-user-select: none;
    15.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    16. }
    17.  
    18. /* Remove spin of input type number */
    19. input::-webkit-outer-spin-button,
    20. input::-webkit-inner-spin-button {
    21.     /* display: none; <- Crashes Chrome on hover */
    22.     -webkit-appearance: none;
    23.     margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
    24. }
    25.  
    26. body {
    27.   position: absolute;
    28.   top: 0;
    29.   left: 0;
    30.   width: 100%;
    31.   height: 100%;
    32.   padding: 0;
    33.   border: 0;
    34.   margin: 0;
    35.  
    36.   cursor: default;
    37.   color: #888;
    38.   background-color: #333;
    39.  
    40.   text-align: center;
    41.   font-family: Helvetica, Verdana, Arial, sans-serif;
    42.  
    43.   display: flex;
    44.   flex-direction: column;
    45. }
    46.  
    47. canvas {
    48.   background-color: rgba(0, 0, 0, 0);
    49. }
    50.  
    51. #GameDiv, #Cocos3dGameContainer, #GameCanvas {
    52.   width: 100%;
    53.   height: 100%;
    54. }
    55. /********************进度条********************/
    56. .progress-bar {
    57.   background-color: #1a1a1a;
    58.   position: absolute;
    59.   left: 25%;
    60.   top: 80%;
    61.   height: 14px;
    62.   padding: 5px;
    63.   width: 50%;
    64.   /*margin: 0 -175px;         */
    65.   border-radius: 5px;
    66.   box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;           
    67. }
    68.  
    69. .progress-bar span {
    70.   display: block;
    71.   height: 100%;
    72.   border-radius: 3px;
    73.   box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    74.   transition: width .4s ease-in-out; 
    75.   background-color: #34c2e3;    
    76. }
    77.  
    78. .stripes span {
    79.   background-size: 30px 30px;
    80.   background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
    81.                       transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
    82.                       transparent 75%, transparent);            
    83.   
    84.   animation: animate-stripes 1s linear infinite;             
    85. }
    86.  
    87. #splash {
    88.   position: absolute;
    89.   top: 0;
    90.   left: 0;
    91.   width: 100%;
    92.   height: 100%;
    93.   background: #171717 url(./splash.png) no-repeat center;
    94.   background-size: 45%;
    95. }

     application.js-》application.ejs

    F:\cocos-dashboard-editors\3.6.3\resources\resources\3d\engine\templates\launcher

    1. <%- include(versionCheckTemplate, { version: '1.0.0'}) %>
    2. let cc;
    3.  
    4. //---------------自动 updata Progress--------------
    5. var percentJd=0;
    6. var timer =setInterval(() => {
    7.   const now = new Date();
    8.   //console.log(now.toString());
    9.   if (percentJd<90) {
    10.     percentJd=percentJd+1;
    11.     onProgress(percentJd);
    12.   } else{
    13.     clearInterval(timer);
    14.   }
    15. }, 1000);
    16.  
    17. function onProgress(percent){
    18.   if (percent>percentJd) {
    19.     percentJd=percent;
    20.   }
    21.   var progressBar = splash.querySelector('.progress-bar span');
    22.   // var percent = 100 * finish / total;
    23.   if (progressBar) {
    24.     progressBar.style.width = percent + '%';
    25.   }
    26. }
    27. //------------end-----------------
    28.  
    29. export class Application {
    30.     constructor () {
    31.         this.settingsPath = '<%= settingsJsonPath %>';
    32.         this.showFPS = <%= showFPS %>;
    33.     }
    34.     
    35.  
    36.  
    37.     init (engine) {
    38.         cc = engine;
    39.         cc.game.onPostBaseInitDelegate.add(this.onPostInitBase.bind(this));
    40.         cc.game.onPostSubsystemInitDelegate.add(this.onPostSystemInit.bind(this));
    41.     }
    42.  
    43.     onPostInitBase () {
    44.         // cc.settings.overrideSettings('assets', 'server', '');
    45.         // do custom logic
    46.     }
    47.  
    48.     onPostSystemInit () {
    49.         // do custom logic
    50.     }
    51.  
    52.     start () {
    53.         // 手动更新
    54.         onProgress(50);
    55.         return cc.game.init({
    56.             debugMode: <%= debugMode %> ? cc.DebugMode.INFO : cc.DebugMode.ERROR,
    57.             settingsPath: this.settingsPath,
    58.             overrideSettings: {
    59.                 // assets: {
    60.                 //      preloadBundles: [{ bundle: 'main', version: 'xxx' }],
    61.                 // }
    62.                 profiling: {
    63.                     showFPS: this.showFPS,
    64.                 }
    65.             }
    66.         }).then(() => cc.game.run());
    67.     }
    68. }

  • 相关阅读:
    外卖好评回复模板
    CST仿真软件数据后处理--S参数
    Java面试题-Java核心基础-第八天（异常)
    【Git总结大全】git操作从入门到实战（总结篇）
    应对气候、经济双重影响，此‘链路’非彼链路
    文件上传绕过复现
    # NUSTCTF(校外赛道)2022-wp
    echarts封装 - 1
    Visual Studio 调试 F5断点执行
    RPC - gRPC简单的demo - 学习/实践
  • 原文地址：https://blog.csdn.net/weixin_41843959/article/details/138012457