cocos creator 基礎教程(一) 組件的基本使用

最近有人問我比較多入門的問題，關於cocos creator，今天就來寫一篇基礎的教程，不似教科書類型的教法。如果不懂的，歡迎來羣諮詢。

有剛入門的朋友，一直苦於不知道該怎麼進行組件間的交互，或者一些邏輯需要，需要獲取一些組件數據進行操作。包括，我見過一些人，把用戶腳本組件設置成單例模式，這是很不好的做法。
今天就簡單的寫一個小教程。
1、用戶腳本組件掛在：

第一步：點擊Canvas節點。
第二部：鼠標拖拽helloworld腳本，拖到3的位置 屬性面板位置，腳本即掛在完畢。

不過有一點需要注意的是，一般來說，我們項目所掛載的腳本，腳本的命名一般都場景文件名稱一樣，或者跟預製體名稱一樣。當然，也可以跟普通腳本一樣。但是這裏這樣的做法，主要是一個，當我們要操作這個節點獲取節點用戶的邏輯組件的時候的一個方便性。
比如：

let comp = node.getComponent(node.name);

這裏我們就可以直接獲取到腳本的邏輯組件。而不用去記住腳本的名稱

let comp = node.getComponent('xxxx名稱');

還有一個需要注意的是：一般一個場景只需要掛在一個腳本，統一處理，而不是一個場景文件掛載好幾個用戶腳本，然後一個腳本做這個，一個腳本做那個，那樣顯得冗餘，還不方便操作管理。（當然，這是鄙人自己的看法，也是自己常用的管理方式）。
包括獲取一些其他引擎的組件：

getComponent(cc.Label)

這邊的cc.Label就不需要用引號，它們算是一些全局的對象。不需要去引用。
例如：

getCOmponent(cc.Sprite)//精靈組件

2:查找某個節點

cc.find('Canvas');//返回的是一個Canvas節點
//如果輸出這個對象，其中會發現，他有幾個組件，控制檯顯示
console.log(cc.find('Canvas'));
//它有很多屬性，其中有一個
_components : [Canvas,helloworld]
這裏既可以用下方法獲取到具體的組件
cc.find('Canvas').getComponent(Canvas);
cc.find('Canvas').getComponent('helloworld');

3.控制器單例的創建

"這裏的腳本是helloworld.js"
const ctrl = require('helloworldCtrl');
cc.Class({
    extends: cc.Component,
    properties: {
        label: {
            default: null,
            type: cc.Label
        },
        // defaults, set visually when attaching this script to the Canvas
        text: 'Hello, World!'
    },
    // use this for initialization
    onLoad: function () {
        ctrl.getInstance();
        console.log('ctrl 控制器的text的值--', 
        ctrl.getInstance().getText());
        console.log('這裏更改控制器的text的值--');
        ctrl.getInstance().setText(2);
        console.log('更改後控制器的text的值--');
        console.log(ctrl.getInstance().getText());
    },
    // called every frame
    update: function (dt) {
    },
});
'這裏的腳本是helloworldCtrl.js 是一個單例'
第一種寫法：
class Ctrl {
    constructor () {
        console.log('這是一個構造函數');
        this._text = 9;
    }
    getText () {
        return this._text;
    }
    setText (value) {
        this._text = value;
    }
    static _getInstance = null;
    static getInstance () {
        if (! this._getInstance) {
            this._getInstance = new Ctrl();
        } return this._getInstance;
    }
}
module.exports = Ctrl;
第二種寫法， 也是最近剛學會的一種，稱js的原型對象：
function Ctrl () {
}
let ctrl = Ctrl.prototype, 
getInstance = null;
ctrl.setText = function (value) {
    //實現方式跟上面的代碼一樣
}
ctrl.getText = function () {
    //實現方式跟上面的代碼一樣
}
module.exports.getInstance = function () {
    if (! getInstance) {
        getInstance = new Ctrl();
    } return getInstance;
};
上面的單例只是其中的兩種寫法，還有很多種寫法。請自行百度

這裏單例是一種方式，另外還有一種是cocos creator很早期就有的，可以去我之前的博客看：全局變量與常駐節點

更多幹活：it菜鳥