跨平台工具Corona SDK指南:如何创建指南针应用

译文
移动开发 Android iOS 移动应用
在本篇指导文章中,大家将学习如何利用Corona SDK和智能手机固有硬件创建指南针应用程序。闲话少叙,咱们马上开始!

教程说明

  • 使用工具: Corona SDK
  • 执行难度: 普通
  • 操作时间: 一小时

步骤一: 应用程序概述

Corona-SDK_Compass

利用准备好的图片素材,我们将以Lua及Corona SDK API为基础编写属于自己的指南针应用程序。

基本上,完成品与苹果公司在iOS系统中自带的官方指南针应用大同小异。

步骤二: 目标开发平台

首先,我们要选择应用程序作品所依托的运行平台,确定了这一点后我们才能选择与设备相匹配的图像显示尺寸。

iOS系统平台具体参数如下:

  • iPad: 1024x768分辨率, 132ppi

  • iPhone/iPodTouch: 320x480分辨率, 163 ppi

  • iPhone4: 960x640分辨率, 326 ppi

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

  • 谷歌 NexusOne: 480x800分辨率, 254 ppi

  • 摩托罗拉 DroidX: 854x480分辨率, 228 ppi

  • HTC Evo: 480x800分辨率, 217 ppi

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

步骤三: 用户界面

一款简洁而友好的用户界面会帮助我们的应用作品顺利打开市场,而在指南针应用中,用户界面的构成元素主要有背景图案及指针图形。

本指南中所涉及的一切界面图形资源都汇总在压缩包内,大家可以点击以下链接获取并使用。

下载链接:https://mobiletuts.s3.amazonaws.com/Corona-SDK_Compass/source.zip

步骤四: 导出图像

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

步骤五: 应用程序配置

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

  1. application = 
  2.     content = 
  3.     { 
  4.         width = 320, 
  5.         height = 480, 
  6.         scale = "letterbox" 
  7.     }, 

步骤六: Main.lua

好,准备工作就绪,现在我们开始编写应用!

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

步骤七: 代码结构

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

  1. Necessary Classes 
  2.   
  3. Variables and Constants 
  4.   
  5. Declare Functions 
  6.   
  7.     contructor (Main function) 
  8.       
  9.     class methods (other functions) 
  10.   
  11. call Main function   

步骤八: 隐藏状态栏

  1. display.setStatusBar(display.HiddenStatusBar) 

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

