0
点赞
收藏
分享

微信扫一扫

【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



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


} ;


 


举报

相关推荐

0 条评论