Cocos Creator 去除或更改默认启动页(Web端)

Cocos Creator 专栏收录该内容
4 篇文章 0 订阅

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

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

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

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

正常CC工程目录如下

CC工程目录图

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

web-mobile

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

要更改的文件

  1. index.html 工程入口文件
  2. main.js 入口文件引用脚本
  3. splash.png 默认启动展示图
  4. 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的时候,系统都会讲这四个文件复制到你构建好的工程中。
这种方式就很舒服了。
  • 4
    点赞
  • 11
    评论
  • 24
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值