cocosCreator 入門(三) 訪問節點及屬性

官網：https://www.cocos.com/

參考：https://docs.cocos.com/creator/manual/zh/scripting/access-node-component.html

配置： MacOS 10.12.6  CocosCreator2.3.3 JavaScript VisualCode

 

訪問同節點下的組件

獲取同一節點下的其他組件，我們可使用getComponent，比如我們想獲取如下節點的Label：

start: function() {
        // 獲取label節點
        // 由於node中也存在着一個getComponent方法，因此下面兩個的寫法一致
        var textLabel = this.getComponent(cc.Label);
        var textLabel = this.node.getComponent(cc.Label);

        // 添加判定，檢測組件是否獲取到，若getComponent獲取失敗，將返回null
        if (!textLabel) {
            cc.error('get component failed');
        }
        else {
            textLabel.string = '獲取文本組件';
        }
        
        // 獲取腳本組件
        var script = this.getComponent('debugScript');
        console.log(script);
    },

 

訪問其他節點組件

1. 利用屬性檢查器設置，即在腳本的properties屬性中設置節點，比如我們想在TextLabel中訪問MenuNode節點：

我們可以在startBtn下的javaScript腳本下添加內容：

properties: {
        // 值類型屬性使用，比如：Number,Vec2, String, Boolean, Enum, Color等
        Number:0,
        Vec2: [],
        String: '',
        Boolean: true,

        // 引用類型屬性相關，需要在拖拽對應的節點或者資源，添加了兩種方式，可根據圖示對比下區別
        // 方式1:
        menuNode1: cc.Node,
        // 方式2:
        menuNode2: {
            default: null,                  // 設置屬性的默認值，該屬性值僅在第一次添加到節點時才會使用
            type: cc.Node,                  // 屬性的數據類型
            visible: true,                  // 是否在屬性檢查器中顯示該屬性
            displayName: 'menuNode2',       // 在屬性檢查器中顯示成設定的名字
            tooltip: 'this is MenuNode2',   // 添加屬性說明tip
        },
    },

然后把層級管理器中的menuNode節點拖拽到menuNode1,menuNode2中，我們就可以在腳本中獲取了。

start: function() {
        let menuNode = this.menuNode1
        console.log('--> menuNode.name:', menuNode.name);       // -->menuNode.name:MenuNode
    },

2. 利用腳本進行查找，我們依然以TextLabel腳本中想獲取menuNode的節點為例:

start: function() {
        /* --------- 獲取父節點后再獲取指定子節點 ------------*/
        // 獲取當前的節點
        let currentNode = this.node;   
        // 獲取父節點，即Canvas     
        let parentNode = this.node.parent;  
        console.log('--> parentNode name:', parentNode.name);       // -->parentNode name:Canvas
        // 獲取指定節點
        let menuNode = parentNode.getChildByName('MenuNode');
        if (menuNode) {
            console.log('-->menuNode name:', menuNode.name);        // -->menuNode name:MenuNode
        }

        /* ---------  使用cc.find 方法 ------------*/
        let menuBtn = cc.find('Canvas/MenuNode/quitBtn');
        if (menuBtn) {
            console.log('--> menuBtn name:', menuBtn.name);         // --> menuBtn name: quitBtn
        }
    },

 

全局變量訪問

假設我們有多個腳本存在，我們需要在A腳本里訪問B腳本下的屬性，我們可以適當且謹慎的使用全局變量。

建議創建一個腳本文件，並命名為GlobalConfig.js文件，這樣有有利於查看並維護。比如：

// ------------------- GlobalConfig.js ------------------- 
// 創建格式為：window.name = {};
window.G = {
    quitBtn = null,     // 獲取quitBtn節點
}

// -------------------quitScript.js ------------------- 
// 腳本組件添加在menuNode下的quitBtn節點下 
// 一定要確保全局變量初始化，否則會報錯，因此添加到onLoad中
onLoad: function() {
        // 初始化全局變量指定的屬性值
        G.quitBtn = this.node;
    },

// -------------------debugScript.js ------------------- 
// 腳本組件添加在TextLabel中
start: function() {
        console.log('--> quitBtn name:',G.quitBtn.name)     // quitBtn name
    },           

 

模塊訪問

其主要實現借助於module.exports 聲明模塊，通過require + 文件名(不含路徑) 來獲取模塊相關。

// --------- GlobalConfig.js
// GlobalConfig.js 在assets/scripts/config中
module.exports = {
    quitBtn: null,
}

// ---------quitScript.js 
var G = require("GlobalConfig");

cc.Class({
    extends: cc.Component,

    onLoad: function() {
        // 初始化全局變量指定的屬性值
        G.quitBtn = this.node;
    },
});

// ---------debugScript.js
var G = require("GlobalConfig");
cc.Class({
    extends: cc.Component,

    start: function() {
        console.log('--> quitBtn name:',G.quitBtn.name)     // quitBtn name
    },
});

 

拓展：

在上面的示例程序中，聲明變量時，我使用了let 與 var， let類似於var，但是僅在代碼塊內有效，比如

// let的作用域僅在指定的代碼塊中
{
    var a = 10;
    let b = 11;
}
console.log('var a:',a);        // 10
console.log("let b:",b);        // Uncaught ReferenceError: b is not defined

為此，for循環的索引很適合用let來聲明，比如：

start: function() {
    // 使用 var, 循環體外數據依然存在
    for(var i = 0; i < 10; i++) {
        var varCount = i;
    }
    console.log('--> var i:',i)       // --> var i:10
    console.log('--> varCount:',i)    // --> varCount:10

    // 使用let， 循環體外數值報錯
    for(let index = 0; index < 10; index++) {
        let letCount = index;
    }
    console.log('--> let index:',index)       // Uncaught ReferenceError: index is not defined
},

...