实看Corona SDK游戏开发实例：物理效果与互动操作

作者:课课家教育更新于： 2015-11-24 17:22:37

打开这篇文章的人都是爱问知识的人，下面我给大家讲讲。课课家将带给您与众不同的知识。为游戏中的各个图形元素分配物理属性，要注意静态元素是不能移动的。另外还要检查玩家操控的小球与陷阱洞的半径，这些元素必须声明使用圆形物理属性而不能用一般的方形，这样会提高物理碰撞效果、提高。
教程说明

• 技术工具: Corona SDK
• 执行难度: 普通
• 操作时间: 30 到60分钟

书接上文

在本系列文章的前编中，我们了解了平衡球小游戏的基本概念并创建出基础用户界面。javascript基础教程在后编中，我们将共同完成基础物理效果创建、游戏互动性编写等工作，并最终制作出能够给用户带来乐趣的应用成品。

步骤二十九: 添加物理效果

为游戏中的各个图形元素分配物理属性，要注意静态元素是不能移动的。另外还要检查玩家操控的小球与陷阱洞的半径，这些元素必须声明使用圆形物理属性而不能用一般的方形，这样会提高物理碰撞效果、提高游戏性。

1. -- Add Physics to GFX  
2.  
3. physics.addBody(left, 'static') 
4. physics.addBody(right, 'static') 
5. physics.addBody(top, 'static') 
6. physics.addBody(bottom, 'static')  
7.  
8. physics.addBody(b1, 'static') 
9. physics.addBody(b2, 'static') 
10. physics.addBody(b3, 'static') 
11. physics.addBody(b4, 'static')  
12.  
13. physics.addBody(h1, 'static', {radius = 15}) 
14. physics.addBody(h2, 'static', {radius = 15}) 
15. physics.addBody(h3, 'static', {radius = 15}) 
16. physics.addBody(h4, 'static', {radius = 15}) 
17. physics.addBody(h5, 'static', {radius = 15}) 
18.   
19. physics.addBody(player, {radius = 14}) 
20. physics.addBody(goal, 'static', {radius = 15}) 

步骤三十: 将陷阱小洞设置为感应器

由于作为陷阱的小洞本身不会产生物理碰撞效果，因此我们只要为其设置接触感应器即可。

1. -- Set Holes as Sensors      
2.  
3.     h1.isSensor = true 
4.     h2.isSensor = true 
5.     h3.isSensor = true 
6.     h4.isSensor = true 
7.     h5.isSensor = true      
8.  
9.     --gameListeners('add') 
10. end 

步骤三十一: 代码审查

以下列出的是本教程所提到全部代码纲要，大家可以从宏观角度对作品进行核查，确定所有要素都已经包含在程序成品当中：

