Corona SDK Game Development Instance (I): create a user interface

Tutorial description:

• Tool used: Corona SDK
• Execution difficulty: normal
• Operation Time: 30 minutes to 60 minutes

Step 1: Application Overview

With the help of Lua and Corona SDK APIs, we will use pre-prepared image materials to create an interesting little game.

Players need to use the gyroscope of the device to control the ball to avoid obstacles and finally reach the destination. You can modify game parameters to customize the content.

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: Sound

To give gamers a more pleasant gaming experience, we need to set various sound effects for events. All the audio resources involved in this instance can be found on the Soungle.com website. Search for the keyword "bell" and "buzz.

Step 6: 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 7: 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 8: 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 9: 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 10: import the physical Engine

To restore the real collision response, we need to use the physical effect library in the application and use the following code to import the Library to the program:

 
 

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

Step 11: Game 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 12: Title View

As shown in the title view, it is the first interactive interface we face after entering the game. The content is set and saved according to the following variables.

 
 

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

Step 13: production personnel View

The developer name and game copyright ownership information are shown in the following variables.

 
 

  
  
-- [CreditsView] 
  
  
local creditsView 
 
 

Step 14: Game View

The game view involves many elements, including players, obstacles, and destinations. Use the Code listed below to create a basic game interface.

 
 

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

Step 15: Sound

The following code saves the sounds used in the game.

 
 

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

Step 16: Code Review

The following lists all the Code outlines mentioned in this tutorial. You can check the works from a macro perspective to confirm that all elements are included in the final program:

 
 

  
  
-- 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') 
 
 

Step 17: function declaration

Declare the basic status of all functions at the beginning of the application.

 
 

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

Step 18: Game Constructor

Next, we will create an initialization Mechanism for the running logic. The details are as follows:

 
 

  
  
function Main() 
  
  
    -- code... 
  
  
end 
 
 

Step 19: add the title View

Now we place the title view in the main interface, and call the function used to listen to the button "Touch" action.

 
 

  
  
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 
 
 

Step 20: Start button listening

This function is used to add the required listener for the title View button.

 
 

  
  
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 
 
 

Step 21: display the developer list

When you click the corresponding button, the application will display a list of developers. In this case, you need to add an additional listener so that when the user clicks again, the program will suspend the list and return to the main interface.

 
 

  
  
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 
 
 

Step 22: Hide the developer list

When a user clicks the screen during the display of the developer list, the display will be interrupted in the form of animation and return to the main interface.

 
 

  
  
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 
 
 

Step 23: display the game view

When you click the "Start game" Play) button, the title view will be removed in the form of animation and display the game view.

 
 

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

Step 24: Destination

Here we want to set a destination for the ball. In addition, we also need to set a name for it so that the scheduled event can be triggered smoothly when the ball touches the destination.

 
 

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

Step 25: Wall

We need to set the wall in the game interface to ensure that the ball is always active in the predefined game venue.

 
 

  
  
-- 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) 
 
 

Step 26: obstacle

These Bar obstacles are the key to improving the fun of the game. You can use the following code to implement these settings in the game.

 
 

  
  
-- Bars 
  
  
 
  
  
local b1 = display.newImage('bar.png', 92, 67) 
  
  
local b2 = display.newImage('bar.png', 192, -2) 
  
  
local b3 = display.newImage('bar.png', 287, 67) 
  
  
local b4 = display.newImage('bar.png', 387, -2) 
 
 

Step 27: traps

These traps are the "enemies" we designed for the ball. Once the ball touches them, the game ends.

 
 

  
  
-- Holes  
  
  
 
  
  
local h1 = display.newImage('hole.png', 62, 76) 
  
  
local h2 = display.newImage('hole.png', 124, 284) 
  
  
local h3 = display.newImage('hole.png', 223, 224) 
  
  
local h4 = display.newImage('hole.png', 356, 114) 
  
  
local h5 = display.newImage('hole.png', 380, 256) 
  
  
-- Name holes for collision detection 
  
  
h1.name = 'h' 
  
  
h2.name = 'h' 
  
  
h3.name = 'h' 
  
  
h4.name = 'h' 
  
  
h5.name = 'h' 
 
 

Step 28: small ball players)

Next we will add the main character-ball in the game. With the help of the device gyroscope, the ball will naturally scroll with the player's operations.

 
 

  
  
-- Player  
  
  
 
  
  
player = display.newImage('player.png') 
  
  
player.x = 49 
  
  
player.y = 288 
  
  
player:setReferencePoint(display.CenterReferencePoint) 
 
 

Next Forecast

In the first part of this series of tutorials, we have discussed how to design user interfaces and basic settings for games. I hope you will continue to pay attention to the second part. At that time, we will learn how to process the logic, buttons, operations, and other details of the application. Let's see you next time!

Http://mobile.tutsplus.com/tutorials/corona/corona-sdk-create-a-teeter-like-game-setup-interface-creation/