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菜鸟