1. -- Teeter like Game 
2.  
3. -- Developed by Carlos Yanez 
4.  
5.   
6.  
7. -- Hide Status Bar 
8.  
9.   
10.  
11. display.setStatusBar(display.HiddenStatusBar) 
12.  
13.   
14.  
15. -- Physics 
16.  
17.   
18.  
19. local physics = require('physics') 
20.  
21. physics.start() 
22.  
23. physics.setGravity(0, 0) 
24.  
25.   
26.  
27. -- Graphics 
28.  
29.   
30.  
31. -- [Background] 
32.  
33.   
34.  
35. local bg = display.newImage('bg.png') 
36.  
37.   
38.  
39. -- [Title View] 
40.  
41.   
42.  
43. local titleBg 
44.  
45. local playBtn 
46.  
47. local creditsBtn 
48.  
49. local titleView 
50.  
51.   
52.  
53. -- [Credits] 
54.  
55.   
56.  
57. local creditsView 
58.  
59.   
60.  
61. -- [Player] 
62.  
63.   
64.  
65. local player 
66.  
67.   
68.  
69. -- [Bars Table] 
70.  
71.   
72.  
73. local bars = {} 
74.  
75.   
76.  
77. -- [Holes Table] 
78.  
79.   
80.  
81. local holes = {} 
82.  
83.   
84.  
85. -- [Goal] 
86.  
87.   
88.  
89. local goal 
90.  
91.   
92.  
93. -- Sounds 
94.  
95.   
96.  
97. local bell = audio.loadSound('bell.caf') 
98.  
99. local buzz = audio.loadSound('buzz.caf') 
100.  
101.   
102.  
103. -- Functions 
104.  
105.   
106.  
107. local Main = {} 
108.  
109. local startButtonListeners = {} 
110.  
111. local showCredits = {} 
112.  
113. local hideCredits = {} 
114.  
115. local showGameView = {} 
116.  
117. local gameListeners = {} 
118.  
119. local movePlayer = {} 
120.  
121. local onCollision = {} 
122.  
123. local alert = {} 
124.  
125. local dragPaddle = {} 
126.  
127.   
128.  
129. -- Main Function 
130.  
131.   
132.  
133. function Main() 
134.  
135.     titleBg = display.newImage('titleBg.png') 
136.  
137.     playBtn = display.newImage('playBtn.png', display.contentCenterX - 35.5, display.contentCenterY + 10) 
138.  
139.     creditsBtn = display.newImage('creditsBtn.png', display.contentCenterX - 50.5, display.contentCenterY + 65) 
140.  
141.     titleView = display.newGroup(titleBg, playBtn, creditsBtn) 
142.  
143.       
144.  
145.     startButtonListeners('add') 
146.  
147. end 
148.  
149.   
150.  
151. function startButtonListeners(action) 
152.  
153.     if(action == 'add') then 
154.  
155.         playBtn:addEventListener('tap', showGameView) 
156.  
157.         creditsBtn:addEventListener('tap', showCredits) 
158.  
159.     else 
160.  
161.         playBtn:removeEventListener('tap', showGameView) 
162.  
163.         creditsBtn:removeEventListener('tap', showCredits) 
164.  
165.     end 
166.  
167. end 
168.  
169.   
170.  
171. function showCredits:tap(e) 
172.  
173.     playBtn.isVisible = false 
174.  
175.     creditsBtn.isVisible = false 
176.  
177.     creditsView = display.newImage('credits.png', 0, display.contentHeight+40) 
178.  
179.     transition.to(creditsView, {time = 300, y = display.contentHeight-20, onComplete = function() creditsView:addEventListener('tap', hideCredits) end}) 
180.  
181. end 
182.  
183.   
184.  
185. function hideCredits:tap(e) 
186.  
187.     playBtn.isVisible = true 
188.  
189.     creditsBtn.isVisible = true 
190.  
191.     transition.to(creditsView, {time = 300, y = display.contentHeight+creditsView.height, onComplete = function() creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end}) 
192.  
193. end 
194.  
195.   
196.  
197. function showGameView:tap(e) 
198.  
199.     transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil end}) 
200.  
201.       
202.  
203.     -- [Add GFX] 
204.  
205.       
206.  
207.     -- Goal 
208.  
209.       
210.  
211.     goal = display.newImage('goal.png') 
212.  
213.     goal.x = 439 
214.  
215.     goal.y = 31 
216.  
217.     goal.name = 'g' 
218.  
219.       
220.  
221.     -- Walls 
222.  
223.       
224.  
225.     local left = display.newLine(-1, 0, -1, display.contentHeight) 
226.  
227.     local right = display.newLine(display.contentWidth+1, 0, display.contentWidth+1, display.contentHeight) 
228.  
229.     local top = display.newLine(0, -3, display.contentWidth, -3) 
230.  
231.     local bottom = display.newLine(0, display.contentHeight, display.contentWidth, display.contentHeight) 
232.  
233.       
234.  
235.     -- Bars 
236.  
237.       
238.  
239.     local b1 = display.newImage('bar.png', 92, 67) 
240.  
241.     local b2 = display.newImage('bar.png', 192, -2) 
242.  
243.     local b3 = display.newImage('bar.png', 287, 67) 
244.  
245.     local b4 = display.newImage('bar.png', 387, -2) 
246. well Android 是运行于Linux kernel之上，但并不是GNU/Linux。因为在一般GNU/Linux 里支持的功能，Android 大都没有支持，包括Cairo、X11、Alsa、FFmpeg、GTK、Pango及Glibc等都被移除掉了。Android又以Bionic 取代Glibc、以Skia 取代Cairo、再以opencore取代FFmpeg等等。Android 为了达到商业应用，必须移除被GNU GPL授权证所约束的部份，例如Android将驱动程序移到 Userspace，使得Linux driver 与 Linux kernel彻底分开。Bionic/Libc/Kernel/ 并非标准的Kernel header files。Android 的 Kernel header 是利用工具由 Linux Kernel header 所产生的，这样做是为了保留常数、数据结构与宏。
     　　Android 的 Linux kernel控制包括安全（Security），存储器管理（Memory Management），程序管理（Process Management），网络堆栈（Network Stack），驱动程序模型（Driver Model）等。下载Android源码之前，先要安装其构建工具 Repo来初始化源码。Repo 是 Android 用来辅助Git工作的一个工具。
