上一篇,介绍了Himi在使用过cc所有组件后的一篇总结,没有具体介绍每个组件的原因在于官方文档很齐全,而且也有视频的介绍。
所以希望童鞋们可以把我这两篇博文当成对组件、脚本两部分开发的整理与总结。
后续的文章,Himi应该主要更新一些官方还未补充或者还没有的教程。避免无用功。
下面直接放出代码,因为不是很难理解。所以不再一一赘述,都是常用的函数、事件监听、动作回调、定时器等开发过程中必接触的。
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 };