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

上一篇，介绍了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

<code>cc.Class({</code>

<code>    </code><code>extends: cc.Component,</code>

<code> </code> 

<code>    </code><code>properties: {</code>

<code>        </code><code>label: {</code>

<code>            </code><code>default</code><code>: </code><code>null</code><code>,</code>

<code>            </code><code>type: cc.Label</code>

<code>        </code><code>},</code>

<code>        </code><code>text: </code><code>'Hello, World!'</code><code>,</code>

<code>        </code> 

<code>        </code><code>t_prefab:{</code>

<code>            </code><code>default</code><code>:</code><code>null</code><code>,</code>

<code>            </code><code>type:cc.Prefab</code>

<code>        </code><code>t_sprite:{</code><code>//定义一个cc的类型，并定义上常用属性</code>

<code>            </code><code>type:cc.SpriteFrame,</code><code>//类型的定义</code>

<code>            </code><code>// url:cc.Texture2D, //Raw Asset(cc.Texture2D, cc.Font, cc.AudioClip) </code>

<code>            </code><code>visible:</code><code>true</code><code>,</code><code>//属性检查器中是否可见</code>

<code>            </code><code>displayName:</code><code>'himi'</code><code>,</code><code>//属性检查器中属性的名字</code>

<code>            </code><code>tooltip:</code><code>"测试脚本"</code><code>,</code><code>//属性检查器中停留此属性名称显示的提示文字</code>

<code>            </code><code>readonly:</code><code>false</code><code>,</code><code>//属性检查器中显示（readonly）且不可修改[当前有bug，设定只读也能修改]</code>

<code>            </code><code>serializable:</code><code>true</code><code>,</code><code>//设置false就是临时变量</code>

<code>            </code><code>editorOnly:</code><code>false</code><code>//导出项目前剔除此属性</code>

<code>        </code><code>t_url:{</code>

<code>            </code><code>url:cc.Texture2D</code>

<code>        </code><code>t_count_2:200,</code><code>//基础类型</code>

<code>        </code><code>//可以只定义 get 方法，这样相当于一份 readonly 的属性。[当前有bug，只设定get也能修改]</code>

<code>        </code><code>t_getSet:{</code>

<code>            </code><code>default</code><code>:12, </code>

<code>            </code><code>get:</code><code>function</code><code>(){</code><code>return</code> <code>this</code><code>.t_getSet},</code><code>//get</code>

<code>            </code><code>set:</code><code>function</code><code>(value){</code><code>this</code><code>.t_getSet =value;}</code><code>//set</code>

<code>            </code> 

<code>        </code><code>t_array:{</code><code>//定义一个数组</code>

<code>            </code><code>default</code><code>:[],</code>

<code>            </code><code>type:[cc.Sprite]</code>

<code>        </code><code>}</code>

<code>    </code><code>},</code>

<code>    </code><code>// use this for initialization</code>

<code>    </code><code>onLoad: </code><code>function</code> <code>() {</code>

<code>        </code><code>//---&gt;&gt;&gt; 获取组件的几种形式:</code>

<code>        </code><code>//1. 通过属性检查器被赋值的label组件，直接拿到得到实例</code>

<code>        </code><code>//2. 通过属性检查器被赋值的label组件所在的node节点，然后通过getComponent获取</code>

<code>        </code><code>// this.label.string = this.text;</code>

<code>        </code><code>//3. 获取当前this(node)节点上的label组件</code>

<code>        </code><code>// var _label = this.getComponent(cc.Label);</code>

<code>        </code><code>//4. 先获取目标组件所在的节点，然后通过getComponent获取目标组件</code>

<code>        </code><code>var</code> <code>_label = cc.find(</code><code>"Canvas/label"</code><code>).getComponent(cc.Label);</code>

<code>        </code><code>//5.也可以如下形式【注意此种方式，目前有BUG，无法正常使用 (0.7.1) 】</code>

<code>        </code><code>// var _label = cc.find("Canvas/label&lt;cc.Label&gt;");</code>

<code>        </code><code>console.log(_label.string);</code>

<code>        </code><code>console.log(</code><code>this</code><code>.t_getSet);</code>

<code>        </code><code>//---&gt;&gt;&gt;全局变量的访问</code>

<code>        </code><code>/* 任意脚本中定义如下：【注意不要有var哦】</code>

<code>            </code><code>t_global = {</code>

<code>                </code><code>tw:100,</code>

<code>                </code><code>th:200</code>

<code>            </code><code>};</code>

<code>        </code><code>*/</code>

<code>        </code><code>t_global.th = 2000;</code>

<code>        </code><code>console.log(t_global.th);</code>

<code>        </code><code>//---&gt;&gt;&gt;模块之间的访问</code>

<code>        </code><code>/*任意脚本中定义如下 【注意关键字是module.exports】</code>

<code>            </code><code>module.exports= {</code>

<code>                </code><code>tme_pa1:"100",</code>

<code>                </code><code>tme_pa2:333221</code>

<code>        </code><code>//---&gt;&gt;&gt;用 require + 文件名(不含路径) 来获取到其他 模块 的对象</code>

<code>        </code><code>var</code> <code>tModuleData = require(</code><code>"testJs"</code><code>);</code>

<code>        </code><code>tModuleData.tme_pa2 = 991;</code>

<code>        </code><code>console.log(tModuleData.tme_pa2); </code>

<code>        </code><code>//---&gt;&gt;&gt;在当前节点下添加一个组件</code>

<code>        </code><code>var</code> <code>mySprite = </code><code>new</code> <code>cc.Node().addComponent(cc.Sprite); </code>

<code>        </code><code>mySprite.spriteFrame = </code><code>this</code><code>.t_sprite;</code>

<code>        </code><code>mySprite.node.parent = </code><code>this</code><code>.node;</code>

<code>        </code><code>mySprite.node.setPosition(300,200);</code>

<code>        </code><code>//---&gt;&gt;&gt;复制节点/或者复制 prefab</code>

<code>        </code><code>//复制节点</code>

<code>        </code><code>var</code> <code>lLabel = cc.instantiate(</code><code>this</code><code>.label);</code>

<code>        </code><code>lLabel.node.parent = </code><code>this</code><code>.node;</code>

<code>        </code><code>lLabel.node.setPosition(-200,0);</code>

<code>        </code><code>//复制prefab</code>

<code>        </code><code>var</code> <code>tPrefab = cc.instantiate(</code><code>this</code><code>.t_prefab);</code>

<code>        </code><code>tPrefab.parent = </code><code>this</code><code>.node;</code>

<code>        </code><code>tPrefab.setPosition(-210,100);</code>

<code>        </code><code>//---&gt;&gt;&gt;  销毁节点(销毁节点并不会立刻发生，而是在当前 帧逻辑更新结束后，统一执行)</code>

<code>        </code><code>if</code> <code>(cc.isValid(</code><code>this</code><code>.label.node) ) {</code>

<code>            </code><code>console.log(</code><code>"有效存在，进行摧毁"</code><code>);</code>

<code>            </code><code>this</code><code>.label.destroy();</code>

<code>        </code><code>}</code><code>else</code><code>{</code>

<code>            </code><code>console.log(</code><code>"已摧毁"</code><code>);</code>

<code>        </code><code>//---&gt;&gt;&gt; 事件监听 on 4种形式</code>

<code>        </code><code>//枚举类型注册</code>

<code>        </code><code>var</code> <code>tFun =</code><code>function</code> <code>(event){</code>

<code>          </code><code>console.log(</code><code>"touchend event:"</code><code>+event.touch.getLocation().x +</code><code>"|"</code><code>+event.touch.getLocation().y); </code>

<code>        </code><code>};</code>

<code>        </code><code>this</code><code>.node.on(cc.Node.EventType.TOUCH_END,tFun,</code><code>this</code><code>); </code>

<code>        </code><code>//事件名注册</code>

<code>        </code><code>// var tFun =function (event){</code>

<code>        </code><code>//   console.log("touchend event"); </code>

<code>        </code><code>// };</code>

<code>        </code><code>// this.node.on("touchend",tFun);</code>

<code>        </code><code>// this.node.on("touchend",function (event){</code>

<code>        </code><code>// });</code>

<code>        </code><code>// },this);</code>

<code>        </code><code>// }.bind(this));</code>

<code>        </code><code>//---&gt;&gt;&gt; 一次性的事件监听 once</code>

<code>        </code><code>// this.node.once("touchend",function (event){</code>

<code>        </code><code>//---&gt;&gt;&gt; 关闭监听</code>

<code>        </code><code>this</code><code>.node.off(</code><code>"touchend"</code><code>,tFun,</code><code>this</code><code>);</code>

<code>        </code><code>//---&gt;&gt;&gt; 发射事件（事件手动触发)</code>

<code>        </code><code>this</code><code>.node.on(</code><code>"tEmitFun"</code><code>,</code><code>function</code> <code>(event){ </code>

<code>            </code><code>console.log(</code><code>"tEmitFun event:"</code><code>+event.detail.himi+</code><code>"|"</code><code>+event.detail.say); </code>

<code>            </code><code>//--&gt;&gt;&gt; 事件中断,如下函数阻止事件向当前父级进行事件传递</code>

<code>            </code><code>// event.stopPropagation();</code>

<code>        </code><code>});</code>

<code>        </code><code>this</code><code>.node.emit(</code><code>"tEmitFun"</code><code>,{himi:27,say:</code><code>"hello,cc!"</code><code>});</code>

<code>        </code><code>//---&gt;&gt;&gt; 动作，类似c2dx api 基本无变化</code>

<code>        </code><code>var</code> <code>mTo = cc.moveBy(1,-100, -200);</code>

<code>        </code><code>var</code> <code>mAction = cc.repeatForever(cc.sequence(cc.moveBy(1,-100, -200),mTo.reverse(),cc.delayTime(0.5),cc.callFunc(</code><code>function</code><code>(action,data){</code>

<code>            </code><code>console.log(</code><code>"action callback:"</code><code>+data.himi);</code>

<code>        </code><code>},</code><code>this</code><code>,{tx:100,himi:</code><code>"i'm action callback and bring data"</code><code>})));</code>

<code>        </code><code>mySprite.node.runAction(mAction);</code>

<code>        </code><code>//暂停动作</code>

<code>        </code><code>mySprite.node.stopAction(mAction);</code>

<code>        </code><code>//---&gt;&gt;&gt; 计时器 (component)schedule (cc.Node 不包含计时器相关 API)</code>

<code>        </code><code>//参数： call funtion/interval/repeat times/delay time</code>

<code>        </code><code>//不延迟，永久重复</code>

<code>        </code><code>this</code><code>.schedule(</code><code>function</code><code>(){</code>

<code>            </code><code>console.log(</code><code>"schedule log..."</code><code>);</code>

<code>        </code><code>},1);</code>

<code>        </code><code>//不延迟，有重复次数限定</code>

<code>        </code><code>// this.schedule(function(){</code>

<code>        </code><code>//     console.log("schedule log...");</code>

<code>        </code><code>// },1,2);</code>

<code>        </code><code>//重复2次，重复间隔为1秒，延迟1秒进行</code>

<code>        </code><code>// },1,2,1);</code>

<code>        </code><code>//一次性的计时器</code>

<code>        </code><code>var</code> <code>mySch =</code><code>function</code><code>(){ console.log(</code><code>"schedule Once log..."</code><code>); }</code>

<code>        </code><code>this</code><code>.scheduleOnce(mySch);</code>

<code>        </code><code>//取消定时器</code>

<code>        </code><code>this</code><code>.unschedule(mySch);</code>

<code>        </code><code>//---&gt;&gt;&gt; url raw资源获取</code>

<code>        </code><code>var</code> <code>mSf = </code><code>new</code> <code>cc.Node().addComponent(cc.Sprite);</code>

<code>        </code><code>mSf.spriteFrame = </code><code>this</code><code>.t_sprite;</code>

<code>        </code><code>mSf.spriteFrame.setTexture(</code><code>this</code><code>.t_url);</code>

<code>        </code><code>mSf.node.setPosition(400,0);</code>

<code>        </code><code>mSf.node.parent = </code><code>this</code><code>.node;</code>

<code>        </code><code>mSf.node.setScale(0.5);</code>

<code>        </code><code>//获得 Raw Asset 的 url</code>

<code>        </code><code>var</code> <code>mUrl = cc.textureCache.addImage(cc.url.raw(</code><code>"himi.png"</code><code>));</code>

<code>        </code><code>console.log(</code><code>"raw asset url:"</code><code>+mUrl);</code>

<code>      </code> 

<code>    </code><code>// called every frame</code>

<code>    </code><code>update: </code><code>function</code> <code>(dt) {</code>

<code>        </code><code>// if (cc.isValid(this.label.node) ) {</code>

<code>        </code><code>//     console.log("有效存在，进行摧毁");</code>

<code>        </code><code>// }else{</code>

<code>        </code><code>//     console.log("已摧毁");</code>

<code>        </code><code>// }</code>

<code>});</code>

testJs.js

<code>t_global = {</code>

<code>    </code><code>tw:100,</code>

<code>    </code><code>th:200</code>

<code>};</code>

<code>module.exports= {</code>

<code>    </code><code>tme_pa1:</code><code>"100"</code><code>,</code>

<code>    </code><code>tme_pa2:333221</code>

本文转自 xiaominghimi 51CTO博客，原文链接：http://blog.51cto.com/xiaominghimi/1740512，如需转载请自行联系原作者