【cocos2d-js官方文檔】三、Bake功能使用說明

標籤：

設計意圖

在遊戲開發的過程中，經常會遇到作為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功能使用說明