【COCOS CREATOR 系列教程之二】脚本开发篇&事件监听、常用函数等示例整合

2022-03-29 11:02:34

上一篇，介绍了Himi在使用过cc所有组件后的一篇总结，没有具体介绍每个组件的原因在于官方文档很齐全，而且也有视频的介绍。

所以希望童鞋们可以把我这两篇博文当成对组件、脚本两部分开发的整理与总结。

后续的文章，Himi应该主要更新一些官方还未补充或者还没有的教程。避免无用功。

下面直接放出代码，因为不是很难理解。所以不再一一赘述，都是常用的函数、事件监听、动作回调、定时器等开发过程中必接触的。

大致内容如下：

cc 属性介绍
获取组件的几种形式
全局变量的访问
模块之间的访问
在当前节点下添加一个组件
复制节点/或者复制 prefab
销毁节点(销毁节点并不会立刻发生，而是在当前帧逻辑更新结束后，统一执行)
事件监听 on 4种形式（包括坐标获取）
关闭监听
发射事件（事件手动触发)
动作示例，类似c2dx api 基本无变化
计时器 (component)schedule (cc.Node 不包含计时器相关 API)
url raw资源获取

CC版本：0.7.1

源码下载地址: http://vdisk.weibo.com/s/yZxRoLm4Mnio3

主要两个js源码:

HelloWorld.js

