Cross-platform tool Corona SDK guide: How to Create a compass Application

Tutorial description:

• Tool used: Corona SDK
• Execution difficulty: normal
• Operation Time: one hour

Step 1: Application Overview

Using the prepared image materials, we will compile our own compass Application Based on Lua and Corona SDK APIs.

Basically, the final product is similar to Apple's own official compass app in iOS.

Step 2: Target Development Platform

First, we need to select the operating platform that the application works rely on. After confirming this, we can select the image display size that matches the device.

The specific parameters of the iOS system are as follows:

• IPad: 1024x768 resolution, 132ppi

• IPhone/iPodTouch: 320x133 resolution, 163 ppi

• IPhone4: 960x640 resolution, 326 ppi

Because of the open features of the Android platform, we need devices with different parameters and resolutions. Here we select several popular products as the main reference objects:

• Google NexusOne: 254 x800 resolution, ppi

• Motorola DroidX: 854xlarge resolution, 228 ppi

• HTC Evo: 217 x800 resolution, ppi

In this guide, we primarily design Images Based on iOS platforms, especially iPhone/iPod. However, the code used below applies theoretically to Corona SDK development on Android systems.

Step 3: User Interface

A concise and friendly user interface will help our application work smoothly open the market. In the compass application, the main elements of the user interface include the background pattern and pointer graphics.

All the graphic resources involved in this Guide are summarized in the compressed package. You can click the following link to obtain and use the resources.

Download link: https://mobiletuts.s3.amazonaws.com/Corona-SDK_Compass/source.zip

Step 4: Export Images

Based on the selected device platform, we need to export image resources in a proper PPI and size. This work is very simple and can be implemented by any mainstream image editing tool. You can simply process it according to your own habits. I personally use AdjustSize, which is an image preview application that comes with Mac OS X. After the export is complete, remember to give the file a clear and accurate name and save it in the project folder.

Step 5: configure the application

First, create an external file config. lua to ensure that the application runs in full screen mode on the device. This file clearly shows the original resolution of the application, and provides a scaling solution to ensure that the application can be correctly displayed under the unique resolution of different devices.

 
 

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

Step 6: Main. lua

Good. Preparations are ready. Now let's write the application!

Open your favorite Lua editor. Any text editing tool is competent, but not all of them support the Lua syntax highlighting function.) Are you ready to write your own applications! Remember to save the file in the project folder and name it Main. lua.

Step 7: code structure

We need to organize the code in the form of classes. If you are familiar with ActionScript or Java, you will surely find that the structure I recommend basically conforms to the structural characteristics of both.

 
 

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

Step 8: Hide the status bar

 
 

  
  
display.setStatusBar(display.HiddenStatusBar) 
 
 

This Code hides the status bar. The status bar appears on any mobile system platform. It is usually located at the top of the screen and displays the time, signal strength, and other prompts.

Step 9: background pattern

Since it is a little work used by the trainer, we should use the picture above as the background pattern. The following code is used to introduce an image into an application.

 
 

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

Step 10: pointer

The pointer is used to indicate the current position. You can easily understand the desired direction with the background pattern.

 
 

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

Step 11: Point to text information

The following variables are used to display the specific orientation and angle of the current point.

 
 

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

Step 12: function declaration

At the beginning of the application, declare the basic state of the local function to the user.

 
 

  
  
-- Functions 
  
  
local Main = {} 
  
  
local update = {} 
 
 

Step 13: Constructor

Next, we need to create a runtime logic initialization mechanism. The specific function settings are as follows:

 
 

  
  
function Main() 
  
  
pointer:setReferencePoint(display.CenterReferencePoint) 
  
  
pointer.x = display.contentCenterX 
  
  
pointer.y = display.contentCenterY 
  
  
 
  
  
heading:setTextColor(255) 
  
  
heading:setReferencePoint(display.CenterReferencePoint) 
  
  
Runtime:addEventListener('heading', update) 
  
  
end 
 
 

Step 14: pointer Rotation

We use the Earth's magnetic field results fed back by pointing to the event heading to drive pointer rotation.

 
 

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

Step 15: Point to text & Orientation

Run the following code to check the rotation status of the current pointer. This helps the user to read the current orientation using the compass application.

 
 

  
  
-- Heading Text & Direction 
  
  
 
  
  
  
  
  
 
  
  
