Cocos Creator之脚本语言讲解

image.png

创建脚本

脚本的创建比较简单。

在资源管理器窗口中点击鼠标右键，显示菜单中点击新建，选择新建的脚本类型，这里举例就选择菜单中的JavaScript，或者如下图点击创建按钮也可。

image.png

新创建的脚本内容如下：

cc.Class({
    extends: cc.Component,

    properties: {
    },

    // use this for initialization
    onLoad: function () {
    },

    // called every frame, uncomment this function to activate update callback
    update: function (dt) {
    },
});

自定义格式可以在Cocos Creator安装的目录下的resources文件夹--->static文件夹--->template文件夹--->new-script.js文件，打开此文件进行修改你想要的格式，更改后保存，下次在编辑器中在重新创建脚本时就会自动生成你定义的模板格式。

编辑脚本

Cocos Creator中内置了一个轻量级的"Code Editor"供用户进行快速的脚本编辑，但不能提供智能提示和原型跳转等方便的功能，建议用"VS Code"进行脚本编辑。

通过·双击脚本资源·可以直接打开内置的"Code Editor"编辑，如果用户需要使用外部工具，请到菜单"Cocos Creator"-->"偏好设置"中进行设置，如下图:

image.png

类介绍

cc.Class 是一个很常用的 API，用于声明 Cocos Creator 中的类，为了方便区分，我们把使用 cc.Class 声明的类叫做 CCClass。

定义 CCClass

调用 cc.Class，传入一个原型对象，在原型对象中以键值对的形式设定所需的类型参数，就能创建出所需要的类。
例如：

var Sprite = cc.Class({
    name: "sprite"
});

以上代码用 cc.Class 创建了一个类型，并且赋给了 Sprite 变量。同时还将类名设为 "sprite"，类名用于序列化，一般可以省略。

上面是定义，接下来我们就可以创建对象了。

创建对象

Sprite 变量保存的是一个 JavaScript 构造函数，可以直接 new 出一个对象：

var obj = new Sprite();

构造函数

使用 ctor 声明构造函数：

var Sprite = cc.Class({
    ctor: function () {
        cc.log(this instanceof Sprite);    // true
    }
});

创建方法

var Sprite = cc.Class({
    // 声明一个名叫 "print" 的实例方法
    print: function () { }
});

继承

使用 extends 实现继承：

// 父类
var Shape = cc.Class();

// 子类
var Rect = cc.Class({
    extends: Shape
});

声明属性

通过在组件脚本中声明属性，我们可以将脚本组件中的字段可视化地展示在属性检查器 中，从而方便地在场景中调整属性值。

要声明属性，仅需要在 cc.Class 定义的 properties 字段中，填写属性名字和属性参数即可，如：

cc.Class({
    extends: cc.Component,
    properties: {
        userID: 20,
        userName: "Foobar"
    }
});

这时候，在 属性检查器中看到刚刚定义的两个属性：

image.png

更多使用方式参考：http://docs.cocos.com/creator/manual/zh/scripting/class.html

image.png