"COCOS2D-JS Official documents" third, bake function use instructions

Design Intent

In the game development process, often encounter as a UI or not modified background layer (layers), these layers of content is not how to change. In the game rendering process, these layers tend to consume a lot of rendering time, especially the more complex UI interface, such as: in the canvas rendering mode, a button will call 9 times the drawing (drawImage). In more complex UI scenarios, the number of drawing times in the UI is much larger than the number of actual game plots, which can be disastrous for mobile browsers with scarce performance resources.

In this case, we give the cc.Layer interface to join bake , call the interface layer, will itself and its child nodes are backed up (bake/bake) to a canvas (canvas), as long as the self or the child node is not modified, the next time you draw, will directly draw the content on the canvas. In this way, it is necessary to call the layers of the N-Times drawing, just call the drawing once. When the layer does not require bake, it can be called unbake to cancel the function.

Usage Scenarios

1. Complex UI layer. The UI layer contains a large number of panels (panel), buttons, and so on, and these controls are drawn with a large number of drawing calls, which are not often modified.
2. The layer of the game as a static background or obstacle.

How to use

Using the bake feature is very simple: add the node elements that need to be bake to a CC. Layer or its subclasses (CC. Layercolor , CC. Layergradient ) object, and then calls the object's bake function is OK. Example code:

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 (+ i *, WINSIZE.HEIGHT/2-50);   } else {sprite1.setposition (+ i *, WINSIZE.HEIGHT/2 + 50);     } sprite1.rotation = Math.random (); Bakelayer.addchild (sprite1);}               Bakelayer.bake (); Start the bake function  

For more information, see the Bake Layer test for our test example (js-tests).

Precautions

1. For layers that are often changed by sub-nodes, enabling the bake feature brings additional overhead to game performance, which is recommended for layers that do not frequently modify child nodes.
2. This feature is only valid in canvas rendering mode, with the bake function lowered in the JSB and WebGL rendering modes, without effect.

reprinted from: http://www.douapp.com/post/2434

"COCOS2D-JS Official documents" third, bake function use instructions