Hostinicon
GET HOSTING FROM $3.95/MO PLUS A FREE YEAR ON TUTS+ (RRP $180). HURRY OFFER LIMITED. Check it out
Advertisement

Corona SDK: Build a Monkey Defender

by
Gift

Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo

In this tutorial, we will be creating a game called Monkey Defender using the Corona SDK! This game will serve as a great foundation for a lot of different genres include defense style games. So, let's get started!


Project Overview

In this version of Monkey Defender, the player will have to defend the monkey by shooting monkey grenades at the incoming spaceships. Every time the player successfully hits an enemy spaceship, their score will increase by one. If they fail to hit the enemy spaceship before it reaches the monkey, they will lose one banana, or one life. When the player runs out of bananas, it's game over!

This game was built with the Corona SDK and here are some of the things you'll learn:

  • How to utilize Storyboard
  • How to use widgets
  • How to rotate objects based on touch
  • How to use Corona's Collision
  • How to build a full game with the Corona SDK

Tutorial Prerequisites

In order to use this tutorial, you’ll need to have the Corona SDK installed on your computer. If you do not have the SDK, head over to http://www.coronalabs.com to create a free account and download the free software.

To download the graphics that I used for the game, please download the source files attached to this post. The graphics for this game come from www.opengameart.org and www.vickiwenderlich.com. The background graphic comes from Sauer2 at Open Game Art and the rest of the graphics come Vicki Wenderlich. If you decide to publish this game with these graphics, please be sure to credit both artists.


1. Build Configuration

The first step to build our game, Monkey Defender, is to create a new file called build.settings and place it inside of your project folder. The build.settings file handles all of the build time properties inside of our app. For our game, we only need to worry about the orientation of the game, and we are only going to allow landscape mode.


2. Runtime Configuration

Next, we will create another file called config.lua and place it within your project folder. The config.lua file handles all of our runtime configurations such as the height, width, scaling type, and frame rate. For our game, we are going to set up our app to be 320x480, to be in a letter box and to have 30 frames per second.


3. Building main.lua

Now that we have our project configured, we can move forward with creating main.lua. The main.lua file is the starting point of every app built with the Corona SDK, so create a new file called main.lua and move it to your project folder. Inside of our main.lua file, we will hide the status bar, add some global variables, and use Corona's Storyboard feature to manage our scenes.


4. Building the Menu

With our main.lua file set up, we are going to move on to our menu. The menu for this game will be simple. It will display the title of the game and a button to start the game.

Step 1

To get started, create a new file called menu.lua and place the file in your project folder. The first addition to this file is to add a storyboard and the widget library. While the storyboard will allow us to easily manage our scene, the widget library will allow us to easily add common elements to our app. In this case, we will be using the widget library to add a button to our menu. We'll get to that later.

Step 2

After the requires, we will create our first function called scene:createScene(). This function will be called when the scene does not exist and is a perfect place for our game title and button.

Step 3

Inside of our scene:createScene() function, we will create a new display object that will be used as our background. If you haven't already, make sure you download the source files for this tutorial and place all of the graphics inside a folder named images in your project.

The background display object will be centered on the screen and inserted into our group variable. By inserting the display object into our group variable, we are telling Corona that this object belongs to this scene. When we switch scenes, Corona will know to remove this object or hide it because we are no longer viewing the menu scene.

An in-depth look at storyboards is outside of the scope of this tutorial, but you can read more at the official documentation.

Step 4

After our background object, we will place a text object that will display the title of our game. This text object will be centered on the screen and inserted into the group variable.

Step 5

Our last addition to the function scene:createScene() will be a button widget. This widget will allow players to start the game. Before we can add the widget, we need to create a function that will handle the touch event.

When the button is touched, the following function will be called. This function will send players to the game scene, which we will be creating later.

Step 6

After the onPlayBtnRelease function, we will then add the button to the menu scene. We add the button by using widget.newButton with a couple of parameters. The label property will set the text of our button and the onRelease property will tell our app which function to fire when it's touched. Then, we will place the button in the center of the screen and insert it into the group variable. The playBtn will be the last piece added to the scene:createScene() function.

