Corona SDK Tutorial: Making a Basic Scoreboard Mobile App in Corona SDK

Introduction

In this tutorial, I’ll show you how to create a scoreboard app using Corona SDK and the Lua Programming language. Here’s a screenshot of the final product we’ll be making:

In our scoreboard app, clicking the blue side of the screen will increase the blue score by 1, and clicking the red side of the screen will increase the red score by one.

We’ll be using the starter version (free) of Corona SDK for this tutorial, and running on Windows. Open the Corona Simulator, and click New Project -> Blank.

Now, pop up your favorite code editor (Sublime Text 2, Notepad, etc.), navigate to the main.lua file, and lets start coding! For the images, feel free to download the source files.

1. Hide the status bar!

display.setStatusBar(display.HiddenStatusBar);

This hides the status bar inside the app. We don’t want it interfering with our score-keeping!

2. Creating the Variables

local redscore = 0
local bluescore = 0

Here we’ve created two new variables for the blue and red scores.

local means that we’re creating a new local variable (only exists in this scene). If we were to create a global variable, it would be shown as just redscore = 0, without the local at the beginning. redscore is the name of the variable. =0 Sets the variable’s initial value to 0.

3. Setting the Background

local background = display.newImage("images/background.png");

This is our background image that will be shown in the final product.

local background Creating a new variable named background.

display.newImage Created a new image in the phone screen. (“images/background.png”); Shows where the image file is located at. The “;” at the end represents the end of a chunk of code, or a single statement. Semicolons may optionally follow any statements. Here is an article on the Lua website with more details on Semicolons.

4. Adding the sensors

local redc = display.newImage("images/redc.png", 0, 0);
local bluec = display.newImage("images/bluec.png", 240, 0); 

In the Scoreboard App, we’ll need to increase the bluescore and redscore variables by 1 every time the area is tapped. We are going to accomplish this by using a pre-drawn background and 2 touch listeners, which will be placed in the red half and the blue half. These two images we placed are blank images, and their only purpose it to serve as a sensor.

5. Displaying the Text

local redtext = display.newText(redscore, 65, 100, native.systemFont, 128); 
local bluetext = display.newText(bluescore , 290, 100, native.systemFont, 128);

local redtext = New variable.

display.newText Displays text in the screen.

redscore What are we displaying? That right, the redscore variable.

65,100 The X and Y variables.

native.systemFont This is the font we are using. For this app, we will be using the basic font.

128 This is the font size.

6. Adding the First Touch Function

Here, we create our first function. What’s a function? I’ll give you an example. In a Super Mario-styled platformer game app, the player often dies. Rather than type the same chunk of the code (for Mario’s death) hundreds of times, why not use a function? If you used a function, you would only have to write the code for Mario’s death once, and whenever Mario should die, you just call the function of Mario’s death.

local function redt( event )  
  redscore = redscore + 1;  
  redtext.text = tostring(redscore)  
  return true 
end 

local function redt (event) Created a new function called redt, which is basically a chunk of actions that you can call anytime easily.

redscore = redscore + 1 Added 1 to the variable redscore.

redtext.text = tostring (redscore) Here, we printed out a string representation of the text that was going to be displayed. Lua can be buggy sometimes and this line solves this bug. If the line was not typed, the scores would not increase.

return true This means that the function will be finished.

end The end of this function.

7. Adding the Touch Listener

Now that we have a function, we need to let Corona know when to initiate this function, and that would be when someone taps on the screen. Every time someone taps on the redc sensor, the redt function needs to be called.

redc:addEventListener( "tap", redt )

redc:addEventListener We added an event listener to redc here (the picture).

tap This the event we are listening here. There are two types of touch events. One is tap, and one is touch. Tap is simpler and basically just gets called when the user’s finger (or something else) touches the screen, and Touch is more advanced where you have different phases such as Begin and End. Here is a link for more information about the Touch event.

redt This is the function that needs to be called when this event happens.

8. Touch Function and Event for Blue

local function bluet( event )  
  bluescore = bluescore + 1;  
  bluetext.text = tostring(bluescore)  
  return true 
end 
bluec:addEventListener( "tap", bluet )

This is the equivalent of steps 6 and 7, but for the blue side.

9. Run the app!

Running the app is quite simple. Head over to the Corona Simulator, and click Simulator.

Then, navigate to your main.lua file, and double click it. Our scoreboard app is up and running! Here is what it should look like:

• Extra Features:

This app has great potential and there are several features you can add. I’m gonna add some extra buttons on the sides – one of which will read “About”, and the other “Reset”. Pressing About will take you to the developer’s website (in this case, Codementor.io), while pressing Reset will set both the red and the blue score to zero. To do so, this is the required code:

local about = display.newImage("images/about.png", 0, 100);

local reset = display.newImage("images/reset.png", 450, 100);

–This is to show the image

local function reset( event )
    redscore = 0;
    bluescore = 0;
    redtext.text = tostring(redscore)
    bluetext.text= tostring(bluescore)
    return true
end
reset:addEventListener( "tap", reset )
local function aboutt( event )
    system.openURL( "http://codementor.io/" );
    return true
end
about:addEventListener( "tap", about )

— This is to add the touch functions and event listeners for the new functions.

system.openURL(“”) opens a URL with the default browser of the Android system.

Here is what it should look like after the additions:

Summary

In this tutorial, we learned how to make a Scoreboard app with Corona SDK and the Lua programming language. We have learned about variables, functions, events, images, and text in the process. I hope you have enjoyed this tutorial and it has been helpful – if you’ve got any questions, tell me in the comments and I’ll do my best to respond!

About the Author

Ryan Chang is a blogger, writer, developer, and designer.  He blogs at Nukeblogger and you can contact him by email here.   He enjoys all sorts of development and also general tech-related subjects.