Write a Flappy Bird Clone using Basic4Android and LibGDX – Part 3

Part 3 – Drawing the pipes

Grab the source code here:

https://dl.dropboxusercontent.com/u/8673694/you%20tube%20files/basic4android/CloneyBirdTutorial/Part3.zip

Now we have basic animation in our game with our scrolling ground tiles, it’s time we add the pipes. First off, in the globals section we’ll add a type to hold the pipe object. An object in programming, is just a collection of variables grouped together under a name, so in this case, each pipe will need and x coord, y coord and whether or not it’s been scored.

Type typpipe(x As Float, y As Float, scored As Boolean)

As we want a delay before each pipe appears, then we’ll declare a pipe countdown variable that we’ll decrease with each frame, when it hits zero we generate a new pipe:

Dim pipeCD As Int = 50 ‘ countdown before pipes start appearing

The pipes will be stored in a list, so we’ll declare that in our globals too:

Dim pipes As List ‘ stores pipes

 

Lastly we’ll declare our pipe texture:

Dim img_pipe As lgTexture ‘ stores image of pipe

We also need to declare two scale values in globals too:

Dim scaleX As Float’ calculate scaleX compared to set size width

Dim scaleY As Float  ‘ calculate scaleY compared to set size height          

In the Activity Create section we initialize the list of pipes to make it ready to use.

pipes.Initialize ‘ initialise pipes list for new entries

We also now need to set some scale values to allow us to handle different screen sizes with our game.

scaleX = (vpW/400) ‘ set scaleX to allow for different screen sizes

scaleY = (vpH/600) ‘ set scaleY to allow for different screen sizes

The 400 and 600 values were chosen just because that’s what I used as a set resolution when prototyping this game on PC. You can have a play with these values to see how they work.

Next up, in the LG_Create section, add the following line to load t he pipe texture image file:

img_pipe.InitializeWithFile(lGdx.Files.internal(“pipe.png”)) ‘ load pipe image

Okay, now strap yourself in, we’ve got a big code section now to add to the LG_Render section to create pipes:

‘decrease pipe countdown

pipeCD = pipeCD – speed

‘create pipe

If pipeCD < 0 Then

      pipeCD = vpW*0.40 ‘ set pipe countdown 40% of screen width

Dim Pipe Astyppipe’ declare new pipe

Pipe.Initialize ‘ initialise pipe

Pipe.x = vpW*1.20 ‘ set pipe x coord to 120% of viewport width

Pipe.Y = Rnd(vpH*0.35,vpH*0.75)-((img_pipe.Height*0.5)*scaleY) ‘ set y coord to random height

      Pipe.scored = False ‘ set pipe to un-scored

      pipes.add(Pipe) ‘ add pipe to list of pipes

EndIf

 

Taking this line by line, we first decrease the pipeCD variable by the speed. Then if the pipeCD drops below zero then we make a new pipe. First we reset the pipe countdown to 40% of the viewport width, this means we should end up with three pipes on screen at once. We then define a new pipe to be of object type typpipe, initialize the pipe object and then set it’s x and y coordinates.

The Pipe.X value is set to 120% of the viewport width so the pipe will smoothly appear from the right side of the screen. The Pipe.Y value needs to cause the pipe to appear at a random height on the screen, we’ll set this to anywhere between 35% and 75% of the screen height. We then need to minus half the height of the pipe image to allow for the fact that textures are handled from the bottom left of the image, if we didn’t do this, then the bottom left corner of the pipe would appear at the Y coordinate we specify and we only see the bottom of the pipe. The scaleY value is used here to calculate half the pipe height now that we are scaling the pipe to draw to the screen.

We set the scored value of the pip to false (this will be set to true when the bird passes the pipe). Finally we add the pipe to the list of pipes ready to draw.

‘update pipes

Dim Pipe As typpipe’ declare new pipe

For i = 0 To pipes.Size – 1′ loop through list of pipes

      Pipe = pipes.Get(i) ‘ copy pipe off list onto Pipe object

      Pipe.x = Pipe.x – speed’ decrease pipe x coord

      ‘delete pipe if it goes off left side of viewport

      If Pipe.x < -100 Then

            pipes.RemoveAt(i) ‘delete pipe

            Exit ‘exit loop

      EndIf

Next

For i = 0 To pipes.Size – 1′ loop through list of pipes

Batch.DrawTex2(img_pipe,Pipe.x,Pipe.y,vpW*0.125,vpH*1.33) ‘ draw pipe to viewport

Next

 

We now update the position of each pipe to make them move across the screen from right to left. To do this, we cycle through the list of pipes using a for loop. For each loop, we assign the next pipe in the list to the pipe object, then alter the x value of the pipe by the speed of the game, this means the pipes will move at the same speed as our ground does.

If the pipe goes off the edge of the right side of the screen then we remove the pipe from the list and exit the loop.

After updating the x position, we then draw the pipe to the screen using the DrawTex2 command by cycling through the pipes again. Note that we set the width of the pipe to 12.5% of the viewport width and height to be 133% of the viewport height.

Now try running the game to see your pipes in action! You should have a background, a scrolling ground layer and pipes appearing around once a second, at random height, smoothly scrolling across the screen.

Get the source code here:

https://dl.dropboxusercontent.com/u/8673694/you%20tube%20files/basic4android/CloneyBirdTutorial/Part3.zip

Advertisements

4 thoughts on “Write a Flappy Bird Clone using Basic4Android and LibGDX – Part 3”

  1. Hi Andy,

    First of all, thank you for this tutorial.

    I have a question about the pipe image….how do I calculate or code of 1 pipe instead of 2 pipes,
    so that the bird doesn’t have to fly between the pipes anymore.

    Regards
    Jack

    1. Hi Jack,
      thanks for your comment.
      I assume then you just want to keep either the top pipe or the bottom pipe. The easiest way would be to change the pipe graphic to only have one half. Then the point you would be checking for collision would be the height of the pipe graphic.
      So the line that currently reads:
      If (myBird.y Pipe.y+((img_pipe.Height*0.5625)*scaleY)) Then
      would read more like:
      If (myBird.y < Pipe.y+(img_pipe.Height*scaleY)) Then
      if you're just doing the bottom half of the pipe. This would be for a jumping game I assume?

      1. Thanks helping me out and yes you’re correct, jumping and/or flying combo would be nice to experiment with this particular game.

        I don’t know if you’re considering to implement some kind of levels,pause or save function
        to this game, but I will be very pleased if you do.

        This way I believe it will be marked as a genuine game.

        Now I have to think about the jumping code. Hopefully I will succeed my effort.
        If not, I’m gonna knock at your door with my code to look at it, if I may.lol

        Jack

  2. Hi Andy,
    I’d implemented your code and the bird flew nicely over the pipe, however no collision
    with the pipe unfortunately.

    A part of the code is:

    ” If (myBird.x+vpW*0.085 > Pipe.x) AND (myBird.x < (Pipe.x+vpW*0.125)) Then

    If (myBird.y < Pipe.y+(img_pipe.Height*scaleY)) Then "

    Did I miss something?

    Regards
    Jack

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s