三，cocos creator 脚本编辑

原创已于 2024-10-27 17:49:18 修改 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#cocos2d

于 2024-10-27 16:00:06 首次发布

前端专栏收录该内容

4 篇文章

订阅专栏

创建和使用脚本组件

脚本组件一般是JavaScript或者TypeScript编写，必须挂载到节点上才能生效

关于cc.Class 在这里插入图片描述

1 创建JavaScript文件say-hello.js，编写内容
在这里插入图片描述
2 挂载到节点上面

3 运行结果

使用cc.Class声明类型

在这里插入图片描述

自定义cc.Class

自定义cc.Class代码say-hello.js


let Sprite = cc.Class({
    name:"sprite"
});
cc.Class({                         //创建组件对象
    extends: cc.Component,

    properties: {                  //可编辑变量
    },

    // LIFE-CYCLE CALLBACKS:

    start () {    //游戏启动时调用

        cc.log("hello word")
        let sprite =new Sprite();
        cc.log(sprite);

        cc.log(sprite instanceof Sprite);

    },

    // update (dt) {},
});

运行结果
在这里插入图片描述

自定义cc.Class实例化和继承

实例方法的定义和调用

在这里插入图片描述

// Learn cc.Class:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/life-cycle-callbacks.html


let Sprite = cc.Class({
    name:"sprite",

    //  实例 Sprite 的  print方法的定义
    print : function(){
        cc.log("print function！");
    }
});


cc.Class({                         //创建组件对象
    extends: cc.Component,

    properties: {                  //可编辑变量
    },

    // LIFE-CYCLE CALLBACKS:

    start () {    //游戏启动时调用

        cc.log("hello word")
        let sprite =new Sprite();
        cc.log(sprite);

        cc.log(sprite instanceof Sprite);

        //实例 Sprite 的  print方法的调用
        sprite.print();

    },

    // update (dt) {},
});

运行结果
在这里插入图片描述

实例方法的继承extend

在这里插入图片描述

// Learn cc.Class:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/life-cycle-callbacks.html



// 父类
let Sprite = cc.Class({
    name:"sprite",

    //  实例 Sprite 的  print方法的定义
    print : function(){
        cc.log("print function！");
    }
});

//子类
let SpriteSon = cc.Class({
    extends:Sprite
});


cc.Class({                         //创建组件对象
    extends: cc.Component,

    properties: {                  //可编辑变量
    },

    // LIFE-CYCLE CALLBACKS:

    start () {    //游戏启动时调用

        cc.log("hello word")
        let sprite =new Sprite();
        cc.log(sprite);

        cc.log(sprite instanceof Sprite);

        //实例 Sprite 的  print方法的调用
        sprite.print();

        //实例化子类，并调用继承父类中的print方法
        let spriteSon = new SpriteSon()
        spriteSon.print();

    },

    // update (dt) {},
});

在这里插入图片描述

声明自定义属性properties

简单声明

在这里插入图片描述
定义的属性保存后都会直接展示，只是首字母统一大写

cc.Class({                         //创建组件对象
    extends: cc.Component,

    properties: {                  //可编辑变量
        height:20,
        type:"actor",
        loaded:false,
        // target:null,
        target:cc.Node,

    },

    // LIFE-CYCLE CALLBACKS:

    start () {    //游戏启动时调用
    },

    // update (dt) {},
});

也可以定义节点 cc.node 关联其他节点，将其他节点直接拖拽到Target中即可
在这里插入图片描述

数组类型

在这里插入图片描述
代码

cc.Class({                         //创建组件对象
    extends: cc.Component,

    properties: {                  //可编辑变量
        height:20,
        type:[cc.String],
        loaded:[cc.Boolean],  // boolean
        target:[cc.Node],

    },

    // LIFE-CYCLE CALLBACKS:

    start () {    //游戏启动时调用

    },

    // update (dt) {},
});

如果不能同步实现，需要移除组件重新绑定
在这里插入图片描述

完整声明

基本类型

在这里插入图片描述
代码

cc.Class({                         //创建组件对象
    extends: cc.Component,

    properties: {                  //可编辑变量
        score:{
            default:null,
            type:cc.Node,
            displayName:"得分",
            tooltip:"描述得分数",
            // visible:false,         //隐藏面板，属性不在面板显示

        }

    },

    start () {    //游戏启动时调用

    },

    // update (dt) {},
});

