Cocos2d-JS場景樹

場景樹概念（Scene Graph）

場景樹是Cocos2d-JS中用來管理場景中全部元素的一個數據結構，場景樹之因此被稱爲一棵樹是由於它將一個場景的全部子結點以樹狀圖的形式組織在一塊兒。

 

Cocos2d-JS中場景的渲染是經過遍歷場景樹來作到的，對於每個節點node，遍歷的順序以下：

1. 遍歷node左邊的全部子結點
2. 訪問node節點
3. 遍歷node右邊的全部子結點

最早遍歷到的節點會被顯示在場景的最下層，而最後遍歷的節點會被顯示在場景的最上層。用一張圖來展現這個過程再清晰不過了：

 

另外一點須要注意的是，zIndex爲負數的節點在場景樹中位於父節點的左邊，相反，zIndex爲0或者正數的節點在場景樹中位於父節點的右邊，在構建場景樹的時候請時刻留心這點。

 

構建場景樹

在Cocos2d-JS中，全部節點類都繼承自cc.Node，包括場景類cc.Scene，cc.Node的addChild函數能夠用來爲某個節點添加子結點，並一步步構建出場景樹。

// 建立一個新場景
var scene = new cc.Scene();

// 添加一個zIndex爲-2的子結點，在場景樹中，它位於scene的左邊，由於它的zIndex爲負值
scene.addChild(title_node, -2);

// 添加另外一個子結點，沒有指定zIndex的狀況下，zIndex將等於默認值0
scene.addChild(label_node);

// 田間一個zIndex爲1的子結點，在場景樹中，它位於scene的右邊，由於它的zIndex大於0
scene.addChild(sprite_node, 1);