设计意图

在游戏开发的过程中,经常会遇到作为UI或者不怎么修改的背景的层(Layer), 这些层内容并不怎么变动。 而在游戏的渲染过程中,这些层往往又会消耗大量的渲染时间,特别是比较复杂的UI界面,比如:在Canvas渲染模式中,一个Button会调用9次绘图(drawImage)。在复杂一些的UI场景中,会出现UI的绘图次数远大于实际游戏的绘图次数的情况,这对于性能资源非常稀缺的手机浏览器来说,会带来灭顶之灾。

对于上述情况,我们给cc.Layer加入了bake的接口, 调用了该接口的层,会将自身以及其子节点都备份(烘焙/bake)到一张画布(Canvas)上,只要自身或子节点不作修改,下次绘制时,将直接把画布上的内容绘制上去。这样,原来需要调用N次绘图的层,就只需要调用一次绘图了。 当该层不需要bake时,可以调用unbake来取消该功能。

使用场景
  1. 复杂UI层。 UI层含有大量的面板(Panel),按钮(Button)等,这些控件的绘制会有大量的绘图调用,而这些控件并不经常修改。
  2. 游戏中作为静态的背景或障碍物的层。
使用方法

使用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.

注意事项
  1. 对于子节点经常会变的层, 启用bake功能,会给游戏性能带来额外的开销,建议对于不常修改子节点的层才开启该功能。
  2. 该功能仅在Canvas渲染模式下有效, 在JSB与WebGL渲染模式下调用bake函数,不会产生效果

【cocos2d-js官方文档】三、Bake功能使用说明的更多相关文章

  1. 《Spring5官方文档》新功能(4,3)

    <Spring5官方文档>新功能 原文链接 译者:supriseli Spring框架的新功能 这一章主要提供Spring框架新的功能和变更. 升级到新版本的框架可以参考.Spring g ...

  2. bootbox.js官方文档中文版

    bootbox.js官方文档中文版简介:Bootbox.js是一个小型的JavaScript库,基于Bootstrap模态框开发,用于创建可编程的对话框. 不像原生的alert等对话框,所有的Boot ...

  3. Hui之Hui.js 官方文档

    基础 // 判断值是否是指定数据类型 var result = hui.isTargetType("百签软件", "string"); //=>true ...

  4. Vue.js官方文档学习笔记(三)创建Vue实例

    创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm=new Vue({ //选项 }) Vue的设计受到了mvvm的启发 当创建一个 Vue 实 ...

  5. node.js官方文档解析 02—buffer 缓冲器

    Buffer 类的实例类似于整数数组,但 Buffer 的大小是固定的.且在 V8 堆外分配物理内存.Buffer 的大小在被创建时确定,且无法调整. Buffer 类在 Node.js 中是一个全局 ...

  6. Node.js官方文档:到底什么是阻塞(Blocking)与非阻塞(Non-Blocking)?

    译者按: Node.js文档阅读系列之一. 原文: Overview of Blocking vs Non-Blocking 译者: Fundebug 为了保证可读性,本文采用意译而非直译. 这篇博客 ...

  7. Vue.js官方文档学习笔记(一)起步篇

    Vue.js起步 Vue.js介绍 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库 ...

  8. node.js官方文档解析 01—assert 断言

    assert-------断言 new assert.AssertionError(options) Error 的一个子类,表明断言的失败. options(选项)有下列对象 message < ...

  9. bootbox.js官方文档

    简介 Bootbox.js是一个小型的JavaScript库,基于Bootstrap模态框开发,用于创建可编程的对话框. 不像原生的alert等对话框,所有的Bootstrap模态框生成的都是非阻塞事 ...

  10. node.js官方文档chm电子书的制作

    制作软件:WebCHMSetup2.22.zip,http://www.onlinedown.net/soft/31553.htm 制作好的电子书:Node.js(v6.10.2).zip 参考链接: ...

随机推荐

  1. 大数据分析中Redis应用

    大数据分析中Redis 大数据时代,海量数据分析就像吃饭一样,成为了我们每天的工作.为了更好的为公司提供运营决策,各种抖机灵甚至异想天开的想法都会紧跟着接踵而来!业务多变,决定了必须每天修改系统,重新 ...

  2. 洛谷 P2387 [NOI2014]魔法森林 解题报告

    P2387 [NOI2014]魔法森林 题目描述 为了得到书法大家的真传,小 E 同学下定决心去拜访住在魔法森林中的隐 士.魔法森林可以被看成一个包含 n 个节点 m 条边的无向图,节点标号为 1,2 ...

  3. HDU2732:Leapin' Lizards(最大流)

    Leapin' Lizards Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  4. Input操作文件

    在HTML表单中,可以上传文件的唯一控件就是<input type="file">. 注意:当一个表单包含<input type="file" ...

  5. 线程 ManualResetEvent 类

    Reset(): 当一个线程开始一个活动(此活动必须完成后,其他线程才能开始)时, 它调用 Reset 以将 ManualResetEvent 置于非终止状态.此线程可被视为控制 ManualRese ...

  6. 解析 Array.prototype.slice.call(arguments,0)

    Array.prototype.slice.call(arguments,0) 经常会看到这段代码用来处理函数的参数 网上很多复制粘帖说:Array.prototype.slice.call(argu ...

  7. session超时设置+超时页面跳转

    session超时设置,方法有三种: (1)在主页面或者公共页面中加入:session.setMaxInactiveInterval(600);参数600单位是秒,即在没有10分钟活动后,sessio ...

  8. Visual Studio Code 配置C/C++环境

    0. 前言 VS Code 是微软发布一款跨平台的源代码编辑器,其拥有强大的功能和丰富的扩展,使之能适合编写许多语言. 本文面向初学者(但不是纯小白),分享一点我配置C/C++的经验. 本文所有内容均 ...

  9. [NOIp普及组2011]瑞士轮

    洛谷题目链接:瑞士轮 题目背景 在双人对决的竞技性比赛,如乒乓球.羽毛球.国际象棋中,最常见的赛制是淘汰赛和循环赛.前者的特点是比赛场数少,每场都紧张刺激,但偶然性较高.后者的特点是较为公平,偶然性较 ...

  10. 【CF1027F】Session in BSU(dsu,基环树)

    题意:给出n场考试,每场考试有2天可以通过(第ai与bi天).每天最多参加一场考试,现在要求所有考试全部通过的最小天数 n<=1e6,1<=a[i]<b[i]<1e9 思路:F ...