247.  
248.       
249.  
250.     -- Holes 
251.  
252.       
253.  
254.     local h1 = display.newImage('hole.png', 62, 76) 
255.  
256.     local h2 = display.newImage('hole.png', 124, 284) 
257.  
258.     local h3 = display.newImage('hole.png', 223, 224) 
259.  
260.     local h4 = display.newImage('hole.png', 356, 114) 
261.  
262.     local h5 = display.newImage('hole.png', 380, 256) 
263.  
264.       
265.  
266.     h1.name = 'h' 
267.  
268.     h2.name = 'h' 
269.  
270.     h3.name = 'h' 
271.  
272.     h4.name = 'h' 
273.  
274.     h5.name = 'h' 
275.  
276.       
277.  
278.     -- Player 
279.  
280.       
281.  
282.     player = display.newImage('player.png') 
283.  
284.     player.x = 49 
285.  
286.     player.y = 288 
287.  
288.     player:setReferencePoint(display.CenterReferencePoint) 
289.  
290.       
291.  
292.     -- Add Physics to GFX 
293.  
294.       
295.  
296.     physics.addBody(left, 'static') 
297.  
298.     physics.addBody(right, 'static') 
299.  
300.     physics.addBody(top, 'static') 
301.  
302.     physics.addBody(bottom, 'static') 
303.  
304.       
305.  
306.     physics.addBody(b1, 'static') 
307.  
308.     physics.addBody(b2, 'static') 
309.  
310.     physics.addBody(b3, 'static') 
311.  
312.     physics.addBody(b4, 'static') 
313.  
314.       
315.  
316.     physics.addBody(h1, 'static', {radius = 15}) 
317.  
318.     physics.addBody(h2, 'static', {radius = 15}) 
319.  
320.     physics.addBody(h3, 'static', {radius = 15}) 
321.  
322.     physics.addBody(h4, 'static', {radius = 15}) 
323.  
324.     physics.addBody(h5, 'static', {radius = 15}) 
325.  
326.       
327.  
328.     physics.addBody(player, {radius = 14}) 
329.  
330.     physics.addBody(goal, 'static', {radius = 15}) 
331.  
332.       
333.  
334.     -- Set Holes as Sensors 
335.  
336.       
337.  
338.     h1.isSensor = true 
339.  
340.     h2.isSensor = true 
341.  
342.     h3.isSensor = true 
343.  
344.     h4.isSensor = true 
345.  
346.     h5.isSensor = true 
347.  
348.       
349.  
350.     gameListeners('add') 
351.  
352. end 

步骤三十二: 游戏**

下列代码的作用是为应用程序添加重力加速及物理碰撞**。代码还能通过递交参数来移除这些效果。

1. function gameListeners(action) 
2.  
3.     if(action == 'add') then 
4.  
5.         Runtime:addEventListener('accelerometer', movePlayer) 
6.  
7.         player:addEventListener('collision', onCollision) 
8.  
9.         player:addEventListener('touch', dragPaddle) 
10.  
11.     else 
12.  
13.         Runtime:removeEventListener('accelerometer', movePlayer) 
14.  
15.         player:removeEventListener('collision', onCollision) 
16.  
17.         player:removeEventListener('touch', dragPaddle) 
18.  
19.     end 
20.  
21. end 

步骤三十三: 移动小球

以下函数用来捕捉物理加速值，javascript教程根据结果给小球的X及Y属性赋值。

