【Cocos Creator 】(千人群): 432818031
上一篇,介绍了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 } ; |