转载

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

【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

JavaScript

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("已摧毁");     // } },

});

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 };
t_global = {     tw:100,     th:200 };   module.exports= {     tme_pa1:"100",     tme_pa2:333221 }; 
原文  http://www.himigame.com/cocos-creator/1959.html
正文到此结束
Loading...