怎样创建用户界面细看Corona SDK游戏开发实例

作者:课课家教育更新于： 2019-09-25 01:23:31

　大家是否还对这部分知识存在疑问呀，让我来为大家详细解答一下。课课家将带给您与众不同的知识。一款简洁而友好的用户界面会帮助我们的应用作品顺利打开市场，而在指南针应用中，用户界面的构成元素主要有背景图案及指针图形。
　教程说明：

使用工具: Corona SDK

执行难度: 普通

操作时间: 30分钟到60分钟

　步骤一: 应用程序概述

在Lua与Corona SDK API的帮助下，
我们将利用预先准备好的图像素材制作出一款有趣的小游戏。
　　玩家需要利用设备自身配备的陀螺仪操控小球避开障碍物，Corona SDK环境搭建并最终到达目的地。大家可以通过修改游戏参数对内容进行自定义。

　　步骤二: 目标开发平台

首先，我们要选择应用程序作品所依托的运行平台，确定了这一点后我们才能选择与设备相匹配的图像显示尺寸。
iOS系统平台具体参数如下：

iPad: 1024x768分辨率, 132ppi
iPhone/iPodTouch: 320x480分辨率, 163 ppi
iPhone4: 960x640分辨率, 326 ppi

由于平台的开放特性，我们需要面对各种各样不同参数的设备及分辨率。这里我们选择几款人气产品作为主要参考对象：

谷歌 NexusOne: 480x800分辨率, 254 ppi
摩托罗拉 DroidX: 854x480分辨率, 228 ppi
HTC Evo: 480x800分辨率, 217 ppi

在这篇指南文章中，我们主要以iOS平台——尤其是iPhone/iPod为基准进行图像工作。不过下文中所使用的代码理论上也同样适用于Android系统上的Corona SDK开发。

　　步骤三: 用户界面

一款简洁而友好的用户界面会帮助我们的应用作品顺利打开市场，而在指南针应用中，用户界面的构成元素主要有背景图案及指针图形。
　　本指南中所涉及的一切界面图形资源都汇总在压缩包内，大家可以点击以下链接获取并使用。

　　步骤四: 导出图像

根据大家所选择的设备平台，我们需要将图像资源以合适的PPI及尺寸进行导出。这项工作非常简单，任何一款主流图像编辑工具都能实现，大家根据自己的习惯处理即可。我个人使用AdjustSize，这是一款Mac OS X系统自带的图像预览应用。导出完成后，请记得给文件起一个清晰准确的名称，并保存在项目文件夹当中。

　　步骤五: 声音

为了给玩家带来更愉悦的游戏体验，我们需要为事件设定各种音效。在本实例中涉及到的各种音效资源都能够在Soungle.com网站中找到，搜索关键字“bell”及“buzz”即可。

　　步骤六: 应用程序配置

首先创建一个外部文件config.lua，它的作用是保证应用程序在设备上以全屏方式运行。这个文件中会明确出现应用程序的原始分辨率，并提供一套缩放方案，保证应用能够在各种不同设备的独特分辨率下正确显示。

application =
{
content =
{
width = 320,
height = 480,
scale = "letterbox"
},
}

　　步骤七: Main.lua

好，准备工作就绪，现在我们开始编写应用！
打开大家最喜爱的Lua编辑器（任何一款文本编辑工具都能胜任，不过并不是每种都支持Lua语法高亮显示功能），准备着手编写满载自己汗水的应用吧！请记住，一定把文件保存在项目文件夹中，并命名为Main.lua。

　　步骤八: 代码结构

well 我们要将代码以类的形式进行结构整理。如果大家熟悉ActionScript或者，肯定会发现我所推荐的这套结构基本上符合二者的构造特点。

Necessary Classes
Variables and Constants
Declare Functions
contructor (Main function)
class methods (other functions)
call Main function

　　步骤九: 隐藏状态栏

display.setStatusBar(display.HiddenStatusBar)

　　这条代码的作用是隐藏状态栏。状态栏在任何一款移动系统平台上都会出现，一般位于屏幕上方，主要显示时间、信号强度等提示信息。

步骤十: 导入物理引擎

　　要还原真实的碰撞反应，我们需要在应用中使用物理效果库，通过以下代码将库导入程序：

local physics = require('physics')
physics.start()
physics.setGravity(0, 0)

步骤十一: 游戏背景图案

　既然是练手用的小作品，我们就姑且使用上面这幅图片作为背景图案。以下几行代码用于将图片引入应用程序。

-- Graphics
-- [Background]
local bg = display.newImage('bg.png')

　步骤十二: 标题视图

　上图所示即为标题视图，它是我们进入游戏后所面对的第一个互动界面，按照下列变量将内容设定并保存。