cc.Class({

    extends: cc.Component,

    properties: {

        label: {

            default: null,

            type: cc.Label

        },

        text: 'Hello, World!',

        t_prefab:{

            default:null,

            type:cc.Prefab

        },

        t_sprite:{//定义一个cc的类型，并定义上常用属性

            default:null,

            type:cc.SpriteFrame,//类型的定义

            // url:cc.Texture2D, //Raw Asset(cc.Texture2D, cc.Font, cc.AudioClip) 

            visible:true,//属性检查器中是否可见

            displayName:'himi',//属性检查器中属性的名字

            tooltip:"测试脚本",//属性检查器中停留此属性名称显示的提示文字

            readonly:false,//属性检查器中显示（readonly）且不可修改[当前有bug，设定只读也能修改]

            serializable:true,//设置false就是临时变量

            editorOnly:false//导出项目前剔除此属性

        },

        t_url:{

            default:null,

            url:cc.Texture2D

        },

        t_count_2:200,//基础类型

        //可以只定义 get 方法，这样相当于一份 readonly 的属性。[当前有bug，只设定get也能修改]

        t_getSet:{

            default:12, 

            get:function(){return this.t_getSet},//get

            set:function(value){this.t_getSet =value;}//set

        },

        t_array:{//定义一个数组

            default:[],

            type:[cc.Sprite]

        }

    },

    // use this for initialization

    onLoad: function () {

        //--->>> 获取组件的几种形式:

        //1. 通过属性检查器被赋值的label组件，直接拿到得到实例

        //2. 通过属性检查器被赋值的label组件所在的node节点，然后通过getComponent获取

        // this.label.string = this.text;

        //3. 获取当前this(node)节点上的label组件

        // var _label = this.getComponent(cc.Label);

        //4. 先获取目标组件所在的节点，然后通过getComponent获取目标组件

        var _label = cc.find("Canvas/label").getComponent(cc.Label);

        //5.也可以如下形式【注意此种方式，目前有BUG，无法正常使用 (0.7.1) 】

        // var _label = cc.find("Canvas/label<cc.Label>");

        console.log(_label.string);

        console.log(this.t_getSet);

        //--->>>全局变量的访问

        /* 任意脚本中定义如下：【注意不要有var哦】

            t_global = {

                tw:100,

                th:200

            };

        */

        t_global.th = 2000;

        console.log(t_global.th);

        //--->>>模块之间的访问

        /*任意脚本中定义如下 【注意关键字是module.exports】

            module.exports= {

                tme_pa1:"100",

                tme_pa2:333221

            };

        */

        //--->>>用 require + 文件名(不含路径) 来获取到其他 模块 的对象

        var tModuleData = require("testJs");

        tModuleData.tme_pa2 = 991;

        console.log(tModuleData.tme_pa2); 

        //--->>>在当前节点下添加一个组件

        var mySprite = new cc.Node().addComponent(cc.Sprite); 

        mySprite.spriteFrame = this.t_sprite;

        mySprite.node.parent = this.node;

        mySprite.node.setPosition(300,200);

        //--->>>复制节点/或者复制 prefab

        //复制节点

        var lLabel = cc.instantiate(this.label);

        lLabel.node.parent = this.node;

        lLabel.node.setPosition(-200,0);

        //复制prefab

        var tPrefab = cc.instantiate(this.t_prefab);

        tPrefab.parent = this.node;

        tPrefab.setPosition(-210,100);

        //--->>>  销毁节点(销毁节点并不会立刻发生，而是在当前 帧逻辑更新结束后，统一执行)

        if (cc.isValid(this.label.node) ) {

            console.log("有效存在，进行摧毁");

            this.label.destroy();

        }else{

            console.log("已摧毁");

        }

        //--->>> 事件监听 on 4种形式

        //枚举类型注册

        var tFun =function (event){

          console.log("touchend event:"+event.touch.getLocation().x +"|"+event.touch.getLocation().y); 

        };

        this.node.on(cc.Node.EventType.TOUCH_END,tFun,this); 

        //事件名注册

        // var tFun =function (event){

        //   console.log("touchend event"); 

        // };

        // this.node.on("touchend",tFun);

        // this.node.on("touchend",function (event){

        //   console.log("touchend event"); 

        // });

        // this.node.on("touchend",function (event){

        //   console.log("touchend event"); 

        // },this);

        // this.node.on("touchend",function (event){

        //   console.log("touchend event"); 

        // }.bind(this));

        //--->>> 一次性的事件监听 once

        // this.node.once("touchend",function (event){

        //   console.log("touchend event"); 

        // });

        //--->>> 关闭监听

        this.node.off("touchend",tFun,this);

        //--->>> 发射事件（事件手动触发)

        this.node.on("tEmitFun",function (event){ 

            console.log("tEmitFun event:"+event.detail.himi+"|"+event.detail.say); 

            //-->>> 事件中断,如下函数阻止事件向当前父级进行事件传递

            // event.stopPropagation();

        });

        this.node.emit("tEmitFun",{himi:27,say:"hello,cc!"});

        //--->>> 动作，类似c2dx api 基本无变化

        var mTo = cc.moveBy(1,-100, -200);

        var mAction = cc.repeatForever(cc.sequence(cc.moveBy(1,-100, -200),mTo.reverse(),cc.delayTime(0.5),cc.callFunc(function(action,data){

            console.log("action callback:"+data.himi);

        },this,{tx:100,himi:"i'm action callback and bring data"})));

        mySprite.node.runAction(mAction);

        //暂停动作

        mySprite.node.stopAction(mAction);

        //--->>> 计时器 (component)schedule (cc.Node 不包含计时器相关 API)

        //参数： call funtion/interval/repeat times/delay time

        //不延迟，永久重复

        this.schedule(function(){

            console.log("schedule log...");

        },1);

        //不延迟，有重复次数限定

        // this.schedule(function(){

        //     console.log("schedule log...");

        // },1,2);

        //重复2次，重复间隔为1秒，延迟1秒进行

        // this.schedule(function(){

        //     console.log("schedule log...");

        // },1,2,1);

        //一次性的计时器

        var mySch =function(){ console.log("schedule Once log..."); }

        this.scheduleOnce(mySch);

        //取消定时器

        this.unschedule(mySch);

        //--->>> url raw资源获取

        var mSf = new cc.Node().addComponent(cc.Sprite);

        mSf.spriteFrame = this.t_sprite;

        mSf.spriteFrame.setTexture(this.t_url);

        mSf.node.setPosition(400,0);

        mSf.node.parent = this.node;

        mSf.node.setScale(0.5);

        //获得 Raw Asset 的 url

        var mUrl = cc.textureCache.addImage(cc.url.raw("himi.png"));

        console.log("raw asset url:"+mUrl);

    },

    // called every frame

    update: function (dt) {

        // if (cc.isValid(this.label.node) ) {

        //     console.log("有效存在，进行摧毁");

        // }else{

        //     console.log("已摧毁");

        // }

    },
});

testJs.js

t_global = {

    tw:100,

    th:200
};

module.exports= {

    tme_pa1:"100",

    tme_pa2:333221
};

本文转自 xiaominghimi 51CTO博客，原文链接：http://blog.51cto.com/xiaominghimi/1740512，如需转载请自行联系原作者

码农公寓

相关文章