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

前端之家收集整理的这篇文章主要介绍了【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

  1. cc.Class({
  2. extends:cc.Component,properties:{
  3. label:{
  4. default:null,type:cc.Label
  5. },text:'Hello,World!',t_prefab:{
  6. default:null,type:cc.Prefab
  7. },t_sprite:{//定义一个cc的类型,并定义上常用属性
  8. default:null,type:cc.SpriteFrame,//类型的定义
  9. //url:cc.Texture2D,//RawAsset(cc.Texture2D,cc.Font,cc.AudioClip)
  10. visible:true,//属性检查器中是否可见
  11. displayName:'himi',//属性检查器中属性的名字
  12. tooltip:"测试脚本",//属性检查器中停留此属性名称显示提示文字
  13. readonly:false,//属性检查器中显示(readonly)且不可修改[当前有bug,设定只读也能修改]
  14. serializable:true,//设置false就是临时变量
  15. editorOnly:false//导出项目前剔除此属性
  16. },t_url:{
  17. default:null,url:cc.Texture2D
  18. },t_count_2:200,//基础类型
  19.  
  20. //可以只定义get方法,这样相当于一份readonly的属性。[当前有bug,只设定get也能修改]
  21. t_getSet:{
  22. default:12,get:function(){returnthis.t_getSet},//get
  23. set:function(value){this.t_getSet=value;}//set
  24. },t_array:{//定义一个数组
  25. default:[],type:[cc.Sprite]
  26. }
  27. },//usethisforinitialization
  28. onLoad:function(){
  29.  
  30. //--->>>获取组件的几种形式:
  31. //1.通过属性检查器被赋值的label组件,直接拿到得到实例
  32. //2.通过属性检查器被赋值的label组件所在的node节点,然后通过getComponent获取
  33. //this.label.string=this.text;
  34.  
  35. //3.获取当前this(node)节点上的label组件
  36. //var_label=this.getComponent(cc.Label);
  37.  
  38. //4.先获取目标组件所在的节点,然后通过getComponent获取目标组件
  39. var_label=cc.find("Canvas/label").getComponent(cc.Label);
  40.  
  41. //5.也可以如下形式【注意此种方式,目前有BUG,无法正常使用(0.7.1)】
  42. //var_label=cc.find("Canvas/label<cc.Label>");
  43.  
  44. console.log(_label.string);
  45. console.log(this.t_getSet);
  46.  
  47. //--->>>全局变量的访问
  48. /*任意脚本中定义如下:【注意不要有var哦】
  49.  
  50. t_global={
  51. tw:100,th:200
  52. };
  53.  
  54. */
  55. t_global.th=2000;
  56. console.log(t_global.th);
  57.  
  58. //--->>>模块之间的访问
  59. /*任意脚本中定义如下【注意关键字是module.exports】
  60.  
  61. module.exports={
  62. tme_pa1:"100",tme_pa2:333221
  63. };
  64.  
  65. */
  66. //--->>>用require+文件名(不含路径)来获取到其他模块的对象
  67. vartModuleData=require("testJs");
  68. tModuleData.tme_pa2=991;
  69. console.log(tModuleData.tme_pa2);
  70.  
  71.  
  72. //--->>>在当前节点下添加一个组件
  73. varmySprite=newcc.Node().addComponent(cc.Sprite);
  74. mySprite.spriteFrame=this.t_sprite;
  75. mySprite.node.parent=this.node;
  76. mySprite.node.setPosition(300,200);
  77.  
  78.  
  79. //--->>>复制节点/或者复制prefab
  80. //复制节点
  81. varlLabel=cc.instantiate(this.label);
  82. lLabel.node.parent=this.node;
  83. lLabel.node.setPosition(-200,0);
  84. //复制prefab
  85. vartPrefab=cc.instantiate(this.t_prefab);
  86. tPrefab.parent=this.node;
  87. tPrefab.setPosition(-210,100);
  88.  
  89.  
  90. //--->>>销毁节点(销毁节点并不会立刻发生,而是在当前帧逻辑更新结束后,统一执行)
  91. if(cc.isValid(this.label.node)){
  92. console.log("有效存在,进行摧毁");
  93. this.label.destroy();
  94. }else{
  95. console.log("已摧毁");
  96. }
  97.  
  98. //--->>>事件监听on4种形式
  99. //枚举类型注册
  100. vartFun=function(event){
  101. console.log("touchendevent:"+event.touch.getLocation().x+"|"+event.touch.getLocation().y);
  102. };
  103. this.node.on(cc.Node.EventType.TOUCH_END,tFun,this);
  104.  
  105. //事件名注册
  106. //vartFun=function(event){
  107. //console.log("touchendevent");
  108. //};
  109. //this.node.on("touchend",tFun);
  110.  
  111. //this.node.on("touchend",function(event){
  112. //console.log("touchendevent");
  113. //});
  114.  
  115. //this.node.on("touchend",function(event){
  116. //console.log("touchendevent");
  117. //},this);
  118.  
  119. //this.node.on("touchend",function(event){
  120. //console.log("touchendevent");
  121. //}.bind(this));
  122.  
  123. //--->>>一次性的事件监听once
  124. //this.node.once("touchend",function(event){
  125. //console.log("touchendevent");
  126. //});
  127.  
  128.  
  129. //--->>>关闭监听
  130. this.node.off("touchend",this);
  131.  
  132.  
  133. //--->>>发射事件(事件手动触发)
  134. this.node.on("tEmitFun",function(event){
  135. console.log("tEmitFunevent:"+event.detail.himi+"|"+event.detail.say);
  136.  
  137. //-->>>事件中断,如下函数阻止事件向当前父级进行事件传递
  138. //event.stopPropagation();
  139. });
  140. this.node.emit("tEmitFun",{himi:27,say:"hello,cc!"});
  141.  
  142.  
  143. //--->>>动作,类似c2dxapi基本无变化
  144. varmTo=cc.moveBy(1,-100,-200);
  145. varmAction=cc.repeatForever(cc.sequence(cc.moveBy(1,-200),mTo.reverse(),cc.delayTime(0.5),cc.callFunc(function(action,data){
  146. console.log("actioncallback:"+data.himi);
  147. },this,{tx:100,himi:"i'mactioncallbackandbringdata"})));
  148. mySprite.node.runAction(mAction);
  149. //暂停动作
  150. mySprite.node.stopAction(mAction);
  151.  
  152.  
  153. //--->>>计时器(component)schedule(cc.Node不包含计时器相关API)
  154. //参数:callfuntion/interval/repeattimes/delaytime
  155. //不延迟,永久重复
  156. this.schedule(function(){
  157. console.log("schedulelog...");
  158. },1);
  159.  
  160. //不延迟,有重复次数限定
  161. //this.schedule(function(){
  162. //console.log("schedulelog...");
  163. //},1,2);
  164.  
  165. //重复2次,重复间隔为1秒,延迟1秒进行
  166. //this.schedule(function(){
  167. //console.log("schedulelog...");
  168. //},2,1);
  169.  
  170. //一次性的计时器
  171. varmySch=function(){console.log("scheduleOncelog...");}
  172. this.scheduleOnce(mySch);
  173.  
  174. //取消定时器
  175. this.unschedule(mySch);
  176.  
  177.  
  178. //--->>>urlraw资源获取
  179. varmSf=newcc.Node().addComponent(cc.Sprite);
  180. mSf.spriteFrame=this.t_sprite;
  181. mSf.spriteFrame.setTexture(this.t_url);
  182. mSf.node.setPosition(400,0);
  183. mSf.node.parent=this.node;
  184. mSf.node.setScale(0.5);
  185.  
  186. //获得RawAsset的url
  187. varmUrl=cc.textureCache.addImage(cc.url.raw("himi.png"));
  188. console.log("rawasseturl:"+mUrl);
  189.  
  190.  
  191. },//calledeveryframe
  192. update:function(dt){
  193. //if(cc.isValid(this.label.node)){
  194. //console.log("有效存在,进行摧毁");
  195. //}else{
  196. //console.log("已摧毁");
  197. //}
  198. },});

testJs.js

  1. t_global={
  2. tw:100,th:200
  3. };
  4.  
  5. module.exports={
  6. tme_pa1:"100",tme_pa2:333221
  7. };

猜你在找的Cocos2d-x相关文章