Intro to Mobile Game and App Development and Corona SDK 2015

In this section, we will be covering the basics of the Lua programming language. This section is not meant as an in-depth coverage of Lua. Instead, it's meant to get you jump-started into coding games right away. If you would like more information about Lua, head on over to Lua.org or go right to their reference manual at http://www.lua.org/manual/5.3/.

If you are already familiar with the Lua programming language, please feel free to skip to the next section – Corona Basics.

Check out the full list of Lua scripted video games at http://en.wikipedia.org/wiki/Category:Lua-scripted_video_games. For more information on Lua, head on over to Lua.org.

In this lecture, we'll be discussing variables. Variables allows you to store information in your app such as name, age, number of coins, or current level. You'll learn about the 3 basic data types - numbers, strings, and boolean values.

This lecture discusses operators. Operators allow you to add, subtract, multiply, divide, compare and more. Watch this video to learn more.

Tables allow you to store multiple types of variables in one neat location. You can store numbers, strings, and boolean values.

Tables use indexes and values to store data. Indexes reference the location of a value within a table. Indexes can be either numbers or names, otherwise known as associative arrays.

For Loops! For loops allow you to perform repetitive actions for a known number of times with fewer lines of code.

While loops can accomplish the same task as a for loop, but they are best used when your app needs to run a loop for an unknown number of times. It's all about using the right tool for the job!

The if then statement is useful for making decisions in your app. With Lua, you also have access to the if/else statement which is useful for deciding between multiple options.

A function is a code group that performs a specific task. You can break down your projects into functions to make building your next game manageable. Functions also allow you to repeat code, such as updating scores, from one place so you can reuse the same piece of code.

When to use and when not to use global variables can be a confusing subject. For further clarification on the topic of local vs global, please visit the following resources.

Corona Labs Blog - https://coronalabs.com/blog/2013/05/28/tutorial-goodbye-globals/

Corona Geek - https://www.youtube.com/watch?v=eYRxlhs4Mi4

Lua.org, local variables and blocks - http://www.lua.org/pil/4.2.html

And finally, locals vs. globals as discussed on lua-users.org: http://lua-users.org/wiki/LocalsVsGlobals

In this lecture, we will go over some of the best coding practices. This lecture doesn't cover all of the best coding practices or the coding styles, however, you'll be exposed to some of the basics to help keep your code clean and organized.

In this section, you will learn about some of the core concepts of Corona SDK. These core concepts will create a solid foundation for your game development career. Some of the concepts you'll learn about are:

• Corona Project Setup
• Displaying Images
• Displaying Shapes
• Events
• Widgets
• Composer
• And More!

In this lecture, you'll find out where to download Corona SDK from. In case you missed, you can download Corona for free at CoronaLabs.com.

We'll quickly set up our project for Corona Basics.

We'll take a quick look at our project setup for the Corona Basics section.

Get familiar with the Corona Console and Corona Simulator. The console will give us feedback on what's going on in the simulator and the simulator will give us a real time representation of our app.

You'll learn how easy it is to display images with Corona SDK. You'll be using the following line:

display.newImage()

Corona allows us to easily create basic shapes for our apps. This lecture will go over some of the options that you have available. Below are the shapes that we discussed:

display.newCircle( xCenter, yCenter, radius )
display.newRect( x, y, width, height )
display.newRoundedRect( x, y, width, height, cornerRadius )
display.newLine( x1, y1, x2, y2 )
display.newPolygon( x, y, vertices )

You can always find more information about each of these shapes at https://docs.coronalabs.com/.

With event listeners, you'll learn how to make your app interactive using Corona's even driven programming. Here's an example - alien:addEventListener("tap", alienTapped)

Widgets allow us to easily add interactivity to our app by using buttons, picker wheels, steppers and more. To view widget demos, use the sample code that comes bundled with Corona. Or, if you just want to read a list of widgets offered, head on over to https://docs.coronalabs.com/api/library/widget/index.html.

