Hello again everyone! I'm back with the second installation of our Corona SDK tutorial series.
Second Tutorial: Balloon Popping Game
To start out, we are going to be making a balloon popping game. You'll see a bunch of different tutorials out there describing this exact same thing. The reason for that is this combines a bunch of different elements at which Corona is best, and gives you a visual representation of their effectiveness.
Last time, we learned how to make a basic border with Lua code, and how to position and size it for any device. Now, we are going to take the images we made, and populate the game screen with them, and implement physics in the game world to make it a little bit more interesting.
We are starting out with our basic border from last time. Let's add in a background to give it some contrast.
background = display.newRect(-100,-100, 10000,10000)
background:setFillColor(90,228,228)
What we did here, was create a background rectangle that is very large, much larger than the screen or any potential device we are building for. You could, of course, set the size to be slightly bigger than the display.contentHeight and display.contentWidth (i.e. display.contentHeight*2, display.contentWidth*2), but I personally like doing to this way. There is more than one way to skin a cat, so feel free to use your own method here. The main point is to make it big!
The setFillColor code is the piece that is coloring in our background rectangle. This adheres to the RGB color model. In our tutorial, I've made it a kind of sky blue. You can use gradients, and we'll get into those at a different portion of the tutorial.
Can you use setFillColor on the borders? Of course! Simply use the :setFillColor portion with the name of your chosen border, and you can set the colors to whatever you prefer.
Now, we've got a nice box with a background. Let's throw some things into the box and see what happens. Remember from our previous tutorial, we already have some graphics properties created. I made some balloons in GIMP, which is a free open-source image editor on par with Photoshop. I know a lot of Adobe diehards will be upset with me for saying so, but I've never run into a feature that I needed, that was included in Photoshop but not GIMP. Here's the link [--------].
So, let's put in a balloon:
testBalloon1 = display.newImage("balloonyellow.png")
testBalloon1.x = display.contentWidth/1.8
testBalloon1.y = display.contentHeight/2.1
Here, we have created an object called testBalloon1 and declared it as an image rectangle (display.newImage). If you load this test code, you'll see a lonely yellow balloon somewhere inside of your box. It's just hanging out there, doing nothing at all. Now, we're going to add some physics!
physics.addBody(testBalloon1,{density=3, bounce=.091})
Here, we created a physics body for our testBalloon1 object. Simply put, we set some simple parameters for how the testBalloon1 object is going to interact with our physical world. Go ahead and reload the code, and see what happens.
It just falls right through our borders! That's because we forgot to set the physics border properties. At this point, they are just simple pictures with no body. Let's do that now:
physics.addBody(borderTop,"static",{density=3, bounce=.8})
physics.addBody(borderBottom,"static",{density=3, bounce=1.1})
physics.addBody(borderLeft,"static",{density=3, bounce=.8})
physics.addBody(borderRight,"static",{density=3, bounce=.8})
Now, you're going to look at these physics properties, and look at the one we made for the testBalloon1 object, and notice one glaring difference: our borders have the note "static" in them, while our testBalloon1 object does not. There are three types of physics object types:
Static: this type never has physics enacted on it. Other objects can bump into it, but it won't move with physics.
Dynamic: this is the most common type, which interacts with the physical world, you guessed it, dynamically. It can interact with physics, and physics interacts with it.
Kinematic: this is a very rare type, but incredibly useful. Basically, this type IS NOT affected by gravity, but interact with and be interacted with. It's useful for projectiles in some cases.
In Corona, any physics object that does not have its "type" specified, automatically becomes a dynamic physics object. Now, if we reload, we see that the testBalloon1 object will fall and collide with the bottom border, and bounce. Not to shabby. Next time, we'll take a look at adding more objects, spicing it up with static bodies, and talk about modifying physical body shapes. Stay tuned!
--main.lua
display.setStatusBar( display.HiddenStatusBar )
local physics = require "physics"
physics.start()
physics.setDrawMode ( "normal" )
background = display.newRect(-100,-100, 10000,10000)
background:setFillColor(90,228,228)
borderTop = display.newRect(0,0,display.contentWidth*2, 32)
borderTop:setReferencePoint(display.CenterReferencePoint)
borderTop.x = display.contentWidth
borderTop.y = display.contentHeight-display.contentHeight
-----------------------------------------------------------------------
borderBottom = display.newRect(0,0,display.contentWidth*2, 32)
borderBottom:setReferencePoint(display.CenterReferencePoint)
borderBottom.x = display.contentWidth
borderBottom.y = display.contentHeight
-----------------------------------------------------------------------
borderLeft = display.newRect(0,0,32, display.contentHeight*2)
borderLeft:setReferencePoint(display.CenterReferencePoint)
borderLeft.x = display.contentWidth-display.contentWidth
borderLeft.y = display.contentHeight
-----------------------------------------------------------------------
borderRight = display.newRect(0,0,32, display.contentHeight*2)
borderRight:setReferencePoint(display.CenterReferencePoint)
borderRight.x = display.contentWidth
borderRight.y = display.contentHeight
-----------------------------------------------------------------------
physics.addBody(borderTop,"static",{density=3, bounce=1.0005})
physics.addBody(borderBottom,"static",{density=3, bounce=1.0005})
physics.addBody(borderLeft,"static",{density=3, bounce=.8})
physics.addBody(borderRight,"static",{density=3, bounce=.8})
testBalloon1 = display.newImageRect("balloonblank.png", 96, 124)
testBalloon1:setFillColor(255,0,0)
testBalloon1.x = display.contentWidth/1.8
testBalloon1.y = display.contentHeight/2.1
physics.addBody(testBalloon1,{density=3, bounce=.091})
Second Tutorial: Balloon Popping Game
To start out, we are going to be making a balloon popping game. You'll see a bunch of different tutorials out there describing this exact same thing. The reason for that is this combines a bunch of different elements at which Corona is best, and gives you a visual representation of their effectiveness.
Last time, we learned how to make a basic border with Lua code, and how to position and size it for any device. Now, we are going to take the images we made, and populate the game screen with them, and implement physics in the game world to make it a little bit more interesting.
We are starting out with our basic border from last time. Let's add in a background to give it some contrast.
background = display.newRect(-100,-100, 10000,10000)
background:setFillColor(90,228,228)
What we did here, was create a background rectangle that is very large, much larger than the screen or any potential device we are building for. You could, of course, set the size to be slightly bigger than the display.contentHeight and display.contentWidth (i.e. display.contentHeight*2, display.contentWidth*2), but I personally like doing to this way. There is more than one way to skin a cat, so feel free to use your own method here. The main point is to make it big!
The setFillColor code is the piece that is coloring in our background rectangle. This adheres to the RGB color model. In our tutorial, I've made it a kind of sky blue. You can use gradients, and we'll get into those at a different portion of the tutorial.
Can you use setFillColor on the borders? Of course! Simply use the :setFillColor portion with the name of your chosen border, and you can set the colors to whatever you prefer.
Now, we've got a nice box with a background. Let's throw some things into the box and see what happens. Remember from our previous tutorial, we already have some graphics properties created. I made some balloons in GIMP, which is a free open-source image editor on par with Photoshop. I know a lot of Adobe diehards will be upset with me for saying so, but I've never run into a feature that I needed, that was included in Photoshop but not GIMP. Here's the link [--------].
So, let's put in a balloon:
testBalloon1 = display.newImage("balloonyellow.png")
testBalloon1.x = display.contentWidth/1.8
testBalloon1.y = display.contentHeight/2.1
Here, we have created an object called testBalloon1 and declared it as an image rectangle (display.newImage). If you load this test code, you'll see a lonely yellow balloon somewhere inside of your box. It's just hanging out there, doing nothing at all. Now, we're going to add some physics!
physics.addBody(testBalloon1,{density=3, bounce=.091})
Here, we created a physics body for our testBalloon1 object. Simply put, we set some simple parameters for how the testBalloon1 object is going to interact with our physical world. Go ahead and reload the code, and see what happens.
It just falls right through our borders! That's because we forgot to set the physics border properties. At this point, they are just simple pictures with no body. Let's do that now:
physics.addBody(borderTop,"static",{density=3, bounce=.8})
physics.addBody(borderBottom,"static",{density=3, bounce=1.1})
physics.addBody(borderLeft,"static",{density=3, bounce=.8})
physics.addBody(borderRight,"static",{density=3, bounce=.8})
Now, you're going to look at these physics properties, and look at the one we made for the testBalloon1 object, and notice one glaring difference: our borders have the note "static" in them, while our testBalloon1 object does not. There are three types of physics object types:
Static: this type never has physics enacted on it. Other objects can bump into it, but it won't move with physics.
Dynamic: this is the most common type, which interacts with the physical world, you guessed it, dynamically. It can interact with physics, and physics interacts with it.
Kinematic: this is a very rare type, but incredibly useful. Basically, this type IS NOT affected by gravity, but interact with and be interacted with. It's useful for projectiles in some cases.
In Corona, any physics object that does not have its "type" specified, automatically becomes a dynamic physics object. Now, if we reload, we see that the testBalloon1 object will fall and collide with the bottom border, and bounce. Not to shabby. Next time, we'll take a look at adding more objects, spicing it up with static bodies, and talk about modifying physical body shapes. Stay tuned!
--main.lua
display.setStatusBar( display.HiddenStatusBar )
local physics = require "physics"
physics.start()
physics.setDrawMode ( "normal" )
background = display.newRect(-100,-100, 10000,10000)
background:setFillColor(90,228,228)
borderTop = display.newRect(0,0,display.contentWidth*2, 32)
borderTop:setReferencePoint(display.CenterReferencePoint)
borderTop.x = display.contentWidth
borderTop.y = display.contentHeight-display.contentHeight
-----------------------------------------------------------------------
borderBottom = display.newRect(0,0,display.contentWidth*2, 32)
borderBottom:setReferencePoint(display.CenterReferencePoint)
borderBottom.x = display.contentWidth
borderBottom.y = display.contentHeight
-----------------------------------------------------------------------
borderLeft = display.newRect(0,0,32, display.contentHeight*2)
borderLeft:setReferencePoint(display.CenterReferencePoint)
borderLeft.x = display.contentWidth-display.contentWidth
borderLeft.y = display.contentHeight
-----------------------------------------------------------------------
borderRight = display.newRect(0,0,32, display.contentHeight*2)
borderRight:setReferencePoint(display.CenterReferencePoint)
borderRight.x = display.contentWidth
borderRight.y = display.contentHeight
-----------------------------------------------------------------------
physics.addBody(borderTop,"static",{density=3, bounce=1.0005})
physics.addBody(borderBottom,"static",{density=3, bounce=1.0005})
physics.addBody(borderLeft,"static",{density=3, bounce=.8})
physics.addBody(borderRight,"static",{density=3, bounce=.8})
testBalloon1 = display.newImageRect("balloonblank.png", 96, 124)
testBalloon1:setFillColor(255,0,0)
testBalloon1.x = display.contentWidth/1.8
testBalloon1.y = display.contentHeight/2.1
physics.addBody(testBalloon1,{density=3, bounce=.091})
RSS Feed