Cocos Creator Web打包去除默认加载
12月份初就刚写个开头,结果忘了 -=-,拖到了现在。也相当于自己记录一下。
Cocos Creator(后续简称 CC)在打包构建后,都会展示默认显示CC的LOGO。
(之前一直用Unity进行开发,Unity一样,但是Unity可以购买去除或者使用破解哈。)
CC 的默认启动页可以 直接去除,也可以 更改图标, 删除进度条,或者添加一些 加载动效。
本篇文章介绍的是打包为 Web 形式,构建Android或者iOS不在此介绍。
正常CC工程目录如下
Web构建后默认名字为 ‘web-mobile’,在工程目录’build’文件夹内。
打开后如下图红框内就是我们要更改的文件。
- index.html 工程入口文件
- main.js 入口文件引用脚本
- splash.png 默认启动展示图
- style-mobile.css 移动样式表
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啦。
补充
更改完毕后,可以在工程根目录下创建一个文件夹 文件夹命名为 build-templates ,与 build 同级
这个文件夹的意义在于,当工程构建时,会找到这个文件夹,然后判断文件夹内的保留项是否和现在正在构建的版本相同,如果相同那么就会替换相同资源。
比如说 我要构建一个web版本, 那么我在 build-templates 中 新建一个文件夹命名为 web-mobile 将四个文件放入文件夹内。
那么每次构建web的时候,系统都会讲这四个文件复制到你构建好的工程中。
这种方式就很舒服了。