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

Posted 2020-06-13

【Cocos Creator 】(千人群):  432818031

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

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

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

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

大致内容如下：

1. cc 属性介绍

2. 获取组件的几种形式

3. 全局变量的访问

4. 模块之间的访问

5. 在当前节点下添加一个组件

6. 复制节点/或者复制 prefab

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

8. 事件监听 on 4种形式（包括坐标获取）

9. 关闭监听

10. 发射事件（事件手动触发)

11. 动作示例，类似c2dx api 基本无变化

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

13. 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
};

本文出自 “李华明Himi” 博客，请务必保留此出处http://xiaominghimi.blog.51cto.com/2614927/1740512