if(pointer.rotation >= 0 and pointer.rotation < 23) then 
  
  
 
  
  
heading.text = math.floor(e.magnetic) .. ' N' 
  
  
 
  
  
heading:setReferencePoint(display.CenterReferencePoint) 
  
  
 
  
  
heading.x = display.contentCenterX 
  
  
 
  
  
elseif(pointer.rotation >= 23 and pointer.rotation < 68) then 
  
  
 
  
  
heading.text = math.floor(e.magnetic) .. ' NE' 
  
  
 
  
  
heading:setReferencePoint(display.CenterReferencePoint) 
  
  
 
  
  
heading.x = display.contentCenterX 
  
  
 
  
  
elseif(pointer.rotation >= 68 and pointer.rotation < 113) then 
  
  
 
  
  
heading.text = math.floor(e.magnetic) .. ' E' 
  
  
 
  
  
heading:setReferencePoint(display.CenterReferencePoint) 
  
  
 
  
  
heading.x = display.contentCenterX 
  
  
 
  
  
elseif(pointer.rotation >= 113 and pointer.rotation < 158) then 
  
  
 
  
  
heading.text = math.floor(e.magnetic) .. ' SE' 
  
  
 
  
  
heading:setReferencePoint(display.CenterReferencePoint) 
  
  
 
  
  
heading.x = display.contentCenterX 
  
  
 
  
  
elseif(pointer.rotation >= 158 and pointer.rotation < 203) then 
  
  
 
  
  
heading.text = math.floor(e.magnetic) .. ' S' 
  
  
 
  
  
heading:setReferencePoint(display.CenterReferencePoint) 
  
  
 
  
  
heading.x = display.contentCenterX 
  
  
 
  
  
elseif(pointer.rotation >= 203 and pointer.rotation < 248) then 
  
  
 
  
  
heading.text = math.floor(e.magnetic) .. ' SW' 
  
  
 
  
  
heading:setReferencePoint(display.CenterReferencePoint) 
  
  
 
  
  
heading.x = display.contentCenterX 
  
  
 
  
  
elseif(pointer.rotation >= 248 and pointer.rotation < 293) then 
  
  
 
  
  
heading.text = math.floor(e.magnetic) .. ' W' 
  
  
 
  
  
heading:setReferencePoint(display.CenterReferencePoint) 
  
  
 
  
  
heading.x = display.contentCenterX 
  
  
 
  
  
elseif(pointer.rotation >= 293 and pointer.rotation < 360) then 
  
  
 
  
  
heading.text = math.floor(e.magnetic) .. ' NW' 
  
  
 
  
  
heading:setReferencePoint(display.CenterReferencePoint) 
  
  
 
  
  
heading.x = display.contentCenterX 
  
  
 
  
  
end 
  
  
 
  
  
end 
 
 

Step 16: Call the Main function

To initialize the application at startup, we need to call the Main function. After the above Code is compiled, you only need to edit the following content to implement initialization:

 
 

  
  
Main() 
 
 

Step 17: load the interface

When we start the program application, the IOS system will upload basic data one by one. At this time, the default.png file will be displayed as a background pattern on the home screen. Save this image to our project resource folder so that it will be automatically added to the Corona compiler.

Step 18: icon

Now everyone's graphic skills should come in handy. It's time to create a beautiful and impressive icon for your own applications. On iPhone devices with non-retina screens, the size of the icon file should be 57x57 pixels, and the size of the Retina screen should be 114x114 pixels. In addition, we also need to create a large version of 512x512 for the iTunes software store. I suggest you first design with x512 pixels as the benchmark, and then scale down to the other two sizes.

You don't have to spend too much effort on creating icons. Creating rounded corners or adding translucent effects is a perfect addition to the flower snake-Because iTunes and iPhone will automatically implement these effects for you.

Step 19: test in a simulated environment

It is time to complete the final test. Open the Corona simulator, select our project folder, and click "open ". If everything runs smoothly as expected, we can proceed to the last step.

Step 20: Create

In the Corona simulator, click Create under the file option and select the target device platform. In the dialog box, enter project data and click Create. Wait a few seconds and our application work will be finished! Next, you can perform a real-machine test on the device, or directly publish the application to the software store.

Summary

The more tests in the future, the better. When we refine our application work, release the user version. This may be the first step for brilliant success!

I hope this guide will help you better and better on the road of mobile development. Thank you for your support!