Step 7

Right after the scene:createScene() function, we are going to add the scene:enterScene() function. This function will be called after the scene is created and it's on the screen.

Step 8

To wrap up our menu.lua file, we will add two event listeners and return the scene variable. This is an important step because the two event listeners will fire the appropriate functions and return the scene variable to signify the end of the file.


5. Game Logic

By now, we've completed the configuration, the main.lua file and the menu.lua file. Next, we are going to create the logic for our game.

Step 1

The game logic will be held inside a file called game.lua. To get started, create a new file called game.lua and place it inside your project folder. Our first addition to the new file is to require Corona's Storyboard.

Step 2

Next, we will add physics to our game. We will use physics to make collision detection between the bullets and the enemy ships easier. Right after the physics capability is added, we will pause it so it doesn't interfere with the creation of the scene.

Step 3

After the physics, we will predefine the variables for our game.

Step 4

The next set of variables will be used as settings for our game. Feel free to change the speeds of the game or increase the number of lives for the player.

Step 5

Now we will create our scene:createScene function.

Step 6

Next, we will create a function that will be fired when the background display object is touched, and this function will contain the bulk of our game logic. When fired, we will rotate the monkey towards the touch event and fire a bullet towards the same touch event.

First, let's create the touched function and create a conditional statement so our logic only runs during the begin phase.

Within the if-then statement, we use the math library to determine the angle between the monkey and the touch event. This is accomplished by using a combination of math.deg and math.atan2 to find where the monkey needs to be rotated. After the rotation degree is found, we rotate the monkey to the appropriate position.

Since this function is going to fire a bullet, we have to create the bullet as a display object. Once it's created, we will make the physics object so it can respond to collisions with the enemies.

Now that we have our bullet, we need to find out where to send it. To do this, we first determine whether we need to send the bullet to the left or right and then use the y = mx + b formula to determine the y location. Our last bit of math is to find the distance between the two points so we can determine how fast to project the bullet.

Now that we know the distance and the x/y coordinates of the bullet destination, we can send our bullet to the destination using transition.to. We'll also need to include a couple of end statements to wrap up the touched function.

Step 7

After all that math, the next few steps are simple. We will add a background to our game (we will attach an event listener to the background later), the monkey, and a text object to display the score.

We will also insert three bananas to represent three player lives in the top right of the screen.

Step 8

Next, we will create a function that will send bad guys toward our player. We are going to call this function createBadGuy and we will first determine which direction to send the bad guy from.

After we have determined the direction that our bad guy will come from, we will then create a new display object for our bad guy and turn the bad guy into a physics object. We’ll use physics to detect collisions later on.

Then, we will use Corona’s transition.to to move the bad guy towards the center of the screen. Once the transition is done and the enemy has not been hit, we will remove the bad guy and subtract one life from the player.

If the player’s lives have reached 0 or less, we will stop sending the bad guys and remove the player’s ability to send more bullets. We will also show two text objects to signify that the game is over and let the player return to the menu.

Step 9

The last function inside of scene:createScene is for collision detection. When a bullet and bad guy collide, this function will be trigged and the following will happen:

  • Add 1 to the player score and update the score text object.
  • Set the alpha of both objects to 0.
  • Cancel the transition on each object so it does not interfere with the removal process.
  • Finally, we will create a timer that will wait 1 millisecond before removing both objects. It’s always a bad idea to remove display objects in the middle of collision detection.

Step 10

After the scene:createScene, we will then write our enter scene function. This function is fired after the scene is created and moved on to the screen. Inside the enter scene function, we will start all of the functions that we wrote in the create scene function.

Step 11

We are almost done! The last piece of our code is to add the scene event listeners and return the variable scene. The event listeners will trigger our functions and the return statement lets Corona know we are done with this scene.


Conclusion

I hope you enjoyed this tutorial on creating a Monkey Defender game with the Corona SDK! We covered a lot of topics ranging from storyboards to geometric formulas! If you have questions or comments, please leave them below and thank you for reading.

Advertisement