好了，書接上回，繼續給我們的拼圖遊戲添枝加葉。
上一篇地址：【Cocos Creator 實戰】02 - 給拼圖遊戲加上音樂和音效
概覽
主要內容
來看看今天要做的內容：
- Cocos Creator 中如何設置節點的順序（zIndex）
什麼是 zIndex，彆着急，一會就說。
項目資源
推薦大家先把項目 clone 到本地，然後參考着代碼來看本篇文章。
我的每篇文章會對應一個分支，大家直接看對應的分支就可以，master 對應的是最新的內容，會整合各個分支。
演示地址也是對應每篇文章獨立部署的。
開搞
什麼是 zIndex
以下內容引自官方文檔：
zIndex 是用來對節點進行排序的關鍵屬性，它決定一個節點在兄弟節點之間的位置。
zIndex 的取值應該介於 cc.macro.MIN_ZINDEX 和 cc.macro.MAX_ZINDEX 之間 父節點主要根據節點的 zIndex 和添加次序來排序，擁有更高 zIndex 的節點將被排在後面，如果兩個節點的 zIndex 一致，先添加的節點會穩定排在另一個節點之前。
節點在 children 中的順序決定了其渲染順序。父節點永遠在所有子節點之前被渲染。
好了，說人話。
如果你做過前端開發，這個 zIndex 和 css 裏面的 zIndex 其實是一個意思。
如果你之前不瞭解這些東西，那咱們簡單看幾個例子。
1、先假設有兩個 Node 添加在同一個父節點下面，結構如下：
—— Canvans
|
|—— Node1
| | —— Sprite1
|
|—— Node2
| —— Sprite2
如果你是按照上面的結構添加的 Node，你會看到 Sprite2 會蓋章 Sprite1 上面，即，默認情況下，後添加的節點會顯示在先添加的節點的上面。
還有個知識點可以記一下，如果沒有手動指定的話，node 的 zIndex 會是 默認值 0。
那如果我通過代碼改變了節點的 zIndex 了呢？
比如：
Node1.zIndex = 2;
Node2.zIndex = 1;
即得到如下的結果：
—— Canvans
|
|—— Node1（zIndex = 2）
| | —— Sprite1
|
|—— Node2（zIndex = 1）
| —— Sprite2
試一下，回來看咱們倆的結果一樣不。
這回應該是 Sprite1 蓋住了 Sprite2 了，一樣吧。
2、我們再看一個直觀一點的例子：
這個圖本來是用於講解 PhotoShop 圖層原理的，但是放在咱們這裏也很合適。
簡單來說，就是 zIndex 約大，圖層越靠上，離用戶越近，會蓋住比他 zIndex 小的節點。
關於 zIndex 的注意事項
1、zIndex 是 Node 的屬性，所以只能設置給 Node，不能設置給其他組件。
比如一個 Sprite，你想要改變他的 zIndex，你只能調整他的父節點（Node）的 zIndex。
2、zIndex 越大，節點的層級越高，顯示越靠上，想用一個節點蓋住另一個，把 zIndex 加大。
3、zIndex 只能調整同一個父節點下面的兄弟節點的前後順序。
請看下面這樣的例子：
—— Canvans
|
|—— Node1
| | —— Node11（zIndex=3）
| |—— Sprite11
| | —— Node12（zIndex=1）
| |—— Sprite12
|
|—— Node2
| —— Node21（zIndex=2）
|—— Sprite21
請思考一下 Sprite11、Sprite12、Sprite21 三個精靈的覆蓋關係。
下面是正確的結果：
仔細想想，你能想清楚的，加油。
我簡單提一下：Node21 的 zIndex 無論怎麼設置，都一定會顯示在 Node11 和 Node12 的上面。因爲 Node21 的父節點 Node2 在 Node11 和 Node12 的父節點 Node1 的上面（）。
這回想清楚了吧，不清楚就再看一遍上邊那句話。
需求分析
好了，說了半天的基礎知識，現在來看看我們想要實現的內容是什麼：
1、原來點擊圖片的時候，每張圖片顯示的 zindex 不變，那麼哪個圖片蓋着哪個圖片這些都是固定的，就會出現下面這種情況：
這裏我點擊的圖片，點擊之後，仍是被「蓋」在上面那張圖後面。
想象一下實際場景，當你拿起來一塊拼圖的時候，這個拼圖應該是在所有拼圖小塊的最上面。
2、我們想要實現的：拿起哪張圖片，哪張圖片就在最上面，對應的技術就是，把該 node 對應的 zindex 設置爲所有拼圖裏面最大的。
核心代碼
修改 item.js，在拼圖開始拖動（拿起）的時候，回調函數中，把當前 node 作爲參數調用回調函數
this.node.on(cc.Node.EventType.TOUCH_START, function (event) {
self.moveStartCb = self.moveStartCb || function () {
};
self.moveStartCb(self.node); //這裏增加 self.node 作爲參數
}, this.node);
修改 item-manager.js，增加一個屬性，用來表示目前所有拼圖中最大的 zIndex
properties: {
itemPrefeb: cc.Prefab,
items: [cc.Component], // 聲明數組變量
curTexture: null,
picHeight: 540,
picWidth: 810,
maxIndex: 0 // 用來表示目前所有拼圖最大的 zindex
},
修改回調函數，開始拖動（拿起）的時候，設置當前 node 的 zindex 爲當前最大值+1
__moveStart(node) {
console.info('start');
let itemManager = node.parent.getComponent('item-manager');
itemManager.maxIndex++;
node.zIndex = itemManager.maxIndex;
cc.loader.loadRes('sound/pick', cc.AudioClip, function (err, clip) {
cc.audioEngine.playEffect(clip, false);
});
},
注意上面有一個 node.parent.getComponent('item-manager')，要這樣寫才能獲取到 itemManager 腳本。
效果
好了，我們看一下最後的實現效果：
拿起一塊拼圖的時候，這個拼圖會被放到最高層，就醬。試一下吧。
總結
知識點
1、Cocos Creator 中如何設置節點的順序（zIndex）
2、設置 zIndex 的注意事項
下一步
好了，真是越來越完善了呢。
我已經開始規劃咱們的遊戲大賣之後接受採訪要說什麼了：我的成功，只是偶然吧。我也就是專心的做一件事而已，至於世俗意義上的成功，並不是我所追求的。
怎麼樣，是不是很吊。
PS：今天的內容有點水，知識點有點少，但是很重要，無論做什麼遊戲，都會遇到這個問題。很基礎，大家要好好理解一下， 回去自己弄幾個節點試試。