【cocos2d-js官方文档】三、Bake功能使用说明
设计意图
在游戏开发的过程中,经常会遇到作为UI或者不怎么修改的背景的层(Layer), 这些层内容并不怎么变动。 而在游戏的渲染过程中,这些层往往又会消耗大量的渲染时间,特别是比较复杂的UI界面,比如:在Canvas渲染模式中,一个Button会调用9次绘图(drawImage)。在复杂一些的UI场景中,会出现UI的绘图次数远大于实际游戏的绘图次数的情况,这对于性能资源非常稀缺的手机浏览器来说,会带来灭顶之灾。
对于上述情况,我们给cc.Layer
加入了bake
的接口, 调用了该接口的层,会将自身以及其子节点都备份(烘焙/bake)到一张画布(Canvas)上,只要自身或子节点不作修改,下次绘制时,将直接把画布上的内容绘制上去。这样,原来需要调用N次绘图的层,就只需要调用一次绘图了。 当该层不需要bake时,可以调用unbake
来取消该功能。
使用场景
- 复杂UI层。 UI层含有大量的面板(Panel),按钮(Button)等,这些控件的绘制会有大量的绘图调用,而这些控件并不经常修改。
- 游戏中作为静态的背景或障碍物的层。
使用方法
使用bake功能非常简单: 将需要bake的节点元素加入到一个cc.Layer
或其子类(cc.LayerColor
,cc.LayerGradient
)对象中,然后调用该对象的bake
函数就可以了。 示例代码:
var bakeLayer = cc.Layer.create();
this.addChild(bakeLayer);
for(var i = 0; i < 9; i++){
var sprite1 = cc.Sprite.create(s_pathGrossini);
if (i % 2 === 0) {
sprite1.setPosition(90 + i * 80, winSize.height / 2 - 50);
} else {
sprite1.setPosition(90 + i * 80, winSize.height / 2 + 50);
}
sprite1.rotation = 360 * Math.random();
bakeLayer.addChild(sprite1);
}
bakeLayer.bake(); //start the bake function
更多信息,可查看我们的测试例(js-tests)的Bake Layer test.
注意事项
- 对于子节点经常会变的层, 启用bake功能,会给游戏性能带来额外的开销,建议对于不常修改子节点的层才开启该功能。
- 该功能仅在Canvas渲染模式下有效, 在JSB与WebGL渲染模式下调用bake函数,不会产生效果
【cocos2d-js官方文档】三、Bake功能使用说明的更多相关文章
- 《Spring5官方文档》新功能(4,3)
<Spring5官方文档>新功能 原文链接 译者:supriseli Spring框架的新功能 这一章主要提供Spring框架新的功能和变更. 升级到新版本的框架可以参考.Spring g ...
- bootbox.js官方文档中文版
bootbox.js官方文档中文版简介:Bootbox.js是一个小型的JavaScript库,基于Bootstrap模态框开发,用于创建可编程的对话框. 不像原生的alert等对话框,所有的Boot ...
- Hui之Hui.js 官方文档
基础 // 判断值是否是指定数据类型 var result = hui.isTargetType("百签软件", "string"); //=>true ...
- Vue.js官方文档学习笔记(三)创建Vue实例
创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm=new Vue({ //选项 }) Vue的设计受到了mvvm的启发 当创建一个 Vue 实 ...
- node.js官方文档解析 02—buffer 缓冲器
Buffer 类的实例类似于整数数组,但 Buffer 的大小是固定的.且在 V8 堆外分配物理内存.Buffer 的大小在被创建时确定,且无法调整. Buffer 类在 Node.js 中是一个全局 ...
- Node.js官方文档:到底什么是阻塞(Blocking)与非阻塞(Non-Blocking)?
译者按: Node.js文档阅读系列之一. 原文: Overview of Blocking vs Non-Blocking 译者: Fundebug 为了保证可读性,本文采用意译而非直译. 这篇博客 ...
- Vue.js官方文档学习笔记(一)起步篇
Vue.js起步 Vue.js介绍 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库 ...
- node.js官方文档解析 01—assert 断言
assert-------断言 new assert.AssertionError(options) Error 的一个子类,表明断言的失败. options(选项)有下列对象 message < ...
- bootbox.js官方文档
简介 Bootbox.js是一个小型的JavaScript库,基于Bootstrap模态框开发,用于创建可编程的对话框. 不像原生的alert等对话框,所有的Bootstrap模态框生成的都是非阻塞事 ...
- node.js官方文档chm电子书的制作
制作软件:WebCHMSetup2.22.zip,http://www.onlinedown.net/soft/31553.htm 制作好的电子书:Node.js(v6.10.2).zip 参考链接: ...
随机推荐
- 大数据分析中Redis应用
大数据分析中Redis 大数据时代,海量数据分析就像吃饭一样,成为了我们每天的工作.为了更好的为公司提供运营决策,各种抖机灵甚至异想天开的想法都会紧跟着接踵而来!业务多变,决定了必须每天修改系统,重新 ...
- 洛谷 P2387 [NOI2014]魔法森林 解题报告
P2387 [NOI2014]魔法森林 题目描述 为了得到书法大家的真传,小 E 同学下定决心去拜访住在魔法森林中的隐 士.魔法森林可以被看成一个包含 n 个节点 m 条边的无向图,节点标号为 1,2 ...
- HDU2732:Leapin' Lizards(最大流)
Leapin' Lizards Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- Input操作文件
在HTML表单中,可以上传文件的唯一控件就是<input type="file">. 注意:当一个表单包含<input type="file" ...
- 线程 ManualResetEvent 类
Reset(): 当一个线程开始一个活动(此活动必须完成后,其他线程才能开始)时, 它调用 Reset 以将 ManualResetEvent 置于非终止状态.此线程可被视为控制 ManualRese ...
- 解析 Array.prototype.slice.call(arguments,0)
Array.prototype.slice.call(arguments,0) 经常会看到这段代码用来处理函数的参数 网上很多复制粘帖说:Array.prototype.slice.call(argu ...
- session超时设置+超时页面跳转
session超时设置,方法有三种: (1)在主页面或者公共页面中加入:session.setMaxInactiveInterval(600);参数600单位是秒,即在没有10分钟活动后,sessio ...
- Visual Studio Code 配置C/C++环境
0. 前言 VS Code 是微软发布一款跨平台的源代码编辑器,其拥有强大的功能和丰富的扩展,使之能适合编写许多语言. 本文面向初学者(但不是纯小白),分享一点我配置C/C++的经验. 本文所有内容均 ...
- [NOIp普及组2011]瑞士轮
洛谷题目链接:瑞士轮 题目背景 在双人对决的竞技性比赛,如乒乓球.羽毛球.国际象棋中,最常见的赛制是淘汰赛和循环赛.前者的特点是比赛场数少,每场都紧张刺激,但偶然性较高.后者的特点是较为公平,偶然性较 ...
- 【CF1027F】Session in BSU(dsu,基环树)
题意:给出n场考试,每场考试有2天可以通过(第ai与bi天).每天最多参加一场考试,现在要求所有考试全部通过的最小天数 n<=1e6,1<=a[i]<b[i]<1e9 思路:F ...