【cocos creator 】(千人群):432818031
上一篇,介紹了himi在使用過cc所有元件後的一篇總結,沒有具體介紹每個元件的原因在于官方文檔很齊全,而且也有視訊的介紹。
是以希望童鞋們可以把我這兩篇博文當成對元件、腳本兩部分開發的整理與總結。
後續的文章,himi應該主要更新一些官方還未補充或者還沒有的教程。避免無用功。
下面直接放出代碼,因為不是很難了解。是以不再一一贅述,都是常用的函數、事件監聽、動作回調、定時器等開發過程中必接觸的。
大緻内容如下:
cc 屬性介紹
擷取元件的幾種形式
全局變量的通路
子產品之間的通路
在目前節點下添加一個元件
複制節點/或者複制 prefab
銷毀節點(銷毀節點并不會立刻發生,而是在目前 幀邏輯更新結束後,統一執行)
事件監聽 on 4種形式(包括坐标擷取)
關閉監聽
發射事件(事件手動觸發)
動作示例,類似c2dx api 基本無變化
計時器 (component)schedule (cc.node 不包含計時器相關 api)
url raw資源擷取
cc版本:0.7.1
主要兩個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的類型,并定義上常用屬性
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:{
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){
// });
// },this);
// }.bind(this));
//--->>> 一次性的事件監聽 once
// this.node.once("touchend",function (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秒進行
// },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