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—定制H5游戏首页loading界面 1
转载自:https://www.cnblogs.com/babyzone2004/p/7257974.html 方案具体策略如下: 在工程目录还原最终首页加载代码.在工程根目录新建html文件夹,手动 ...
- 【10086个赞】Cocos Creator助力H5游戏大爆发
梦想起航,共筑辉煌.4月21日,"资本助推H5行业发展--2017·H5-GAME资深大咖荟"在厦门创+会议中心正式拉开帷幕. 作为一个新兴行业,H5游戏至去年年末便被众多从业者炒 ...
- Cocos Creator发布H5游戏,做项目构建流程定制
游戏实现 主要介绍游戏玩法,具体实现,参考游戏源码.玩法是:游戏开始后,通过虚拟摇杆控制猴子在屏幕左右方向跳动,屏幕上随机出现香蕉,过一段时间后消失,猴子吃到香蕉得分,如果等到香蕉消失时,猴子仍旧没吃 ...
- 走入COCOS Creator 【H5游戏入门系列课程】笔记
相关网盘免费资源下载... 1.闭包: 彻底理解js中的闭包:https://blog.csdn.net/dovlie/article/details/76339244 2.Js中函数要前向定义(因为 ...
- cocos creator 浅塘游戏开发(2) 搭建初始界面
cocos creator 浅塘游戏开发(2) 文章目录 cocos creator 浅塘游戏开发(2) 前言 一.创建一个新的工程 二. 1.初始配置 2.初始界面 总结 前言 此次文章将会搭建浅塘 ...
- cocos creator 微信小游戏接口
cocos creator 微信小游戏接口 /** @Description:微信小游戏* @version: * @Author: lvpeijun* @Date: 2019-12-02 10:43 ...
- cocos creator vivo 小游戏 mac电脑
cocos creator vivo 小游戏 mac电脑 接入文档 文档链接 vivo调试 调试文档浏览器真机调试 1:使用cocos creator 进行打包 要勾选调试模式 生成了com.exma ...
- 解决cocos creator微信小游戏本地缓存文件超过限制问题
cocos creator微信小游戏开发,如果游戏包内资源超过包体大小限制,那么可以通过远程加载的方式加载资源(代码脚本文件除外). 小游戏在迭代过程中因为缓存资源的积累,在加载资源的时候会出现超过缓 ...
- 微信小游戏实战--cocos creator实现wordle游戏(六)
就wordle游戏本身而言它已经完成了,但我并不打算就到此为止."麻雀虽小五脏俱全",从"完整"的角度来看,它还缺少一些"必不可少"的功能: ...
最新文章
- session,cookie,sessionStorage,localStorage的区别及应用场景
- Twitter在超分辨率技术上取得新进展,能还原打码图片
- 【洛谷 2709】小B的询问
- path.join 和 path.resolve的区别
- hyper-v虚拟服务器内存满了,在Hyper-V Dynamic Memory里设置虚拟内存
- 使用 Selenium开展Web测试
- Visual Studio 2017 15.9 Previews扩展C++调试功能
- 用几何画板求曲线弧长的方法
- js获取引用的css样式,js获取css样式方法
- 一路PN码串行捕获设计--基于《通信收发信机的verilog实现与仿真》实例
- Day 9 2021.3.10多线程-Lambda表达式-File类
- Python文本分析 jieba
- 公司英文名称及部门大全
- qml+QQuickPaintedItem数学公式编辑器的实现
- tp5系统常量对应的目录路径
- 2020-08-13 图像处理入门软件应该怎么选?Opencv matlab 和Python
- [渝粤教育] 西南科技大学 现代数字系统设计 在线考试复习资料2021版(1)
- python实现植物大战僵尸_Python开发植物大战僵尸游戏
- Google 的封杀与被封杀
- 模拟键盘自动输入英文——基于pykeyboard和pymouse
热门文章
- C语言中()和【】的区别?
- BIOS INT 10中断功能
- 前端一HTML:十七:背景
- lvm的备份还原及修改UUID
- mono beta 3 released
- Spring Cloud Stream 使用延迟消息实现定时任务(RabbitMQ)
- 令人头疼的clientTop、scrollTop、offsetTop
- 我的vExpert之路-传递正能量!
- [转] form.getForm().submit的用法及Ext.Ajax.request的小小区别
- Editplus快捷键大全