Cocos2d-html5入门笔记(二)
2014-01-28 07:15
218 查看
这次笔记记录的是《如何自定义 Cocos2d-html5 Loading 界面》。
官方GitHub中文文档:https://github.com/cocos2d/cocos-docs/blob/master/manual/framework/html5/customize-loading-screen/zh.md
自定义读取的页面各种元素(背景图、背景色),而不使用官方默认加载背景。
将加载的过程,用一个界面来可视化的实现出,如用一个加载场景,上面一个 Logo 显示,同事显示了当前加载资源的进度百分比。
我们要自定义实现 Loading 界面,那就是重新实现 LoaderScene 即可。
对于 LoaderScene 的实现比较简单,参考其实现,自定义一个 Loader.js 文件,实现 Loader 类,完成自定义Loading 界面的具体实现,其中大多参考(实际是copy)了 LoaderScene 的实现,在其上修改扩充,它完成了修改 Logo 图片,并添加了一个简单的精度条。
完成 Loading.js 后,需要加载它,并让它运行,以替换 LoaderScene 的运行。首先修改项目 cocos2d.js 文件,在appFiles添加 Loading.js 文件。
其次修改
main.js 文件内cc.LoaderScene.preload 为Loading.preload 即可,刷新 index.html 界面,将能看见 Loading 界面已经替换。它加载速度的快慢取决于游戏资源内容的多少。
这里图片使用的是Base64加密方式,这和迅雷的专属链接相像,如(已删除部分因太冗长):
减少了HTTP请求
某些文件可以避免跨域的问题
没有图片更新要重新上传,还要清理缓存的问题
附上一个在线Base64加密网站:http://www.base64-image.de/
官方GitHub中文文档:https://github.com/cocos2d/cocos-docs/blob/master/manual/framework/html5/customize-loading-screen/zh.md
自定义读取的页面各种元素(背景图、背景色),而不使用官方默认加载背景。
将加载的过程,用一个界面来可视化的实现出,如用一个加载场景,上面一个 Logo 显示,同事显示了当前加载资源的进度百分比。
我们要自定义实现 Loading 界面,那就是重新实现 LoaderScene 即可。
对于 LoaderScene 的实现比较简单,参考其实现,自定义一个 Loader.js 文件,实现 Loader 类,完成自定义Loading 界面的具体实现,其中大多参考(实际是copy)了 LoaderScene 的实现,在其上修改扩充,它完成了修改 Logo 图片,并添加了一个简单的精度条。
完成 Loading.js 后,需要加载它,并让它运行,以替换 LoaderScene 的运行。首先修改项目 cocos2d.js 文件,在appFiles添加 Loading.js 文件。
其次修改
main.js 文件内cc.LoaderScene.preload 为Loading.preload 即可,刷新 index.html 界面,将能看见 Loading 界面已经替换。它加载速度的快慢取决于游戏资源内容的多少。
cc.LoaderScene.preload(g_resources,function(){ director.replaceScene(new this.startScene()); }, this);修改为:
Loading.preload(g_resources,function(){ director.replaceScene(new this.startScene()); }, this);
这里图片使用的是Base64加密方式,这和迅雷的专属链接相像,如(已删除部分因太冗长):
var logoData = "data:image/png;base64,iVBORw0AAARnQU1BAACxjwv8YQUAAAAgY0hSTQAA5CYII=
减少了HTTP请求
某些文件可以避免跨域的问题
没有图片更新要重新上传,还要清理缓存的问题
附上一个在线Base64加密网站:http://www.base64-image.de/
相关文章推荐
- Cocos2d-html5入门笔记(一)
- Cocos2d-HTML5入门第三天
- cocos2d-html5 笔记3: Node
- Cocos2d-js入门学习笔记
- html5笔记1 入门
- HTML5 video标签(播放器)学习笔记(一):使用入门
- cocos2d-x入门笔记(一)
- Cocos2d-html5入门 (跨平台游戏开发)
- Cocos2d-html5 笔记4: 粒子
- cocos2d-html5学习笔记(六)--alpha2中cc.Sequence.create中的bug
- 【Cocos2d-html5游戏引擎学习笔记(3)】渲染文字
- 【Cocos2d-html5游戏引擎学习笔记(10)】自定义精灵动画
- 一步一步学Cocos2d-html5做游戏教程(入门篇)
- HTML5学习笔记-1.网页入门
- 【Cocos2d-HTML5游戏引擎学习笔记(12)】Schedule定时器
- cocos2d-x入门笔记(二)
- cocos2d-html5 笔记5: 事件
- cocos2d-x入门笔记(1)
- HTML5学习笔记 —— SEO入门
- cocos2d-x学习笔记(20)-- box2d入门