Cocos Creator 去除或更改默认启动页（Web端）_cocos去掉启动页

作者：小小林熬夜学编程 | 2024-02-26 06:44:44

踩

cocos去掉启动页

Cocos Creator Web打包去除默认加载

12月份初就刚写个开头，结果忘了 -=-，拖到了现在。也相当于自己记录一下。

Cocos Creator（后续简称 CC）在打包构建后，都会展示默认显示CC的LOGO。
（之前一直用Unity进行开发，Unity一样，但是Unity可以购买去除或者使用破解哈。）

CC 的默认启动页可以 直接去除，也可以 更改图标， 删除进度条，或者添加一些 加载动效。

本篇文章介绍的是打包为 Web 形式，构建Android或者iOS不在此介绍。

正常CC工程目录如下

CC工程目录图

Web构建后默认名字为 ‘web-mobile’，在工程目录’build’文件夹内。

web-mobile

打开后如下图红框内就是我们要更改的文件。

要更改的文件

index.html 工程入口文件
main.js 入口文件引用脚本
splash.png 默认启动展示图
style-mobile.css 移动样式表

1-index.html 的更改

参照自己原工程进行更改
1


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
	<!-- title 标签可更改为自己想要的名字 -->
  <title> YiChen </title>
  ......
  ......
  <link rel="stylesheet" type="text/css" href="style-mobile.css"/>
</head>
<body>
  <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
  
  <!-- ↓ 为启动页默认显示部分，如果不想展示默认启动页，直接剔除此段代码即可 ↓ -->
  
  <div id="splash"> <!-- 'div splash 利用 div 的 background 属性来展示图片' -->
	<div class="progress-bar stripes">	<!-- '此部分为进度条展示' -->
	  <span style="width: 0%"></span>
	</div>								<!-- '此部分为进度条展示' -->
  </div>			<!-- 'div splash 利用 div 的 background 属性来展示图片' -->
  
  <!-- ↑ 启动页为默认显示部分，如果不想展示默认启动页，直接剔除此段代码即可 ↑ -->
  
<script src="src/settings.js" charset="utf-8"></script>

<script src="main.js" charset="utf-8"></script>

<script type="text/javascript">
(function () {
    // open web debugger console
    if (typeof VConsole !== 'undefined') {
        window.vConsole = new VConsole();
    }
    
	<!-- ↓ 默认图片展示样式，如果剔除启动页标签要一并剔除此段代码 ↓ -->
    var splash = document.getElementById('splash');
    splash.style.display = 'block';	// 如果保留，需将 display 设置为 “block”
    <!-- ↑ 默认图片展示样式，如果剔除启动页标签要一并剔除此段代码 ↑ -->

    var cocos2d = document.createElement('script');
    cocos2d.async = true;
    cocos2d.src = window._CCSettings.debug ? 'cocos2d-js.js' : 'cocos2d-js-min.js';

    var engineLoaded = function () {
        document.body.removeChild(cocos2d);
        cocos2d.removeEventListener('load', engineLoaded, false);
        window.boot();
    };
    cocos2d.addEventListener('load', engineLoaded, false);
    document.body.appendChild(cocos2d);
})();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

2-main.js 的更改

在 *main.js* 文件中找到 setLoadingDisplay 方法

注意： main.js 是被 index.html 文件所引用，涉及到基础Web开发。
	  如果要删除 index.html 中的标签，那就必须要删除 main.js 中相关代码。
	  如果自己有能力，也可自行更改默认启动页的标签与代码还有css样式。
1
2
3
4
5


function setLoadingDisplay () {
        // Loading splash scene
        
        /* ↓ 默认启动图片展示，如果剔除 index.html 文件中对应的默认启动，也要将此部分代码剔除 ↓ */
        var splash = document.getElementById('splash');//默认图片部分，
        splash.style.display = 'block';// 将 display = ‘block’
        /* ↑ 默认启动图片展示，如果剔除 index.html 文件中对应的默认启动，也要将此部分代码剔除 ↑ */

		/* ↓ 默认进度条，如果剔除 index.html 文件中对应的默认进度条，也要将此部分代码剔除 ↓ */
		var progressBar = splash.querySelector('.progress-bar span');
		......// 进度条多余部分不多展示
		......// 如果想要更改样式，直接在style-mobile.css 找到对应样式进行修改即可
		/* ↑ 默认进度条，如果剔除 index.html 文件中对应的默认进度条，也要将此部分代码剔除 ↑ */

        cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function () {
        	/* ↓ 默认启动图片展示，如果剔除 index.html 文件中对应的默认启动，也要将此部分代码剔除 ↓ */
            splash.style.display = 'none';// 将 display = ‘block’
            /* ↑ 默认启动图片展示，如果剔除 index.html 文件中对应的默认启动，也要将此部分代码剔除 ↑ */
        });
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3-splash.png

此张图片在构建完毕后默认为CC的LOGO，你可以自定义图片将之替换。
如果自定义图片边缘含有纯色，那就要更改 style-mobile.css 中的背景样式。
1
2

4-style-mobile.css 的更改

打开 style-mobile.css 找到以下样式
如果不懂css样式表的同学可以去了解一下下列展示属性的含义，再进行更改。
1
2


// 代表默认启动图片的样式
#splash {
  position: absolute;	// 位置
  top: 0;				// 距离顶部
  left: 0;				// 距离左侧
  width: 100%;			// 宽度百分比（相对父级）
  height: 100%;			// 高度百分比（相对父级）
  // 背景颜色或者是背景图片，如果不想改名字，直接将 url 索引到自定义的文件（如果要发布到服务器上，必须在构建目录内）
  // 或者直接将 url(./splash.png) 替换为你从网上找到的图片 将图片的网址填写到 url('') 中去
  background: #171717 url(./splash.png) no-repeat center;	
  background-size: 100%;// 背景图片的百分比
}
// 以下样式属性自行 baidu or google
// 代表默认启动进度框的样式------ 不动的框！！
.progress-bar {
    background-color: #1a1a1a;
    position: absolute;
    left: 25%;
    top: 80%;
    height: 15px;
    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;    
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

保存所更改的这四个文件

更改完毕后，记得拷贝一份保存下来，因为每次CC进行构建后都会将这些文件重写。你总不想构建一次更改一下是吧。
每次构建完毕，将保存的文件复制替换掉就ok啦。
1
2

补充

更改完毕后，可以在工程根目录下创建一个文件夹 文件夹命名为 build-templates ，与 build 同级
这个文件夹的意义在于，当工程构建时，会找到这个文件夹，然后判断文件夹内的保留项是否和现在正在构建的版本相同，如果相同那么就会替换相同资源。
比如说 我要构建一个web版本， 那么我在 build-templates 中 新建一个文件夹命名为 web-mobile 将四个文件放入文件夹内。
那么每次构建web的时候，系统都会讲这四个文件复制到你构建好的工程中。
这种方式就很舒服了。
1
2
3
4
5

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/144742