遊戲開發者，遊戲開發教程

本文詳解介紹了Cocos Creator這一遊戲開發方案。Cocos Creator包括 cocos2d-x 引擎的 JavaScript 實現，能讓用戶快速開發遊戲所需要的各種圖形界面工具。目前，其支持發佈遊戲到 Web、iOS、Android、各類"小遊戲"、PC 客戶端等平臺，能夠實現全平臺運行。

 

 

CocosCreator基礎教程（1）——從zIndex開始

 

從Cocos2d-x/lua/js過來的老程序員們肯定發現了，在CocosCreator屬性檢查器中Node節點竟然沒有zIndex屬性？

因爲這一點，UI節點的遮擋關係控制不便，經常讓策劃、測試、甚至老闆找程序員麻煩。不知道大家有沒想過用編輯器去控制zIndex呢，請思考一下？我發現自己是用了CocosCreator快一年纔去想到這個問題的。

要用編輯器控制，最簡單的方案就是編寫組件腳本。

/***SetZIndex.js 控制組件
**/
cc.Class({
    extends: cc.Component,    
    //編輯器屬性定義
    properties: {
        zIndex: 0
    },
    onLoad () {        
        this.node.zIndex = this.zIndex;
    }
});

代碼非常簡單，將這個組件腳本掛載到任意節點上，通過zIndex屬性就能控制節點的zIndex了，看下圖：

SetZindex組件

但上面的代碼有兩個小問題，不仔細還不易被發現：

• 「zIndex:0」，這樣定義zIndex屬性，它是一個浮點數類型，你可以在編輯器設置0.1這樣的值。運行在瀏覽器或H5環境沒什麼問題，但跑在原生環境zIndex對應的是cocos2d-x中的Node::setLocalZOrder(int localZOrder)函數，它的參數類型是整型。

• 這個組件只在onLoad時設置了節點的zIndex，如果運行過程中，給這個組件的zIndex屬性賦值沒有任何作用，並且在編輯器中，你設置zIndex也看不到節點層級的變化。

知道問題了就好辦了，看下面的代碼：

/**
*SetZIndex.js 控制組件
**/
cc.Class({
    extends: cc.Component,    
    //編輯器屬性定義
    properties: {
        zIndex: {
            type: cc.Integer， //使用整型定義
            default: 0,            
            //使用notify函數監聽屬性變化
            notify(oldValue) {                
                //減少無效賦值
                if (oldValue === this.zIndex) {               
                    return;
                }
                this.node.zIndex = this.zIndex;
            }
        }
    },
    onLoad () {        
        this.node.zIndex = this.zIndex;
    }
});

使用一個對象來定義zIndex屬性，同時監聽zIndex的修改，問題解決。

SetZIndex組件不依賴任何其它組件和節點，可以掛載任意節點之上，因此它是一個通用組件。不要小看了這個組件的設計，它蘊涵了CocosCreator的組件編程模式和思想。

cocosCreator視頻教程

教程地址可以通過關注微信公衆號cityapes或者掃描關注後回覆遊戲教程免費獲取下載鏈接