Cocos Creator—定制H5游戏首页loading界面
Cocos Creator从1.0版本发布到现在也有一年多了,按理说一些常见的问题网上都有解决方案,例如"如何自定义首页加载进度条界面"这种普遍需求,应该所有人都会遇到的,因此也有完善的解决方案才对。我在网上搜了一些文章,虽然也有讨论的帖子,但是方案都不尽人意。因此只能再次自己动手丰衣足食了,在此我总结一下我的思路和策略,分享给大家,希望后来的人少走弯路,另外这里的方案只针对H5游戏发布,其他平台可以借鉴思路自己实现。
首页加载的loading界面,官网的文档并没有提及,我是通过构建发布后的代码分析的。我的另一篇文章《Cocos Creator—优化首页打开速度》也讲过Cocos Creator加载的策略,有兴趣可以参考。其实Cocos的加载策略很简单,main.js作为加载逻辑和style-mobile.css实现加载ui,但是比较坑的是这两个文件并没有通过工程文件暴露出来,你只能在Cocos Creator的安装目录里面扒出源码,网上有些解决方案是直接修改这两个源文件,是可以达到目的,但有两个弊端:
不利于Cocos Creator的更新,每次升级Cocos Creator到新版本,你都需要从新修改一次
不利于团队协作,团队每个人都需要修改一遍Cocos Creator安装文件
这个方案一看就不靠谱,其实要彻底解决这个问题很简单,让Cocos Creator开发组把这两个文件暴露到工程里面就行了,但不知道为什么这么久还没有实现。
所以我的方案就是做开发组还没有做的事情,自己把这两个文件暴露到工程上,虽然不完美,但能避免上面两个问题。这个方案能实现以下功能:
可以在项目工程下面完美自定义loading界面
能动态把自定义的loading界面代码注入到构建发布后的最终线上代码
能在不修改源码的条件下,通过覆盖代码的方式实现自己的首页加载界面
这个方案好处在于即使Cocos Creator升级,也不影响工程的正常工作和发布。当也不是很完美,例如Cocos Creator开发组把加载逻辑全改了,我们还是需要调整代码,但这个几率比较小,就算出现了,调整起来还是比较快捷的。
方案具体策略如下:
在工程目录还原最终首页加载代码。在工程根目录新建html文件夹,手动把build/web-mobile/源文件里面的style-mobile.css,main.js,splash.png复制到html文件夹,新建loading.html文件,body标签的结构保持跟最终构建生成的index.html结构一致。
定制自己的UI和加载逻辑。新建loading.css,新建loading.js,在loading.css实现新的加载界面UI,在loading.js上实现新增的加载逻辑,如果不需要,loading.js可以忽略不加。
通过gulp等构建工具,动态把loading.css合并到build/web-mobile/style-mobile.css,把loading.js合并到build/web-mobile/main.js。
步骤1是为了方便开发的UI能正常覆盖原有的loading界面。如果Cocos Creator升级对相关的加载逻辑做了大幅度更新,影响最终的覆盖,可以手动同步一下style-mobile.css,main.js的代码到最新。
gulp安装请访问:https://gulpjs.com/
nodejs安装请访问:http://nodejs.org/
另外需要安装gulp相关插件:gulp-concat
gulpfile文件代码:
gulp.task('concat-css', function(cb) {
gulp.src(['./build/web-mobile/style-mobile.css', './html/loading.css'])
.pipe(concat('style-mobile.css'))
.pipe(gulp.dest('./build/web-mobile/')
.on('end', cb));
});
由于我没有对main.js修改的需求,所以我这里只做了css的实现,有兴趣的同学可以自己实现js的自定义逻辑。其实思路很简单,但挺实用的。
完整代码可以访问:https://github.com/babyzone20...,这个示例包含了Cocos Creator图片压缩优化,减少首次文件请求,html压缩,动态更新定制loading图等功能哦。
ps:
我们团队正在招聘优秀的H5游戏开发工程师,如果你符合以下条件:
白鹭引擎/Cocos2d-js/Layabox等H5相关的开发经验
热爱游戏,希望快速成长,不甘平庸
请联系我吧:babyzone2004@qq.com
更多信息请戳:https://www.lagou.com/jobs/30...
Cocos Creator—定制H5游戏首页loading界面的更多相关文章
- cocos creator实现棋牌游戏滑动选牌的功能
最近在玩cocos creator,打算学着做一款类似双扣游戏的棋牌,名字叫文成三星,比双扣还要多一扣,因为需要三幅牌,在我们老家比较流行这种玩法. 目前实现了绝大部分的逻辑效果如下: 有一点不好的体 ...
- Cocos Creator实现1024游戏,免费提供代码。
效果预览 获取代码 私信或留言. 游戏介绍 ● Github上的代码,不能进行合并操作,修改以后,功能类似2048,空白块赏随机位置,生成2,可以往左.右.上.下滑动,数字会朝着指定方向运动,相 ...
- Cocos Creator—优化首页打开速度
Cocos Creator是一个优秀的游戏引擎开发工具,很多地方都针对H5游戏做了专门的优化,这是我比较喜欢Cocos Creator的一点原因. 其中一个优化点是首页的加载速度,开发组为了加快首页的 ...
- 新编辑器Cocos Creator发布:对不起我来晚了!
1月19日,由Cocos创始人王哲亲手撰写的一篇Cocos Creator新品发布稿件在朋友圈被行业人士疯狂转载,短短数小时阅读量突破五位数.Cocos Creator被誉为“注定将揭开Cocos开发 ...
- Cocos Creator 安装和启动,Dashboard 的介绍
1,去官网:http://www.cocos.com/download,或者直接百度cocos2d官网,进入下载对应版本:[参考来源:官方文档] 2,下载完成后直接解压即可.以window举例, 运行 ...
- Cocos文档案例游戏设计的梳理与分析
导语:这是一篇新手教程,适用于已看完Cocos官方文档,但还对游戏设计.运行流程不熟悉的新人.这篇教程是对文档[快速上手]里那款名叫"摘星星"的坑爹小游戏(文档原话)流程的梳理,以 ...
- 手游产品经理初探(二)从营销角度看loading界面
近期開始写产品相关的专题,准备从细节入手去思考.总结一些不为人注意的细节地方. 今天给大家分享的是游戏里面都有的loading界面. 还是从几个在Facebook上排名靠前的Casino游戏的load ...
- 软件设计之基于Java的连连看小游戏(一)——开题及游戏首页的制作
原本计划紧张忙碌的考试月在图书馆和实验室度过,结果突如其来为期两周的软件设计把课余时间几乎捆绑在了机房.软设没有太多知识上的要求,只要成品简洁美观.实用准确即可.考虑了很久决定要用Java swing ...
- Cocos Creator 功能介绍
cc.Class({ extends: cc.Component, properties: { anim: cc.Animation }, playRun: function() { this.ani ...
随机推荐
- java 各数据类型之间的转换
String —> Date SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");Date ...
- call(),apply()方法解析(一)
1.call()和apply()的作用是改变this指向,区别是传参列表不同(前者连续参数,后者为参数数组) 2.方法定义: function.apply(thisObj[, argArray]) f ...
- error: src refspec XXX matches more than one
error: dst refspec v1. matches more than one. error: failed to push some refs to '' 错误原因是 branch名和ta ...
- 我的Python之旅第三天
一 编码操作 1 编码 enconde() 英文字符编码为"utf-8"时,一个字符占一个字节. s1='abcdef' b1=s1.encode('utf-8') print(b ...
- Python bytes数据类型
Python3 中文本是Unicode, 由str类型表示. 二进制数据由bytes类型表示(如视频文件). Python3 不会以任意隐式的方式 滥用str和bytes, 所以不能拼接字符串和字节包 ...
- 【BZOJ 2850】巧克力王国
复习了下KDtree,贴一下新板子233. #include "bits/stdc++.h" using namespace std; inline int read(){ ,k= ...
- SQL基础操作汇总
SQL基础操作汇总 一.表操作 1.表的创建(CREATE TABLE): 基本语句格式: CREATE TABLE table_name ( col_name datatype, -- ...
- appium----【已解决】【Mac】安装sudo npm install -g appium-doctor总是提示“Error: EACCES: permission denied........”
[mac电脑] 问题: (1)npm install -g appium-doctor (2)sudo npm install -g appium-doctor (3)cnpm install ...
- ASP.NET中的Cookie对象
1.Cookie对象 Cookie对象一般用于在客户端保存一些针对某个用户的信息. Cookie本质上只是一小段文本字符串,改字符串一般保存在用户计算机特定文件夹下的某个文件中,每个Cookie都保存 ...
- 浅谈tcp粘包问题
第一部分:简介tcp socket通信的底层原理 原理解析图: socket通信过程如图所示:首先客户端将发送内容通过send()方法将内容发送到客户端计算机的内核区,然后由操作系统将内容通过底层路径 ...