正常的CC工程目录如下
Web构建完成后,默认名称为“web-mobile”,位于项目目录的“build”文件夹中。
打开后,下图中的红框就是我们要更改的文件。
1:index.html
的更改<!DOCTYPE html>
<html>
<head><元字符集="utf-8"><!-- 标题标签可以更改为您想要的想要名字--><标题>以晨</标题>...... 。 .....<链接关系="样式表"类型="文本/css" href=“style-mobile.css”/>
</头><body><画布 ID=“游戏画布” oncontextmenu= “event.preventDefault()” tabindex= "0"></canvas><!-- ↓为启动时默认显示部分页面,如果你不这样做想要显示默认启动页,直接消除这个代码可以↓ --><div id="splash"> < !-- 'div splash 使用 div 的背景属性来显示图像' --><div 类=“进度条条纹” > <!-- '这部分是进度条显示' --><跨度样式="宽度:0%"></跨度></ div> <!-- '这部分是进度条显示' --> </div> <!-- 'divsplash使用div的背景属性来显示图片'-- ><!-- ↑ 启动页为默认显示部分。如果不想显示默认启动页,去掉这段代码即可 ↑ --><script src="src/settings.js"字符集="utf-8"></脚本><脚本 src="main.js"字符集= "utf-8"></脚本><脚本输入="text/javascript">(功能 () {// 打开 Web 调试器控制台if (typeof VConsole !== '未定义') { 窗口.v控制台 = 新VConsole();}<! -- ↓ 默认图片显示风格,若启动页标签为一起删除这段代码↓ -->var =文档 。 getElementById('飞溅');飞溅.风格.显示 = '块';//如果保留的话,显示需要设置为“屏蔽”<!-- ↑ 默认图片显示风格,如果去掉启动页标签,也要去掉这段代码 ↑ -- >var cocos2d =文档. createElement('脚本'); cocos2d .异步 = true;cocos2d .src =窗口 ._CCSettings.调试?'cocos2d-js.js' : 'cocos2d-js-min .js';varengineLoaded= 功能 () { 文档。正文。删除子项(cocos2d);cocos2d.removeEventListener( '负载',发动机负载,假);窗口.启动();};cocos2d。 addEventListener('加载',engineLoaded, 假);文档.body.appendChild(cocos2d); })();
</脚本>
</身体>
</html>
2:main.js的更改
*main.js*文件中中找到setloadingDisplay方法
注意:main.js 是被索引.html 文件所引用,涉及到基础Web开发。如果要删除索引.html 中的标签,那必须删除 main.js 中相关代码。如果自己有能力,也可以自行更改默认启动页的标签与代码还有css样式。功能 设置加载显示 () {//加载启动画面/* ↓ 默认启动图像显示,如果删除了index.html文件中对应的默认启动也应该删除这部分代码↓ */varsplash=文档.getElementBy ID( 'splash');//默认图片部分,splash.款式.显示= 'block';//设置显示 = 'block'/* ↑ 默认开机画面显示。如果去掉index.html文件中对应的默认启动,这部分代码也必须去掉↑ *//* ↓ 默认进度条,如果去掉index.html文件中对应的默认进度条,还必须删除这部分代码 ↓ */varprogressBar=splash.querySelector ('.进度条跨度');...splash ...//进度条多余部分不会显示...... // 如果你想改变样式,只需在style-mobile.css中找到对应的样式并修改即可 /* ↑ 默认进度条,如果去掉index.html文件中对应的默认进度条,您还应该删除这部分代码 ↑ */cc.director.once( cc.导演.EVENT_AFTER_SCENE_LAUNCH,功能() ) {/* ↓ 默认启用图像显示。如果删除index.html 文件中相应的默认值要确认启动,还要删除这部分代码 ↓ */splash.style.display = '无'; ? );}
3:splash.png
搭建完成后,此图默认为CC的LOGO。您可以自定义图片来替换它。
如果自定义图片的边缘包含纯色,则在style-mobile.css中更改背景样式。
4:更改为 style-mobile.css
开放式-移动.css 查找以下款式
如果你不了解CSS样式表,可以了解以下显示属性的含义,然后进行更改。 //代表默认启动图片的样式#splash {位置:绝对;//位置 顶部:0; // 距顶部的距离 左: 0; // 距左的距离 宽度: 100% ; //宽度百分比(相对于父级) 高度: 100%; // 身高百分比(相对于parent) //背景颜色或背景图像。如果不想改名字,直接将url索引到自定义文件中(如果要发布到服务器,必须在build目录下)//或者直接添加url( . /splash.png)替换为你从网上找到的图片,并将图片的URL('')填入背景:#171717URL() ./飞溅.png)无- 重复中心;背景-size: 100%;//背景图片百分比
}
//以下样式属性可以通过baidu或google自定义
//代表默认启动进度框的样式------静止的盒子! ! .进度-栏{背景- 颜色: #1a1a1a;位置:绝对;左:25%;顶部: 80%;高度: 15px;填充: 5px ;宽度:50%; /*边距:0 -175px; */边框-半径: 5px;盒子-阴影: 0 1px 5px #000插图, 0 1px 0 #444;
}
//代表默认启动细节条的样式-----会动的条!!.进度-栏跨度{显示:块;高度:100%;边界-半径: 3px; 盒子-阴影:0 1px 0 rgba(255,255, , .5)插图;过渡:宽度。4秒轻松-in-出;背景 -颜色:#34c2e3;
}
保存所更改的这四个文件
更改完毕后,记得复制一份一下保存下来,因为每次CC进行构建后都会将这些文件重写。你总不想构建一次更改是吧。
最后构建完毕,将保存的文件复制替换掉就ok啦。