【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 }; |
