CocosCreator 去除或更改默认启动页（Web端）

㐅过往㐅

已于 2023-06-06 16:38:52 修改

阅读量1.1k

点赞数 1

分类专栏： cocoscreator web包文章标签：前端 cocos2d 游戏引擎 web js

于 2023-06-06 15:55:51 首次发布

本文链接：https://blog.csdn.net/enpeng_guo/article/details/131067811

版权

cocoscreator 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

web包

2 篇文章 0 订阅

订阅专栏

CocosCreator 去除或更改默认启动页（Web端）

正常CC工程目录如下
Web构建后默认名字为 'web-mobile'，在工程目录'build'文件夹内。
打开后如下图红框内就是我们要更改的文件。
1:*index.html* 的更改
2:*main.js* 的更改
3:*splash.png*
4:*style-mobile.css* 的更改
保存所更改的这四个文件

正常CC工程目录如下

在这里插入图片描述

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

在这里插入图片描述

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

1:index.html 的更改

<!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>

2:main.js 的更改

在 *main.js* 文件中找到 setLoadingDisplay 方法
注意： main.js 是被 index.html 文件所引用，涉及到基础Web开发。
	  如果要删除 index.html 中的标签，那就必须要删除 main.js 中相关代码。
	  如果自己有能力，也可自行更改默认启动页的标签与代码还有css样式。  
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 文件中对应的默认启动，也要将此部分代码剔除 ↑ */
        });
    }

3:splash.png

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

4:style-mobile.css 的更改

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

// 代表默认启动图片的样式
#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;    
}

保存所更改的这四个文件

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

㐅过往㐅

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
CocosCreator 去除或更改默认启动页（Web端）

【代码】CocosCreator 去除或更改默认启动页（Web端）
复制链接

扫一扫

专栏目录