How to Make a Simple iOS and Android Game with Corona Tutorial

Giving the Player Feedback

When you save your changes to main.lua, nothing new will happen in the simulator since the code simply sets up the variables above. Time to create some text to give the player feedback!

Add the following code below the variable section in main.lua:

-- Create a new text field using native device font
local screenText = display.newText("...Loading Balloons...", 0, 0, native.systemFont, 16*2);
screenText.xScale = 0.5
screenText.yScale = 0.5;

-- Change the center point to bottom left
screenText:setReferencePoint(display.BottomLeftReferencePoint);

-- Place the text on screen
screenText.x = _W / 2 - 210;
screenText.y = _H - 20;

In the code above, you create a variable named screenText and assign it a line of text to display in the device’s native font. Then you set the text to scale evenly, regardless of the device.

The reference point is at the bottom left hand corner of the object in question, relative to the coordinates that are used for that particular object. In this case, when you specify coordinates for the screenText item, the bottom left of the item is placed at the specified coordinate point.

For the x coordinate placement, you take the width of the screen, divide it in half and then move the text over 210 pixels to the left. For the y coordinate, you take the height of the screen and move up 20 pixels up from the bottom.

Note: Corona coordinates start with 0,0 being the top left corner of the screen.

Refresh the simulator (if you haven’t been prompted to do so already) and you should see the following:

Navigate to “Window > View As” in the simulator and change devices. The loading text should stay in approximately the same place for every device, and the app should look very similar regardless of the device selected.

Change back to the iPhone view and add some code to main.lua to show the player the countdown (all code gets added below the previous code in the file, unless unless otherwise stated):

-- Create a new text field to display the timer
local timeText = display.newText("Time: "..startTime, 0, 0, native.systemFont, 16*2);
timeText.xScale = 0.5
timeText.yScale = 0.5;
timeText:setReferencePoint(display.BottomLeftReferencePoint);
timeText.x = _W / 2;
timeText.y = _H - 20;

This is exactly the same as the screenText variable, except that now you display the value of the startTime variable in place of hardcoded text. And of course, the text is placed at a different x coordinate, otherwise it would overlap the existing loading text.

Save your main.lua file changes and the simulator should refresh:

Bring Balloons to the Party

So far everything is going smoothly, but it’s not a very good game yet! Let’s add some gravity and balloons to spice things up a bit:

-- 1. Start the physics engine
physics.start()

-- 2. Set gravity to be inverted
physics.setGravity(0, -0.4)	

local function startGame()
	-- 3. Create a balloon, 25 pixels by 25 pixels
	local myBalloon = display.newImageRect("images/balloon.png", 25, 25);
	
	-- 4. Set the reference point to the center of the image
	myBalloon:setReferencePoint(display.CenterReferencePoint);
	
	-- 5. Generate balloons randomly on the X-coordinate
	myBalloon.x = Random(50, _W-50);
	
	-- 6. Generate balloons 10 pixels off screen on the Y-Coordinate
	myBalloon.y = (_H+10);
	
	-- 7. Apply physics engine to the balloons, set density, friction, bounce and radius
	physics.addBody(myBalloon, "dynamic", {density=0.1, friction=0.0, bounce=0.9, radius=10});
end

-- 8. Create a timer for the game at 20 milliseconds, spawn balloons up to the number we set numBalloons
gameTimer = timer.performWithDelay(20, startGame, numBalloons);

The above code adds a function. Functions in Lua are similar to methods in Objective-C. A function can be called from your main code, and you can define a function at any place in your code. But you must first define the function before you can call it — so any code that calls the function must appear after the function itself! Makes sense, doesn’t it? :]

The code then starts the physics engine, creates a new function called startGame which creates floating balloons, and sets up a timer to spawn the balloons on screen.

In just a moment you’ll get a bit more explanation of the code. But at this point, save your work and relaunch the simulator to illustrate what we’ll be talking about.

So now there’s a bunch of balloons floating off the screen! What just happened? Take a look at the code line-by-line:

1. Get the ball rolling by telling the physics engine to start running.
2. Set the horizontal gravity at 0 and the vertical gravity at -0.4. The negative gravity values means that vertical gravity, instead of being applied downwards, is applied upwards. So your balloons will rise and not fall.
3. Create a new variable named myBalloon and assign a 25×25 pixel balloon image to it that is found in the images folder.
4. Set the reference point for each balloon to be the centre of the object. All positioning for balloons will be relative to the centre of the balloon.
5. Set the x coordinate for the balloon to a random value between 50 and the screen width minus 50 pixels. Each balloon is placed randomly in the space 50 pixels in from both edges of the screen.
6. Set the balloon’s starting point 10 pixels below the bottom screen edge.
7. Apply dynamic (moving) physics to the balloon and assign the physics properties of friction, amount of bounce, and the radius.
8. Create a variable named gameTimer, which after 20 milliseconds, calls the startGame function until the numBalloons variable is reached. In this case, numBalloons is 100, so there will be 100 balloons generated.

You may be wondering why a radius value of 10 was chosen for your balloons. This is where physics.setDrawMode(“normal”) comes into play. Change “normal” to “hybrid” in main.lua and then save.Relaunch the simulator when prompted and you should see the following:

Now there is a semi-transparent overlay for anything with physics applied to it, including a 10 pixel circle which completely covers the balloon. If you were to change the radius to 50 and save the file, you would see 50-pixel circles bouncing off of each other.

You can also switch “hybrid” to “debug” to get rid of the artwork and just see physics shapes, as seen below:

The physics drawing modes are handy if you want to make sure that the physics simulation is working correctly, and that physics shapes are being added correctly to the desired objects. Since you know everything is working fine, switch the drawing mode back to “normal”.