CocosCreator | 自定义启动页之H5

欢迎关注公众号：

效果对比

默认启动页：

自定义启动页：

启动页存在的意义

我们在 creator 中的开发的游戏都是基于 cocos engine，所以在展示我们的游戏之前，是必须要先加载 cocos engine，然后才是我们自己的业务代码

流程图如下：

而构建完成后未精简的 cocos engine 代码为 1.9M

如果再加上物理相关代码的话，一共是2M

别忘了，我们自己的首场景也要加载过程哦

所以，从游戏启动，到真正进入游戏场景这段时间内，我们看到的，就是默认的启动页

如果是原生平台的话，连启动页也没有，所以会有3秒左右的黑屏

这时候，增加一个启动页的话，就会在体验上好很多，不过由于是在原生平台上增加启动页，所以需要掌握一点原生平台的知识

实现步骤

了解了流程之后，同学们可以随意定制自己想要的启动页

需要修改的文件的路径如下：

project-folder |--assets |--build      |--web-mobile            |--index.html            |--main.js            |--style-mobile.css

1修改 index.html

注释默认启动页 div：

<canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas><!-- <div id="splash">  <div class="progress-bar stripes">    <span style="width: 0%"></span>  </div></div> -->

其中的 GameCanvas 也就是 cocos 的 GameContainer

增加自定义启动页 div：

<div id="preload" style="background-image: url(images/background.jpg); background-repeat: no-repeat; background-size:100%;">  <div class="circle">    <div id="con"></div>    <div class="pie_left">      <div class="left" id="left"></div>    </div>    <div class="pie_right">      <div class="right" id="right"></div>    </div>    <div class="mask"><img src="data:images/splash.gif"></div>  </div></div>

注释默认启动页相关设置：

var debug = window._CCSettings.debug;// var splash = document.getElementById('splash');// splash.style.display = 'block';

2修改 style-mobile.css

#preload {  position: absolute;  margin: auto;  left: 0;  right: 0;  top: 0;  bottom: 0;  display: flex;  align-items: center;  justify-content: center;  text-align: center;  opacity: 1;  transition: all 0.3s;}.circle {  width: 100px;  height: 100px;  position: absolute;  border-radius: 50%;  background: #00aacc;}.pie_left, .pie_right {  width: 100px;  height: 100px;  position: absolute;  top: 0;  left: 0;}.left, .right {  display: block;  width: 100px;  height: 100px;  background: #bdbdbd;  border-radius: 50%;  position: absolute;  top: 0;  left: 0;  transform: rotate(0deg);}.pie_right, .right {  clip: rect(0, auto, auto, 50px);}.pie_left, .left {  clip: rect(0, 50px, auto, 0);}.mask {  width: 90px;  height: 90px;  border-radius: 50%;  left: 5px;  top: 5px;  background: #FFF;  position: absolute;}img {  width: 64px;  height: 80px;}#con {  position: absolute;  width: 2px;  height: 10px;  bottom: 0px;  left: 48px;  background-color: #bdbdbd;}

3修改 main.js