Physics allows us to easily add gravity and help with collision detection to our Corona built applications. This lecture is meant as a high level overview to physics with Corona. To read more, head on over to https://docs.coronalabs.com/guide/physics/index.html for more information about physics.

Composer is the official scene management library supported by Corona. Composer allows you to switch between scenes and manages memory management for your app. You can learn more about Composer at https://docs.coronalabs.com/api/library/composer/index.html.

You'll set up your first project using Corona's built-in new project feature. The new project will use the default settings in the project set up. Please make sure to copy over the images that you've downloaded in a previous lecture to your project.

main.lua is the place where every Corona built app starts and we'll start our game development here.

In this lecture, you'll create a new file called menu.lua and add the scene template from Corona's documentation. You can find Corona's documentation at http://docs.coronalabs.com and the scene template is located here - https://docs.coronalabs.com/api/library/composer/index.html#scene-template

With our menu scene setup, we'll continue working on this scene by adding display objects. We'll add a background, ground, Bob, and a game title.

We'll close up our menu scene by adding a widget for our play button.

For part 1 of our game scene, we'll create game.lua and enter in the scene template from http://docs.coronalabs.com.

You'll be setting up forward declares and functions in Part 2 of setting up the game scene.

We'll be adding Bob the Catcher to our game along with the background, ground, and text objects.

We'll use timer.performWithDelay to create a timer to send coins in our game every 1250 milliseconds. A timer is built using this call -

 timer.performWithDelay( delay, listener [, iterations] ) 

Where delay is in milliseconds, the listener is the name of the function, and iterations is how many times to call the function.

You'll be coding the function moveBob to allow Bob to move back and forth on the screen. Bob will move according to the tap position on the device using event listeners.

In this lecture, we will set up global collision detection for Bob the Catcher. Using physics for collision detection, the game will detect for collisions between Bob and the coins.

We'll wrap our game by adding functionality to our menu button.

When we built Bob the Catcher, we used display.newImageRect() to display images in our game. The final step to enable retina display images is to edit our config.lua file.

Inside of the image suffix table, we already have [“@2x”] = 2. The @2x is the image suffix that is added to all retina images and the number 2 is the scale factor.

The scale factor tells Corona when to use retina images. In our case, it's going to be when the device is 2 times the size of width and height.

We'll add a coin catching sound to our game to make our game a little more appealing for all players. Please download the coin.mp3 file from the resources located in this lecture.

We'll add some more polish by remove event listeners, canceling timers, and removing scenes.

This lecture will give you an idea of what to expect while we developer UFO Slayer 1983.

A note about the sounds: The background music is from Deceased Superior Technician or DST. The website is located at nosoapradio.us. The UFO destruction sound comes from LittleRobotSoundFactory. I did not create these sounds, but they are available for free with attribution.

In this section, you'll learn about the project layout and download the project template that will be used throughout this course.

We'll quickly go over main.lua, build.settings, and config.lua. I want to power through these files so we can get to the good stuff. I feel that you already know the basics and there's no reason to reiterate them here. If you need any clarification on any of these files, I'll happy to answer your questions.

The forward declares added in this lecture are as follows:

local width = display.contentWidth -- width of screen
local height = display.contentHeight -- height of screen
local top = display.screenOriginY -- Top
local left = display.screenOriginX -- Left
local right = display.viewableContentWidth - left -- Right
local bottom = display.viewableContentHeight - top -- Bottom

Feel free to copy and paste the forward declares from here. You can also download the scene template on Corona Labs at https://docs.coronalabs.com/api/library/composer/index.html#scene-template.

In this lecture, we will be adding some background sound to our game. Please check out the credits file to see who created this awesome track.

The code added in this lecture is:

local backgroundMusic = audio.loadStream("sounds/background.mp3")
audio.play(backgroundMusic, {loops = -1})

The code that was used for this lecture is below. This lecture will wrap up the menu scene by adding two graphics, a start button, clean up code for the game scene.

Part 1
local background = display.newImageRect(sceneGroup, "images/background.png",
display.actualContentWidth, display.actualContentHeight)
background.x = width * 0.5
background.y = height * 0.5

