本站文章均為?李華明Himi?原創,轉載務必在明顯處注明：?
轉載自【黑米GameDev街區】 原文鏈接:?http://www.himigame.com/cocos-creator/1959.html

【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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225

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

1 2 3 4 5 6 7 8 9

t_global = { ????tw:100, ????th:200 }; module.exports= { ????tme_pa1:"100", ????tme_pa2:333221 };

?

總結

以上是生活随笔為你收集整理的【COCOS CREATOR 系列教程之二】脚本开发篇事件监听、常用函数等示例整合的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。