cocos creator Web端修改启动

关注

转载最新推荐文章于 2026-08-11 16:08:48 发布 2k 阅读 AI 写同款· GEO 优化 ›

CocosCreator | 自定义启动页之H5 01 效果对比默认启动页：自定义启动页： 02 启动页存在的意义我们在 creator 中的开发的游戏都是基于 cocos engine，所以在展示我们的游戏之前，是必须要先加载 cocos engine，然后才是我们自己的业务代码流程图如下：而构建完成后未精简的 cocos engine 代码为 1.9M 如果再加上物理相关代码的话，一共是2M 别忘了，我们自己的首场景也要加载过程哦所以，从游戏启动，到真... 阅读详情

下面以web-mobile为例，在web-mobile下

需求1，修改启动图splash
将splash.xxxxx.png的图片替换成自己的splash图片

需求2，将启动图全屏
在style-mobile.xxxxx.css内找到

#splash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #171717 url(./splash.03ce1.png) no-repeat center;
  background-size: 40%;
}

修改background-size属性为100%

需求3，去掉进度条
在index.html内找到并注释掉

    <div class="progress-bar stripes">
      <span style="width: 0%"></span>
    </div>

在main.xxxxx.js内

    function setLoadingDisplay () {
            // Loading splash scene
            var splash = document.getElementById('splash');
            var progressBar = splash.querySelector('.progress-bar span');
            cc.loader.onProgress = function (completedCount, totalCount, item) {
                var percent = 100 * completedCount / totalCount;
                if (progressBar) {
                    progressBar.style.width = percent.toFixed(2) + '%';
                }
            };
            splash.style.display = 'block';
            progressBar.style.width = '0%';

            cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function () {
                splash.style.display = 'none';
            });
        }

将progressBar相关代码注释掉

ps：以上方法不便之处在于每次构建后都需要修改。