local title = display.newImageRect(sceneGroup, "images/title.png", 480, 183)
title.x = width * 0.5
title.y = top + 75

local function onStartTouch(event)
if(event.phase == "ended") then
composer.gotoScene("game", "fade")
end
end

local btn_start = widget.newButton{
width = 273,
height = 71,
defaultFile = "images/btn_start.png",
overFile = "images/btn_start_over.png",
onEvent = onStartTouch
}
btn_start.x = width * 0.5
btn_start.y = height * 0.75
sceneGroup:insert(btn_start)

---

Part 2
local previousScene = composer.getSceneName("previous")
if(previousScene) then
composer.removeScene(previousScene)
end

In this lecture, we will be using the scene template from https://docs.coronalabs.com/api/library/composer/index.html#scene-template as the basis for our game scene. Once implemented, we will add in the widget library and the physics library.

The code used for this lecture is:

local widget = require("widget")

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

This lecture is all about setting up the variables that we will be using throughout the game scene. A forward declare is basically creating and defining a variable before it is used. The code used for this lecture is as follows:

local width = display.contentWidth
local height = display.contentHeight
local top = display.screenOriginY
local left = display.screenOriginX
local right = display.viewableContentWidth - left
local bottom = display.viewableContentHeight - top

local player, txt_playerscore, txt_playerlives, txt_menu
local tmr_sendenemies, tmr_sendbullets
local enemy = {}
local enemyCounter = 1
local bullets = {}
local bulletsCounter = 1
local playerScore = 0
local playerLives = 3

local laser = audio.loadSound("sounds/laser.mp3")
local ufoHit = audio.loadSound("sounds/ufohit.mp3")

In this lecture, we will be adding in the follow functions. We will code these in at a later lecture.

local function returnToMenu()

end

local function sendEnemies()

end

local function movePlayer()

end

local function sendBullets()

end

local function onGameOver()

end

local function onCollision()

end

As promised, here's the code I copied and pasted into this file. I believe we are at a point where we can take this shortcut. However, I've added a few comments below to explain what each piece does. If you have any questions, please let me know!

-- Create the background

local background = display.newImageRect(sceneGroup, "images/background.png", display.actualContentWidth, display.actualContentHeight)

background.x = width * 0.5

background.y = height * 0.5

-- Create the player ship

player = display.newImageRect(sceneGroup, "images/player.png", 30, 40)

player.x = left + 50

player.y = 50

player.name = "player"

physics.addBody(player, "static")

-- Create a text object for the player score

txt_playerscore = display.newText(sceneGroup, "Score: "..playerScore, 0, 0, native.systemFont, 14)

txt_playerscore.x = right - txt_playerscore.width

txt_playerscore.y = bottom - txt_playerscore.height

-- Create a text object to track player lives

txt_playerlives = display.newText(sceneGroup, "Lives: "..playerLives, 0, 0, native.systemFont, 14)

txt_playerlives.x = left + txt_playerlives.width

txt_playerlives.y = txt_playerscore.y

In this lecture, we will learn how to send the player back to the menu, send enemies from the right side of screen to the left side of the screen, and send bullets. We will be attaching physics objects to our objects and using transition.to().

We are getting close to wrapping up! This lecture will cover how to send bullets from the player ship and how to create the game over function.

In this lecture, we will learn how to code the on collision detection function. This is the biggest part of our game and one of the longer lectures of this course. However, you will learn what makes a game run by properly handling physics collisions. When we have a collision in our game, we'll remove a ufo ship, end the game for the player, or add some points for our player.

For help for your Corona related questions, head on over to http://forums.coronalabs.com/ to get some great answers. Just remember, be nice and post your code!

The code exchange is located at https://code.coronalabs.com/ and you can find some valuable pieces of code from the community for your next project.

Corona Documentation is located at https://docs.coronalabs.com/ and is the resource for building your Corona app. Even I forget some APIs from time to time so be sure to reference the documentation as often as possible!