forked from u0u0/Quick-Cocos2dx-Community
-
Notifications
You must be signed in to change notification settings - Fork 0
/
zh.html
322 lines (249 loc) · 18.2 KB
/
zh.html
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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>quick 中的事件</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html,body{color:black}*:not('#mkdbuttons'){margin:0;padding:0}#wrapper{font:16px helvetica,arial,freesans,clean,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6;padding:3px;background:#fff;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border:solid 1px #dddddd !important;color:#333}p{margin:1em 0}a{color:#4183c4;text-decoration:none}#wrapper{background-color:#fff;padding:30px;margin:15px;font-size:16px;line-height:1.6}#wrapper>*:first-child{margin-top:0 !important}#wrapper>*:last-child{margin-bottom:0 !important}@media screen{#wrapper{border:solid 1px #ddd}}h1,h2,h3,h4,h5,h6{position:relative;margin-top:1em;margin-bottom:16px;font-weight:700;line-height:1.4;color:#333}h1{padding-bottom:.3em;font-size:2.25em;line-height:1.2;border-bottom:1px solid #eee}h2{padding-bottom:0.3em;font-size:1.75em;line-height:1.225;border-bottom:1px solid #eee}h3{font-size:1.5em;line-height:1.43}h4{font-size:1.25em}h5{font-size:1em}h6{color:#777;font-size:1em}p,blockquote,ul,ol,dl,table,pre{margin-top:0;margin-bottom:16px}hr{height:4px;padding:0;margin:16px 0;background-color:#e7e7e7;border:0 none}ul,ol{padding-left:2em}ul.no-list,ol.no-list{padding:0;list-style-type:none}ul ul,ul ol{margin-top:0;margin-bottom:0}ol ol,ol ul{margin-top:0;margin-bottom:0}li>p{margin-top:16px}dl{padding:0}dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}dl dd{padding:0 16px;margin-bottom:16px}blockquote{padding:0 15px;margin-left:0;color:#777;border-left:4px solid #ddd}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}table{display:block;width:100%;overflow:auto}table th{font-weight:700;padding:6px 13px;border:1px solid #ddd}table td{padding:6px 13px;border:1px solid #ddd}table tr{background-color:#fff;border-top:1px solid #ccc}table tr:nth-child(2n){background-color:#f8f8f8}img{max-width:100%;-moz-box-sizing:border-box;box-sizing:border-box}span.frame{display:block;overflow:hidden}span.frame>span{display:block;float:left;width:auto;padding:7px;margin:13px 0 0;overflow:hidden;border:1px solid #ddd}span.frame span img{display:block;float:left}span.frame span span{display:block;padding:5px 0 0;clear:both;color:#333}span.align-center{display:block;overflow:hidden;clear:both}span.align-center>span{display:block;margin:13px auto 0;overflow:hidden;text-align:center}span.align-center span img{margin:0 auto;text-align:center}span.align-right{display:block;overflow:hidden;clear:both}span.align-right>span{display:block;margin:13px 0 0;overflow:hidden;text-align:right}span.align-right span img{margin:0;text-align:right}span.float-left{display:block;float:left;margin-right:13px;overflow:hidden}span.float-left span{margin:13px 0 0}span.float-right{display:block;float:right;margin-left:13px;overflow:hidden}span.float-right>span{display:block;margin:13px auto 0;overflow:hidden;text-align:right}code,tt{padding:0;padding-top:.2em;padding-bottom:.2em;margin:0;font-size:85%;background-color:rgba(0,0,0,0.04);border-radius:3px}code:before,code:after{letter-spacing:-.2em;content:"\00a0"}tt:before,tt:after{letter-spacing:-.2em;content:"\00a0"}code br,tt br{display:none}del code{text-decoration:inherit;vertical-align:text-top}pre>code{padding:0;margin:0;font-size:100%;white-space:pre;background:transparent;border:0}.highlight{margin-bottom:16px}.highlight pre{padding:16px;margin-bottom:0;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}pre{padding:16px;margin-bottom:0;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px;word-wrap:normal}pre code,pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}pre code:before,pre code:after{content:normal}pre tt:before,pre tt:after{content:normal}.poetry pre{font-family:Georgia, Garamond, serif !important;font-style:italic;font-size:110% !important;line-height:1.6em;display:block;margin-left:1em}.poetry pre code{font-family:Georgia, Garamond, serif !important;word-break:break-all;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto;white-space:pre-wrap}sup,sub,a.footnote{font-size:1.4ex;height:0;line-height:1;vertical-align:super;position:relative}sub{vertical-align:sub;top:-1px}@media print{body{background:#fff}img,table,figure{page-break-inside:avoid}#wrapper{background:#fff;border:none !important;font-size:12px}pre code{overflow:visible}}@media screen{body.inverted{color:#eee !important;border-color:#555;box-shadow:none}.inverted #wrapper,.inverted hr,.inverted p,.inverted td,.inverted li,.inverted h1,.inverted h2,.inverted h3,.inverted h4,.inverted h5,.inverted h6,.inverted th,.inverted .math,.inverted caption,.inverted dd,.inverted dt,.inverted blockquote{color:#eee !important;border-color:#555;box-shadow:none}.inverted td,.inverted th{background:#333}.inverted pre,.inverted code,.inverted tt{background:#eeeeee !important;color:#111}.inverted h2{border-color:#555555}.inverted hr{border-color:#777;border-width:1px !important}::selection{background:rgba(157,193,200,0.5)}h1::selection{background-color:rgba(45,156,208,0.3)}h2::selection{background-color:rgba(90,182,224,0.3)}h3::selection,h4::selection,h5::selection,h6::selection,li::selection,ol::selection{background-color:rgba(133,201,232,0.3)}code::selection{background-color:rgba(0,0,0,0.7);color:#eeeeee}code span::selection{background-color:rgba(0,0,0,0.7) !important;color:#eeeeee !important}a::selection{background-color:rgba(255,230,102,0.2)}.inverted a::selection{background-color:rgba(255,230,102,0.6)}td::selection,th::selection,caption::selection{background-color:rgba(180,237,95,0.5)}.inverted{background:#0b2531;background:#252a2a}.inverted #wrapper{background:#252a2a}.inverted a{color:#acd1d5}}.highlight{background:#fff}.highlight .c{color:#998;font-style:italic}.highlight .err{color:#a61717;background-color:#e3d2d2}.highlight .k,.highlight .o{font-weight:700}.highlight .cm{color:#998;font-style:italic}.highlight .cp{color:#999;font-weight:700}.highlight .c1{color:#998;font-style:italic}.highlight .cs{color:#999;font-weight:700;font-style:italic}.highlight .gd{color:#000;background-color:#fdd}.highlight .gd .x{color:#000;background-color:#faa}.highlight .ge{font-style:italic}.highlight .gr{color:#a00}.highlight .gh{color:#999}.highlight .gi{color:#000;background-color:#dfd}.highlight .gi .x{color:#000;background-color:#afa}.highlight .go{color:#888}.highlight .gp{color:#555}.highlight .gs{font-weight:700}.highlight .gu{color:purple;font-weight:700}.highlight .gt{color:#a00}.highlight .kc,.highlight .kd,.highlight .kn,.highlight .kp,.highlight .kr{font-weight:700}.highlight .kt{color:#458;font-weight:700}.highlight .m{color:#099}.highlight .s{color:#d14}.highlight .n{color:#333}.highlight .na{color:teal}.highlight .nb{color:#0086b3}.highlight .nc{color:#458;font-weight:700}.highlight .no{color:teal}.highlight .ni{color:purple}.highlight .ne,.highlight .nf{color:#900;font-weight:700}.highlight .nn{color:#555}.highlight .nt{color:navy}.highlight .nv{color:teal}.highlight .ow{font-weight:700}.highlight .w{color:#bbb}.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#099}.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx{color:#d14}.highlight .sr{color:#009926}.highlight .s1{color:#d14}.highlight .ss{color:#990073}.highlight .bp{color:#999}.highlight .vc,.highlight .vg,.highlight .vi{color:teal}.highlight .il{color:#099}.highlight .gc{color:#999;background-color:#EAF2F5}.type-csharp .highlight .k,.type-csharp .highlight .kt{color:blue}.type-csharp .highlight .nf{color:#000;font-weight:400}.type-csharp .highlight .nc{color:#2b91af}.type-csharp .highlight .nn{color:#000}.type-csharp .highlight .s,.type-csharp .highlight .sc{color:#a31515}.type-csharp .highlight .k,.type-csharp .highlight .kt{color:#00F}.type-csharp .highlight .nf{color:#000;font-weight:normal}.type-csharp .highlight .nc{color:#2B91AF}.type-csharp .highlight .nn{color:#000}.type-csharp .highlight .s,.type-csharp .highlight .sc{color:#A31515}body.dark #wrapper{background:transparent !important;box-shadow:none !important}
@media print{
#generated-toc-clone,#generated-toc{display:none!important}
}
#generated-toc-clone li.missing,#mkreplaced-toc li.missing{list-style-type:none!important}#generated-toc-clone li, #mkreplaced-toc li{list-style-type:upper-roman}#generated-toc-clone li li, #mkreplaced-toc li li{list-style-type:decimal}#generated-toc-clone li li li,#mkreplaced-toc li li li{list-style-type:decimal-leading-zero}#generated-toc-clone li li li li,#mkreplaced-toc li li li li{list-style-type:lower-greek}#generated-toc-clone li li li li li,#mkreplaced-toc li li li li li{list-style-type:disc}#generated-toc-clone li li li li li li,#mkreplaced-toc li li li li li li{list-style-type:square}
</style>
<style>#wrapper { max-width:720px; margin:0 auto }</style>
</head>
<body class="normal">
<div id="wrapper">
<h1 id="quick中的事件">quick 中的事件</h1>
<p>quick 中的事件按照功能和用途分为：</p>
<ul>
<li>节点事件</li>
<li>帧事件</li>
<li>触摸事件</li>
<li>键盘事件</li>
<li>重力感应事件</li>
<li>应用程序事件</li>
</ul>
<p>~</p>
<h2 id="节点事件">节点事件</h2>
<p>节点事件在一个 Node 对象进入、退出场景时触发。</p>
<pre><code class="lua">local node = display.newNode()
node:addNodeEventListener(cc.NODE_EVENT, function(event)
print(event.name)
end)
scene:addChild(node)</code></pre>
<p>~</p>
<p>event 属性：</p>
<ul>
<li>event.<strong>name</strong>: 指示节点事件类型，具有下列值：
<ul>
<li><strong>enter</strong>: Node 加入了正在运行的场景</li>
<li><strong>exit</strong>: Node 退出了正在运行的场景</li>
<li><strong>enterTransitionFinish</strong>: 进入一个新场景时的特效结束</li>
<li><strong>exitTransitionStart</strong>: 退出一个现有场景时的特效开始</li>
<li><strong>cleanup</strong>: Node 被完全清理并从内存删除时</li>
</ul></li>
</ul>
<p>下面的示例代码演示了 5 种事件类型的出现时机：</p>
<pre><code class="lua">require("framework.init")
-- 首先创建一个空白场景
local sceneInit = display.newScene("sceneInit")
-- 进入该场景
display.replaceScene(sceneInit)
local function createTestScene(name)
local scene = display.newScene(name)
local node = display.newNode()
node:addNodeEventListener(cc.NODE_EVENT, function(event)
printf("node in scene [%s] NODE_EVENT: %s",
name, event.name)
end)
scene:addChild(node)
return scene
end
-- 等待 1.0 秒创建第一个测试场景
sceneInit:performWithDelay(function()
local scene1 = createTestScene("scene1")
display.replaceScene(scene1)
-- 等待 1.0 秒创建第二个测试场景
scene1:performWithDelay(function()
print("--------")
local scene2 = createTestScene("scene2")
display.replaceScene(scene2)
end, 1.0)
end, 1.0)</code></pre>
<p>输出结果：</p>
<pre><code class="(null)">node in scene [scene1] NODE_EVENT: enter
node in scene [scene1] NODE_EVENT: enterTransitionFinish
--------
node in scene [scene1] NODE_EVENT: exitTransitionStart
node in scene [scene1] NODE_EVENT: exit
node in scene [scene1] NODE_EVENT: cleanup
node in scene [scene2] NODE_EVENT: enter
node in scene [scene2] NODE_EVENT: enterTransitionFinish</code></pre>
<p>~</p>
<p>在切换场景时如果没有使用特效，那么事件出现的顺序如上。</p>
<p>但如果将测试代码 <code>display.replaceScene(scene2)</code> 修改为 <code>display.replaceScene(scene2, "random", 1.0)</code>，事件出现顺序会变成：</p>
<pre><code class="(null)">node in scene [scene1] NODE_EVENT: enter
node in scene [scene1] NODE_EVENT: enterTransitionFinish
--------
node in scene [scene1] NODE_EVENT: exitTransitionStart
node in scene [scene2] NODE_EVENT: enter
node in scene [scene1] NODE_EVENT: exit
node in scene [scene2] NODE_EVENT: enterTransitionFinish
node in scene [scene1] NODE_EVENT: cleanup</code></pre>
<p>~</p>
<p>造成这种区别的原因就是场景切换特效播放期间，会同时渲染两个场景，所以从事件上看，可以看到第二个场景的 <code>enter</code> 事件出现后，第一个场景的 <code>exit</code> 事件才出现。</p>
<p>因此，我们在使用节点事件时，不应该假定事件出现的顺序，而是根据特定事件采取特定的处理措施。</p>
<p>通常建议如下：</p>
<ul>
<li>enter: 这里可以做一些场景初始化工作</li>
<li>exit: 如果场景切换使用了特效，可以在这里停止场景中的一些动画，避免切换场景的特效导致帧率下降</li>
<li>cleanup: 适合做清理工作</li>
</ul>
<p>~</p>
<p>为了简化使用，quick 为 cc.Node 封装了几个现成的方法，开发者如果从 Node（或继承类）创建自己的 Lua 类，那么可以直接覆盖这几个方法：</p>
<pre><code class="lua">require("framework.init")
-- 定义一个自己的 cc.Node 继承类
local MyNode = class("MyNode", function(sceneName)
local node = display.newNode()
node.sceneName = sceneName
return node
end)
function MyNode:onEnter()
printf("node in scene [%s] method %s",
self.sceneName,
"onEnter")
end
function MyNode:onExit()
printf("node in scene [%s] method %s",
self.sceneName,
"onExit")
end
function MyNode:onEnterTransitionFinish()
printf("node in scene [%s] method %s",
self.sceneName,
"onEnterTransitionFinish")
end
function MyNode:onExitTransitionStart()
printf("node in scene [%s] method %s",
self.sceneName,
"onExitTransitionStart")
end
function MyNode:onCleanup()
printf("node in scene [%s] method %s",
self.sceneName,
"onCleanup")
end
-- 首先创建一个空白场景
local sceneInit = display.newScene("sceneInit")
-- 进入该场景
display.replaceScene(sceneInit)
local function createTestScene(name)
local scene = display.newScene(name)
local node = MyNode.new(name)
node:setNodeEventEnabled(true) -- 启用节点事件，会调用节点预定义的方法
scene:addChild(node)
return scene
end
-- 等待 1.0 秒创建第一个测试场景
sceneInit:performWithDelay(function()
local scene1 = createTestScene("scene1")
display.replaceScene(scene1)
-- 等待 1.0 秒创建第二个测试场景
scene1:performWithDelay(function()
print("--------")
local scene2 = createTestScene("scene2")
display.replaceScene(scene2, "random", 1.0)
end, 1.0)
end, 1.0)</code></pre>
<p>执行结果如下：</p>
<pre><code class="(null)">node in scene [scene1] method onEnter
node in scene [scene1] method onEnterTransitionFinish
--------
node in scene [scene1] method onExitTransitionStart
node in scene [scene2] method onEnter
node in scene [scene1] method onExit
node in scene [scene2] method onEnterTransitionFinish
node in scene [scene1] method onCleanup</code></pre>
<p>~</p>
<p>效果和直接注册事件一样。两种方式让开发者可以根据实际需求灵活选择。</p>
<p>~</p>
<h2 id="节点帧事件">节点帧事件</h2>
<p>注册该事件后，每一次刷新屏幕前（也就是前一帧和下一帧之间）都会触发事件。</p>
<pre><code class="lua">require("framework.init")
local scene = display.newScene()
-- 注册事件
scene:addNodeEventListener(cc.NODE_ENTER_FRAME_EVENT, function(dt)
print(dt)
end)
-- 启用帧事件
scene:scheduleUpdate()
-- 0.5 秒后，停止帧事件
scene:performWithDelay(function()
-- 禁用帧事件
scene:unscheduleUpdate()
print("STOP")
-- 再等 0.5 秒，重新启用帧事件
scene:performWithDelay(function()
-- 再次启用帧事件
scene:scheduleUpdate()
end, 0.5)
end, 0.5)
display.replaceScene(scene)</code></pre>
<p>~</p>
<p>运行时，屏幕上会不断输出上一帧和下一帧之间的时间间隔（通常为 1/60 秒），并在 0.5 时短暂暂停一下。</p>
<p><strong>注意</strong>：一定要调用 <code>scheduleUpdate()</code> 后，帧事件才会触发。</p>
<p>~</p>
<h2 id="触摸事件">触摸事件</h2>
<p>由于触摸事件的内容较多，所以请参考独立的文档《quick 中的触摸事件》。</p>
<p>~</p>
<h2 id="键盘事件">键盘事件</h2>
<p>键盘事件当前仅在 Android 设备上有效，可以得到用户按下 <code>Menu</code> 和 <code>Back</code> 键时的消息：</p>
<pre><code class="lua">local node = display.newNode()
node:addNodeEventListener(cc.KEYPAD_EVENT, function(event)
print(event.name)
end)
scene:addChild(node)</code></pre>
<p>~</p>
<p>event 属性：</p>
<ul>
<li>event.<strong>name</strong>: 指示用户按下的键，具有下列值：
<ul>
<li>menu</li>
<li>back</li>
</ul></li>
</ul>
<p>~</p>
<h2 id="重力感应事件">重力感应事件</h2>
<p>通过重力感应事件，可以得到设备当前的姿态：</p>
<pre><code class="lua">local node = display.newNode()
node:addNodeEventListener(cc.ACCELERATE_EVENT, function(event)
print(event.x, event.y, event.z, event.timestamp)
end)
scene:addChild(node)</code></pre>
<p>~</p>
<p>event 属性：</p>
<ul>
<li>event.<strong>x</strong>, event.<strong>y</strong>, event.<strong>z</strong>: 设备在 xyz 轴上的角度</li>
<li>event.<strong>timestamp</strong>: 测量值更新时间</li>
</ul>
<p>~</p>
<h2 id="应用程序事件">应用程序事件</h2>
<p>在 quick 应用中，存在一个全局的 app 对象。</p>
<p>该对象会提供一些应用程序级别的事件：</p>
<ul>
<li>APP_ENTER_BACKGROUND_EVENT: 应用进入后台</li>
<li>APP_ENTER_FOREGROUND_EVENT: 应用从后台恢复运行</li>
</ul>
<pre><code class="lua">app:addEventListener("APP_ENTER_BACKGROUND_EVENT", function(event)
...
end)
app:addEventListener("APP_ENTER_FOREGROUND_EVENT", function(event)
...
end)</code></pre>
<!-- ##END MARKED WRAPPER## -->
</div>
</body>
</html>