1. function movePlayer:accelerometer(e) 
2.  
3.     player.x = player.x + (e.yGravity*-15) 
4.  
5.     player.y = player.y + (e.xGravity*-15) 
6.  
7. end 

步骤三十四: 物理碰撞

当小球与其它对象发生碰撞时，其名称会与触碰对象相比照。根据对象类型的不同（陷阱小洞及目的地），游戏会给出不同的提示信息。

1. function onCollision(e) 
2.  
3.     if(e.other.name == 'h') then 
4.  
5.         alert() 
6.  
7.     elseif(e.other.name == 'g') then 
8.  
9.         alert('win') 
10.  
11.     end 
12.  
13. end 

步骤三十五: 提示信息

提示信息被触发时，游戏中的所有**都会被移除，并在播放音效的同时显示正确的文本内容。

1. function alert(action) 
2.  
3.     local alert 
4.  
5.       
6.  
7.     gameListeners('rmv') 
8.  
9.       
10.  
11.     if(action == 'win') then 
12.  
13.         alert = display.newImage('complete.png') 
14.  
15.         alert.x = display.contentCenterX 
16.  
17.         alert.y = display.contentCenterY 
18.  
19.         transition.from(alert, {time = 300, xScale = 0.3, yScale = 0.3}) 
20.  
21.         audio.play(bell) 
22.  
23.     else 
24.  
25.         alert = display.newImage('gameOver.png') 
26.  
27.         alert.x = display.contentCenterX 
28.  
29.         alert.y = display.contentCenterY 
30.  
31.         transition.from(alert, {time = 300, xScale = 0.3, yScale = 0.3}) 
32.  
33.         audio.play(buzz) 
34.  
35.     end 
36.  
37. end 

步骤三十六: 模拟移动

这一步纯属建议，大家可以将下列代表添加进来，借以在模拟环境下拖动小球，观察移动方式是否与预期相符。

1. function dragPaddle(e) 
2.  
3.     if(e.phase == 'began') then 
4.  
5.         lastY = e.y - player.y 
6.  
7.         lastX = e.x - player.x 
8.  
9.     elseif(e.phase == 'moved') then 
10.  
11.         player.y = e.y - lastY 
12.  
13.         player.x = e.x- lastX 
14.  
15.     end 
16.  
17. end 

步骤三十七: 调用Main函数

为了在应用启动时进行初始化，我们需要调用Main函数。上述代码编写完成之后，我们只需编辑以下内容即可实现初始化需求：

1. Main() 

步骤三十八: 载入界面

                                                  
当我们启动指南针应用时，iOS系统会逐项载入基本数据，这时Default.png文件将作为背景图案显示在主屏幕当中。将这张图片保存到我们的项目资源文件夹中，这样它就会被自动添加到Corona的编译器中。

步骤三十九: 图标

现在大家的做图功力就该派上用场了，快为自己的应用打造一款美观又令人印象深刻的图标吧。在非视网膜屏的iPhone设备上，图标文件的尺寸应为57x57像素，而视网膜屏则需要114x114像素，另外我们还需要为iTunes软件商店打造一个512x512的大版图形。我建议大家先以512x512像素为基准，然后再缩小成其它两种尺寸。
大家没必要在图标制作方面过分投入精力，javascript视频教程制作圆角或者添加半透明特效完全是种花蛇添足。

步骤四十: 在模拟环境下进行测试

                                            
是时候进行最终测试了。打开Corona模拟器，选择我们的项目文件夹并点击“打开”。如果一切都依照预期效果顺利运行，那么我们就可以着手做最后一项工作了。

步骤四十一: 创建

                                             
在Corona模拟器中，点选文件选项下的创建项并选择目标设备平台。在对话框中输入项目数据并点击创建按钮。等上几秒，我们的应用作品就大功告成啦！接下来大家可以在设备上进行实机测试，或者直接将应用发布到软件商店中。

总结

后期测试总是越多越好，当我们对自己的应用作品详加打磨后，发行用户版吧——这也许会成为辉煌成功的第一步！
希望这篇指南文章能够帮助大家在的道路上越走越好，感谢朋友们的支持！
更多的课程可到课课家参考。