-- [Title View]
local titleBg
local playBtn
local creditsBtn
local titleView

　步骤十三: 制作人员视图

　上图所示为开发者姓名及游戏版权归属信息，利用以下变量对其加以保存。

-- [CreditsView]
local creditsView

　步骤十四: 游戏视图

　游戏视图所涉及的要素较多，包括玩家、障碍物及目的地。利用下面列出的代码完成游戏界面的基本创建。

-- [Game View]
-- [Player]
local player
-- [Bars Table]
local bars = {}
-- [Holes Table]
local holes = {}
-- [Goal]
local goal

　步骤十五: 声音

　　以下代码将游戏中用到的Corona SDK开发实战声音加以保存。

local bell = audio.loadSound('bell.caf')
local buzz = audio.loadSound('buzz.caf')

步骤十六: 代码审查

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

-- Teeter like Game
-- Developed by Carlos Yanez
-- Hide Status Bar
display.setStatusBar(display.HiddenStatusBar)
-- Physics
local physics = require('physics')
physics.start()
physics.setGravity(0, 0)
-- Graphics
-- [Background]
local bg = display.newImage('bg.png')
-- [Title View]
local titleBg
local playBtn
local creditsBtn
local titleView
-- [Credits]
local creditsView
-- [Player]
local player
-- [Bars Table]
local bars = {}
-- [Holes Table]
local holes = {}
-- [Goal]
local goal
-- Sounds
local bell = audio.loadSound('bell.caf')
local buzz = audio.loadSound('buzz.caf')

　　步骤十七: 函数声明

　　应用启动之初声明所有函数的基本状态。

local Main = {}
local startButtonListeners = {}
local showCredits = {}
local hideCredits = {}
local showGameView = {}
local gameListeners = {}
local movePlayer = {}
local onCollision = {}
local alert = {}
local dragPaddle = {}

　　步骤十八: 游戏构造函数

　　接下来，我们要创建一套运行逻辑的初始化机制，具体内容如下：

function Main()
-- code...
end

步骤十九: 添加标题视图

现在我们将标题视图放置在主界面中，同时调用用于**按钮“触摸”动作的函数。

function Main()
titleBg = display.newImage('titleBg.png')
playBtn = display.newImage('playBtn.png', display.contentCenterX - 35.5, display.contentCenterY + 10)
creditsBtn = display.newImage('creditsBtn.png', display.contentCenterX - 50.5, display.contentCenterY + 65)
titleView = display.newGroup(titleBg, playBtn, creditsBtn)
startButtonListeners('add')
end

步骤二十: 开始按钮**

此函数的作用是为标题视图按钮添加所需的**。

function startButtonListeners(action)
if(action == 'add') then
playBtn:addEventListener('tap', showGameView)
creditsBtn:addEventListener('tap', showCredits)
else
playBtn:removeEventListener('tap', showGameView)
creditsBtn:removeEventListener('tap', showCredits)
end
end

　　步骤二十一: 显示开发人员名单

当用户点击对应按钮时，应用会显示开发人员名单。此时要额外添加一个**，这样用户再次点击时程序将中止名单显示并返回主界面。

function showCredits:tap(e)
playBtn.isVisible = false
creditsBtn.isVisible = false
creditsView = display.newImage('credits.png', 0, display.contentHeight+40)
transition.to(creditsView, {time = 300, y = display.contentHeight-20, onComplete = function() creditsView:addEventListener('tap', hideCredits) end})
end

步骤二十二: 隐藏开发人员名单

当用户在开发人员名单显示过程中点击屏幕，显示将以动画形式中断并返回主界面。

function hideCredits:tap(e)
playBtn.isVisible = true
creditsBtn.isVisible = true
transition.to(creditsView, {time = 300, y = display.contentHeight+creditsView.height, onComplete = function() creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end})
end

步骤二十三: 显示游戏视图

当用户点击“开始游戏”（Play）按钮时，Corona SDK项目实战标题视图将以动画形式消去并显示游戏视图。

function showGameView:tap(e)
transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil end})

步骤二十四: 目的地

在这里我们要为小球设定目的地。另外，我们还要为其设定名称，以便小球触碰到目的地时顺利触发预定事件。

-- Goal
goal = display.newImage('goal.png')
goal.x = 439
goal.y = 31
goal.name = 'g'

步骤二十五: 墙体

我们要在游戏界面中设置墙体，这样才能保证小球始终在预定的游戏场地内活动。

-- Walls
local left = display.newLine(-1, 0, -1, display.contentHeight)
local right = display.newLine(display.contentWidth+1, 0, display.contentWidth+1, display.contentHeight)
local top = display.newLine(0, -3, display.contentWidth, -3)
local bottom = display.newLine(0, display.contentHeight, display.contentWidth, display.contentHeight)