function setLoadingDisplay () {    // Loading splash scene    // var splash = document.getElementById('splash');    // var progressBar = splash.querySelector('.progress-bar span');    // onProgress = function (finish, total) {    //     var percent = 100 * finish / total;    //     if (progressBar) {    //         progressBar.style.width = percent.toFixed(2) + '%';    //     }    // };    // splash.style.display = 'block';    // progressBar.style.width = '0%';    // 获取相关element    let preload = document.getElementById('preload');    let left = document.getElementById('left');    let right = document.getElementById('right');    // 加载首场景进度回调    onProgress = function (completedCount, totalCount, item) {        if (totalCount == 1) {            return;        }        // 计算百分比，设置进度        let percent = 100 * completedCount / totalCount;        let progress = percent * 3.6;        if (progress <= 180) {            right.style.transform = "rotate(" + progress + "deg)";        } else {            document.getElementById("con").style.display = "none";            right.style.transform = "rotate(180deg)";            left.style.transform = "rotate(" + (progress - 180) + "deg)";        }    };    // 监听一次首场景运行后触发的事件    cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function () {        // splash.style.display = 'none';        // 隐藏启动页div        preload.style.display = 'none';    });}

4build-templates

因为上述文件在 build 目录中，每次构建，都会被删除重新创建，所以，我们需要把文件放到 build-templates 目录中

关于 build-templates 目录：

官方文档：

https://docs.cocos.com/creator/manual/zh/publish/custom-project-build-template.html

Creator 支持对每个项目分别定制发布模板，用户如果需要新增或者替换文件只需要在项目路径下添加一个 build-templates 目录，里面按照平台路径划分子目录

在构建结束的时候，build-templates 目录下所有的文件都会自动按照对应的目录结构复制到构建生成的工程里

结构类似：

project-folder |--assets |--build |--build-templates      |--web-mobile            // 用户需要添加的文件，如 index.html            |--index.html      |--jsb-link            // 用户需要添加的文件，如 main.js            |--main.js      |--jsb-default            // 用户需要添加的文件，如 main.js            |--main.js

这样如果当前构建的平台是 web-mobile 的话，那么 build-templates/web-mobile/index.html 就会在构建后被拷贝到 build/web-mobile/index.html
如果当前构建的是 Android 平台 jsb-link 模版的话，那么 build-templates/jsb-link/main.js 就会在构建后被拷贝到 build/jsb-link/main.js

· preview-templates

额外介绍下 preview-templates

官方文档：

https://docs.cocos.com/creator/manual/zh/advanced-topics/custom-preview-template.html

和 build-templates 类似，这里可以自定义网页预览

结构类似：

project-folder  |--assets  |--build  |--preview-templates    // 必须的入口文件    |--index.html    // 其他文件可根据想要实现的预览效果进行添加

自定义网页预览，可以参考编辑器内置的 preview-templates 文件

自定义完成后需要 重启编辑器，然后在编辑器上方选择 浏览器，点击预览按钮即可查看效果

编辑器内置 preview-templates 存放位置如下：

Mac：CocosCreator.app/Contents/Resources/static/preview-templates

Windows：CocosCreator/resources/static/preview-templates

获取源码请在公众号回复：

H5自定义启动页

CocosCreator | 自定义启动页之H5相关推荐

vue-cli启动项目运行_SpringBoot2.0 基础案例(17)：自定义启动页,项目打包和指定运行环境...
一.打包简介 springboot的打包方式有很多种.可以打war包,可以打jar包,可以使用jekins进行打包部署的.不推荐用war包,SpringBoot适合前后端分离,打成jar进行部署更加方 ...
Qt for Android 自定义启动页(解决启动页拉伸的问题)
前言在之前的文章中(Qt for Android Splash启动页最简单延时关闭)介绍了如何在 Qt 开发的 android 应用中添加启动页,那里介绍的方法是直接给启动页设置一张图片来显示,但是 ...
SpringBoot2.0 基础案例(17)：自定义启动页,项目打包和指定运行环境
本文源码 GitHub地址:知了一笑 https://github.com/cicadasmile/spring-boot-base 一.打包简介 springboot的打包方式有很多种.可以打war ...
uniapp 引导页启动页闪屏页功能介绍及部分功能实现
启动页设置 uniapp自带的启动页是一个白底的页面,上面有个uni的logo,然后周围有个圆圈的进度条,这个是启动页. uniapp中可以自定义启动页,注意两点: 不要勾选"启动界面显示等 ...
android启动页使用gif,android中使用react-native设置应用启动页过程详解
一.背景在我们使用react-native进行编写代码的时候,当启动应用的时候,我们会看到如下界面然而,这样的启动界面是非常的不又好,那么我们该怎么进行处理启动界面呢?有如下两种方案二.方案 1 ...
心愿浏览器修改代理服务器,星愿浏览器修改启动页“星愿快讯”的方法
想必大家都知道星愿浏览器这款浏览器吧?在使用这款浏览器的时候当我们双击图标进入网站的时候就会自动打开"星愿快讯"页面,这个页面中会出现很多的新闻热点以及一些快捷搜索方式.但是也有用 ...
uniapp ios启动页自定义
拿到设计稿之后在xcode里面创建项目 New Image Set 把启动页需要的图片拉入,可以多创建几个然后拉入text Filed 创建文本,拉入Image View创建图片或者背景,编辑位置 ...
Unity 和 Jar，自定义Unity安卓启动页
打Jar包流程 1,新建一个AS的Java空项目 2,修改plugins为com.android.library,删掉多余的配置,再点击Sync Now,把这个工程变成类库 3,在java目录下新建所 ...
app vue 真机运行_uni-app黑魔法：小程序自定义组件运行到H5平台
引言移动互联网的初期,囿于设备硬件性能限制,流量以原生App为主,iOS.Android是当时两大平台. 随着硬件及OS的更新换代,H5可承载的体验逐步完善,为提高开发效率.节约资源(复用代码)以及 ...

CocosCreator | 自定义启动页之H5

CocosCreator | 自定义启动页之H5相关推荐

最新文章

热门文章