Corona Coin Drop with Corona SDK Part 1

Hello Corona SDK Developers!

I wanted to develop another Corona SDK game tutorial that focuses on simple game mechanics. These type of game mechanics can be used and built on for ever more game types. In this tutorial series, we’ll be building a game called Corona Coin Drop.

Corona Coin Drop gives you one loveable purple monster and the player must catch as many as coins as he or she can. The player moves the purple monster by tilting their device left or right. For every coin caught, the player will earn one point. For every coin missed, the player will lose one point. This game will also feature a menu scene and a game scene. The menu scene will display a background graphic with the title graphics. The game scene will allow the player to control the purple character and catch coins.

During this tutorial, you’ll learn some real life application of the following topics:

  • Scene management with Composer
  • How to use widgets
  • Using physics to add bodies and detect collisions
  • Drop Coins
  • Use the accelerometer
  • Send coins using timers
  • And trigger a game over event

You can grab the full template for this project at http://gamebuildingtools.com/product-category/game-templates. This full template will contain the graphics I used during this project. Let’s get started!

Setting up our project

To setup this project, I used Corona’s built in project creator. Open Corona, go to new project, and set the width to 800 and the height to 1200. Below is a screenshot of the project setup. I’m on a Mac, so your setup may look a bit different.

Screenshot 2016-08-24 14.11.45

main.lua

After your project is setup, open up main.lua in your favorite text editor and add in the following code:

-- Hide the status bar
display.setStatusBar( display.HiddenStatusBar )

system.setAccelerometerInterval( 60 )

-- Go to the menu scene
local composer = require( "composer" )
composer.gotoScene("scene-menu")

main.lua is the starting point of every Corona build app and adding this code will hide the status bar. We will also send the player to the menu scene using the composer library. The composer library is Corona’s built-in scene management tool. A basic way to explain scenes is that each screen is equivalent to a scene. Therefore, the menu is a scene and the game play is a different scene. We also increased the accelerometer interval to help the game pick up all collision instances. On older devices, this may cause some lag issues, but any decent or modern device will be able handle this interval.

scene-menu.lua

Next, create a new file in your project folder called scene-menu.lua. Similar to Corona Starfighter, I prefer to use Corona’s scene template. Head on over to https://docs.coronalabs.com/api/library/composer/index.html#scene-template and copy everything from local composer = require( "composer" ) to return scene and copy this to scene-menu.lua. This will give us a starting point for our menu scene.

Once you have the code copied, add the widget library after the composer library creates a new scene.

local composer = require( "composer" )
local scene = composer.newScene()
local widget = require( "widget" )

I also take advantage of using shortcuts within my games. We won’t go into modules, but we will use these variables listed below throughout our game. Enter these after the widget library.

-- These values are set for easier access later on.
local acw = display.actualContentWidth
local ach = display.actualContentHeight
local cx = display.contentCenterX
local cy = display.contentCenterY
local bottom = display.viewableContentHeight - display.screenOriginY
Next, we’ll create a function that will send the player to the game scene. This function will accept a parameter, named event, and when this event is in the ended phase, we’ll send the player the game scene. The event parameter will hold more information, but we are just looking for the ended phase. The ended phase occurs when the player stops interacting with the play button.
-- Scene event functions
-- This function will send the player to the game scene
local function onPlayTouch(event)
 if(event.phase == "ended") then
  composer.gotoScene("scene-game", "fade")
 end
end

Then, within the scene:create function, we’ll add our background and play buttons. Here’s what the full create scene function looks like.

-- create()
function scene:create( event )

local sceneGroup = self.view
-- Code here runs when the scene is first created but has not yet appeared on screen
local background = display.newImageRect(sceneGroup, "images/title-background.png", acw, ach) -- I make the background larger than the width/height specified in config.lua. This allows the entire device screen to be filled up with the background graphic without stretching it.
background.x = cx
background.y = cy

-- Create a start playing button. When touched, trigger the onPlayTouch function
local btn_play = widget.newButton({
 left = 100,
 top = 200,
 label = "Play",
 fontSize = 70,
 labelYOffset = -10,
 labelColor = { default={ 1, 1, 1 }, over={ 0, 0, 0, 0.5 } },
 defaultFile = "images/btn_start.png",
 overFile = "images/btn_start_over.png",
 onEvent = onPlayTouch
}
)
btn_play.x = cx
btn_play.y = cy + 450
sceneGroup:insert(btn_play)

end

In the code above, we first add in a background graphic that will display our game title and character. Then, we’ll add in a button that will trigger the onPlayTouch function. We’ll add some customization to the play button so it will display a label, a particular font type, and a couple of images.

In the next part, we’ll begin our setup of our game scene. If you have any questions about Part 1, leave them in the comments below! Stay tuned for part 2!<

Daniel Williams

One thought on “Corona Coin Drop with Corona SDK Part 1

  1. Pingback: Catch Me - Part 1 - Game Building Tools

Leave a Reply

Your email address will not be published. Required fields are marked *