在这里插入图片描述

数组类型

在这里插入图片描述


cc.Class({                         //创建组件对象
    extends: cc.Component,

    properties: {                  //可编辑变量
        names :{
            default:[],
            type: [cc.Node],

        }

    },

    // LIFE-CYCLE CALLBACKS:

    start () {    //游戏启动时调用

    },

    // update (dt) {},
});

在这里插入图片描述

脚本生命周期回调函数

在这里插入图片描述

onload&onenable&start

onload最先加载，其次onenable，最后start；但是onenable，start 必须节点开启才会加载执行，否则不执行
在这里插入图片描述

在这里插入图片描述

// Learn cc.Class:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/life-cycle-callbacks.html


/*
// 父类
let Sprite = cc.Class({
    name:"sprite",

    //  实例 Sprite 的  print方法的定义
    print : function(){
        cc.log("print function！");
    }
});

//子类
let SpriteSon = cc.Class({
    extends:Sprite
});

*/


cc.Class({                         //创建组件对象
    extends: cc.Component,

    properties: {                  //可编辑变量
        // height:20,
        // type:[cc.String],
        // loaded:[cc.Boolean],  // boolean
        // target:[cc.Node],
        score:{
            default:null,
            type:cc.Node,
            displayName:"得分",
            tooltip:"描述得分数",
            visible:false,         //隐藏面板，属性不在面板显示

        },

        names :{
            default:[],
            type: [cc.Node],

        }

    },

    // LIFE-CYCLE CALLBACKS:
    onLoad(){
        cc.log("onLoad......")

    },

    onEnable(){
        cc.log("onEnable.......")

    },

    start () {    //游戏启动时调用
        cc.log("start.......")

    },

    // update (dt) {},
});

update&onupdate

update 帧操作
在这里插入图片描述
上升


    update (dt) {
        cc.log(dt)
        this.node.y+=1;

    },

在这里插入图片描述

上升同时旋转
在这里插入图片描述

    update (dt) {
        // cc.log(dt)
        cc.log("update....");
        this.node.y+=1;

    },

    lateUpdate(dt){
        cc.log("lateUpdate....");
        this.node.rotation +=20;
    }

注意，开发过程中不要打印日志，很影响性能

在这里插入图片描述

在这里插入图片描述
onDisable关闭节点时调用

cc.Class({                         //创建组件对象
    extends: cc.Component,

    properties: {                  //可编辑变量
        // height:20,
        // type:[cc.String],
        // loaded:[cc.Boolean],  // boolean
        // target:[cc.Node],
        score:{
            default:null,
            type:cc.Node,
            displayName:"得分",
            tooltip:"描述得分数",
            visible:false,         //隐藏面板，属性不在面板显示

        },

        names :{
            default:[],
            type: [cc.Node],

        }

    },

    // LIFE-CYCLE CALLBACKS:
    onLoad(){
        cc.log("onLoad......")

    },

    onEnable(){
        cc.log("onEnable.......")

    },

    start () {    //游戏启动时调用

        cc.log("start.......")
        //关闭节点
        this.node.active=false;
    },

    onDisable(){
        cc.log("onDisable..........");
    }

});

onDestroy销毁节点时调用
注意，销毁节点前是先关闭再销毁，所以onDisable也会出现在onDestroy前面

cc.Class({                         //创建组件对象
    extends: cc.Component,

    properties: {                  //可编辑变量
        // height:20,
        // type:[cc.String],
        // loaded:[cc.Boolean],  // boolean
        // target:[cc.Node],
        score:{
            default:null,
            type:cc.Node,
            displayName:"得分",
            tooltip:"描述得分数",
            visible:false,         //隐藏面板，属性不在面板显示

        },

        names :{
            default:[],
            type: [cc.Node],

        }

    },

    // LIFE-CYCLE CALLBACKS:
    onLoad(){
        cc.log("onLoad......")

    },

    onEnable(){
        cc.log("onEnable.......")

    },

    start () {    //游戏启动时调用

        cc.log("start.......")

        //销毁节点
        this.node.destroy();

    },


    onDisable(){
        cc.log("onDisable..........");
    },

    onDestroy(){
        cc.log("onDestroy...........")

    }
});