Corona Starfighter with Corona SDK Part 3

In part 3 of building Corona Starfighter with Corona SDK is to add the player ship. We’ll also add a touch listener to the player ship so it can be dragged left and right on the screen.

Adding the Player Ship

With scene-game.lua open in your favorite text editor, add the following code.

-- Create a player ship
playerShip = display.newImageRect(sceneGroup, "images/playerShip.png", 75, 100)
playerShip.x = math.random(100,400)
playerShip.y = bottom - 75 = "player" -- assign an id for physics collision later

local image_outline = graphics.newOutline( 2, "images/playerShip.png" ) -- If we created a physics body without an outline, the physics body will be squared around the ship. In our case, it'll be a 75x100 square. Instead of a block, it'll make a better game if we create an outline around the image. This will make the hit area just on the image of the ship itself. Uncomment line 8 to this tighter integration.
physics.addBody( playerShip, { outline=image_outline } ) -- make it a physics object

There’s a lot happening here, so let’s break it down into digestible pieces. The first three lines add the player ship object and position it along the x/y coordinates. Then, we assign an id to the object and the id is player. This will be used when we start detecting collisions.

The next lines is for graphics.newOutline(). This little piece of code creates an outline around our object. If we didn’t use an outline, our object would become a physics box and the hit detection would feel off (the box around the player ship is the hit area). I’m a visual learner, so here’s the before and after shots of using graphics.newOutline().

Before Outline
After Outline
After Outline

Both screenshots are using what’s known as hybrid mode. Hybrid mode shows the outline of our physics objects. The screenshot on the left is before the outline and the screenshot on the right is after the outline. If we didn’t use the outline tool, our hit area would extend beyond our ship. So, we use outline to give our game a tighter feel. Warning: If you decide to publish this game, please make sure to test the app on an actual device. Corona’s documentation points out that using outline eats up more memory. We’ll wrap up the player ship by actually adding the physics object to it.

Adding a Touch Listener

With our player ship added, we’ll need to create a function that will move the player ship according to the player’s finger or stylus. We do this with a touch event listener. Here’s how.

-- touch listener function
function playerShip:touch( event )
 if event.phase == "began" then
  -- first we set the focus on the object
  display.getCurrentStage():setFocus( self, )
  self.isFocus = true

  -- then we store the original x position
  self.markX = self.x
 elseif self.isFocus then
  if event.phase == "moved" then
   -- then drag our object
   self.x = event.x - event.xStart + self.markX
  elseif event.phase == "ended" or event.phase == "cancelled" then
   -- we end the movement by removing the focus from the object
   display.getCurrentStage():setFocus( self, nil )
   self.isFocus = false
 return true -- return true so Corona knows that the touch event was handled properly
playerShip:addEventListener( "touch", playerShip )

If you’re new to Corona, the code above may seem a bit intimidating, but it’s easy to understand once it’s broken down. We start off by stating our ship has a touch event with playerShip:touch(). In the began phase (or when the user first touches the screen), we’ll set the focus on the player ship. This tells Corona that the focus of the touch event is on the player ship. The x location is also stored in .markX.

When we have focus on the object and during the moved phased, we’ll adjust the x location of the player ship according to where the players finger is at. When the player removes their finger from the device, we’ll remove the player ship focus.

We wrap up by adding the event listener to the player ship. This last line is essential because it tells Corona what function to call when the player ship is touched.

And that’s it for adding the player and making the player move! Check out part 4 of this tutorial series and leave your comments below.

Daniel Williams

One thought on “Corona Starfighter with Corona SDK Part 3

Leave a Reply

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