Time for action – building bricks

The bricks are the last of the game objects we need to add in for this application. We'll be creating two different levels for this game. Each one will have a different brick layout from the other:

1. We're going to create the function for the first level. Let's create a new function, gameLevel1(). We will also set currentLevel to 1 since the application begins at level 1. Then, we'll add in the bricks display group and set it as toFront() so that it appears in front of the game background:

   function gameLevel1()
   
     currentLevel = 1
   
     bricks:toFront()

   The method object:toFront() moves the target object to the visual front of its parent group (object.parent). In this case, we are setting the bricks group to appear as the front-most display group during game play so that it appears in front of the background image.

2. Next, add some local variables that will show how many rows and columns of bricks will be displayed on screen and where each brick will be placed in the playing field:

     local numOfRows = 4
     local numOfColumns = 4
     local brickPlacement = {x = (_W) - (brickWidth * numOfColumns ) / 2  + 20, y = 50}

3. Create double for loops, one for numOfRows and the other for numOfColumns. Create a brick instance placed according to its width, height, and the number corresponding to numOfRows and numOfColumns. The art asset for the brick display object is provided with this chapter. Then, close the function with end:

     for row = 0, numOfRows - 1 do
       for column = 0, numOfColumns - 1 do
       
         local brick = display.newImage("brick.png")
         brick.name = "brick"
         brick.x = brickPlacement.x + (column * brickWidth)
         brick.y = brickPlacement.y + (row * brickHeight)
         physics.addBody(brick, "static", {density = 1, friction = 0, bounce = 0})
         bricks.insert(bricks, brick)
   
       end
     end
   end

4. The setup for level 2 is similar to how level 1 is arranged. The code is almost the same, except that our new function is called gameLevel2(), currentLevel is set to 2, and the values for numOfRows and numOfColumns have different values. Add the following block after the gameLevel1() function:

   function gameLevel2()
   
     currentLevel = 2
   
     bricks:toFront()
     
     local numOfRows = 5
     local numOfColumns = 8
     local brickPlacement = {x = (_W) - (brickWidth * numOfColumns ) / 2  + 20, y = 50}
     
     for row = 0, numOfRows - 1 do
       for column = 0, numOfColumns - 1 do
       
         -- Create a brick
         local brick = display.newImage("brick.png")
         brick.name = "brick"
         brick.x = brickPlacement.x + (column * brickWidth)
         brick.y = brickPlacement.y + (row * brickHeight)
         physics.addBody(brick, "static", {density = 1, friction = 0, bounce = 0})
         bricks.insert(bricks, brick)
   
       end
     end
   end

5. Save your file and relaunch the simulator. You'll be able to interact with the Play button and see the transition from the main menu screen to the game screen. You will see the game layout for level 1 displayed on screen.

What just happened?

The bricks display group is set as bricks:toFront(). This means that the group will always be put in front of the display hierarchy, apart from the background, paddle, and ball display objects.

The gameLevel1() method has set values for the amount of brick objects displayed in the playing field. They will be centered based on contentWidth of the device shell and set at 50 in the y direction. The brick group is placed near the top left-hand corner by brickPlacement, takes the middle of the screen, and subtracts it by half the width of all the brick objects put together. Then, we add 20 more pixels in the x direction to center it with the paddle.

We created double for loops for numOfRows and numOfColumns, which start the creation of the brick objects from the left-hand corner of the screen.

Notice that the brick display object is given the name brick. Just remember that brick cannot be used the same way as brick when calling the object. The brick object is an instance of brick. It is merely used as a string when event parameters are called, for example:

if event.other.name == "brick" and ball.x + ball.width * 0.5 < event.other.x + event.other.width * 0.5 then
        vx = -vx 
elseif event.other.name == "brick" and ball.x + ball.width * 0.5 >= event.other.x + event.other.width * 0.5 then
        vx = vx 
end

The physics body of brick is set to "static", so it is not affected by gravity pulling down. Then, it is added to the bricks group under bricks.insert(bricks, brick).

Have a go hero – focused platform gaming

On completing this chapter and the next one, feel free to redesign the display images to focus on a specific platform. For example, you can easily convert the code to be compatible for all iOS devices. This can be done by converting display objects to display.newImageRect( [parentGroup,] filename [, baseDirectory] w, h ), so you can substitute image dimensions on devices with larger screen sizes (such as iPhone 5/Samsung Galaxy S5). Remember that you'll have to adjust your configuration settings to have the changes applied. This pertains to adding a unique image suffix (or your preferred suffix naming convention) to your config.lua file.