步骤九: 背景图案

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

  1. -- Graphics 
  2. -- [Background] 
  3. local bg = display.newImage('bg.png'

步骤十: 指针

指针的作用是指明当前方位,用户配合背景图案即可轻松了解需要的方向。

  1. -- [Pointer] 
  2. local pointer = display.newImage('pointer.png'

步骤十一: 指向文本信息

以下变量的作用在于显示当前指向的具体方位及角度。

  1. -- Heading Text 
  2. local heading = display.newText('0', display.contentCenterX, 60, native.systemFont, 21) 

步骤十二: 函数声明

应用启动之初,向用户声明local函数的基本状态。

  1. -- Functions 
  2. local Main = {} 
  3. local update = {} 

步骤十三: 构造函数

接下来,我们需要创建一套运行逻辑初始化机制,具体函数设定如下:

  1. function Main() 
  2. pointer:setReferencePoint(display.CenterReferencePoint) 
  3. pointer.x = display.contentCenterX 
  4. pointer.y = display.contentCenterY 
  5.  
  6. heading:setTextColor(255) 
  7. heading:setReferencePoint(display.CenterReferencePoint) 
  8. Runtime:addEventListener('heading', update) 
  9. end 

步骤十四: 指针旋转

我们利用指向事件(heading)反馈得出的地球磁场结果来驱动指针旋转。

  1. function update(e) 
  2. -- Pointer Rotation 
  3. pointer.rotation = math.floor(e.magnetic) 

步骤十五: 指向文本&方位

下列代码用于检测当前指针的旋转状态,这有助于使用者借助指南针应用读取当前方位。

  1. -- Heading Text & Direction 
  2.  
  3.   
  4.  
  5. if(pointer.rotation >= 0 and pointer.rotation < 23) then 
  6.  
  7. heading.text = math.floor(e.magnetic) .. ' N' 
  8.  
  9. heading:setReferencePoint(display.CenterReferencePoint) 
  10.  
  11. heading.x = display.contentCenterX 
  12.  
  13. elseif(pointer.rotation >= 23 and pointer.rotation < 68) then 
  14.  
  15. heading.text = math.floor(e.magnetic) .. ' NE' 
  16.  
  17. heading:setReferencePoint(display.CenterReferencePoint) 
  18.  
  19. heading.x = display.contentCenterX 
  20.  
  21. elseif(pointer.rotation >= 68 and pointer.rotation < 113) then 
  22.  
  23. heading.text = math.floor(e.magnetic) .. ' E' 
  24.  
  25. heading:setReferencePoint(display.CenterReferencePoint) 
  26.  
  27. heading.x = display.contentCenterX 
  28.  
  29. elseif(pointer.rotation >= 113 and pointer.rotation < 158) then 
  30.  
  31. heading.text = math.floor(e.magnetic) .. ' SE' 
  32.  
  33. heading:setReferencePoint(display.CenterReferencePoint) 
  34.  
  35. heading.x = display.contentCenterX 
  36.  
  37. elseif(pointer.rotation >= 158 and pointer.rotation < 203) then 
  38.  
  39. heading.text = math.floor(e.magnetic) .. ' S' 
  40.  
  41. heading:setReferencePoint(display.CenterReferencePoint) 
  42.  
  43. heading.x = display.contentCenterX 
  44.  
  45. elseif(pointer.rotation >= 203 and pointer.rotation < 248) then 
  46.  
  47. heading.text = math.floor(e.magnetic) .. ' SW' 
  48.  
  49. heading:setReferencePoint(display.CenterReferencePoint) 
  50.  
  51. heading.x = display.contentCenterX 
  52.  
  53. elseif(pointer.rotation >= 248 and pointer.rotation < 293) then 
  54.  
  55. heading.text = math.floor(e.magnetic) .. ' W' 
  56.  
  57. heading:setReferencePoint(display.CenterReferencePoint) 
  58.  
  59. heading.x = display.contentCenterX 
  60.  
  61. elseif(pointer.rotation >= 293 and pointer.rotation < 360) then 
  62.  
  63. heading.text = math.floor(e.magnetic) .. ' NW' 
  64.  
  65. heading:setReferencePoint(display.CenterReferencePoint) 
  66.  
  67. heading.x = display.contentCenterX 
  68.  
  69. end 
  70.  
  71. end 

步骤十六: 调用Main函数

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

  1. Main() 

步骤十七: 载入界面

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

步骤十八: 图标

现在大家的做图功力就该派上用场了,快为自己的应用打造一款美观又令人印象深刻的图标吧。在非视网膜屏的iPhone设备上,图标文件的尺寸应为57x57像素,而视网膜屏则需要114x114像素,另外我们还需要为iTunes软件商店打造一个512x512的大版图形。我建议大家先以512x512像素为基准设计,然后再缩小成其它两种尺寸。

大家没必要在图标制作方面过分投入精力,制作圆角或者添加半透明特效完全是种花蛇添足——因为iTunes与iPhone会自动为你实现这些效果。

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

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

步骤二十: 创建

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

总结

后期测试总是越多越好,当我们对自己的应用作品详加打磨后,发行用户版吧——这也许会成为辉煌成功的***步!

希望这篇指南文章能够帮助大家在移动开发的道路上越走越好,感谢朋友们的支持!

原文链接: http://mobile.tutsplus.com/tutorials/corona/corona-sdk-create-a-compass-application/

责任编辑:佚名 来源: 51CTO.com
相关推荐

2011-09-05 16:08:13

2012-06-14 09:37:17

Ansca MobilCorona跨平台工具

2023-02-22 10:15:23

开源指南针开源生态开源社区

2010-09-06 09:13:42

DB2表格

2012-08-09 08:49:30

CoronaCorona SDKCorona SDK游

2012-12-18 13:15:14

Game MinionCorona

2010-07-23 16:08:38

OPhone平台

2013-12-26 15:47:59

Android SDK应用程序

2013-12-04 14:29:18

Android SDK应用程序

2020-06-19 11:20:17

开发避坑支付宝

2018-03-02 16:30:30

2014-07-31 16:00:10

KiiXamarin

2013-12-04 15:20:33

Android SDK应用程序

2013-12-04 15:11:03

Android SDK应用程序

2013-12-04 13:51:38

Android SDK应用程序

2011-02-22 15:06:48

openVPN

2015-06-25 13:06:48

大数据从选择到应用

2019-03-05 09:57:08

php编程语言工程师

2010-01-08 12:14:44

ibmdwAndroid

2020-12-10 06:46:40

容器云平台
点赞
收藏

51CTO技术栈公众号