Write a Flappy Bird clone using Basic4Android and LibGDX – Part 2

Part 2 – Adding the ground in

Get the source code for this tutorial here: https://dl.dropboxusercontent.com/u/8673694/you%20tube%20files/basic4android/CloneyBirdTutorial/Part2.zip

Now we have the basics setup. We setup our graphics surface, load a graphic, and then draw it to the screen each time the device renders the screen. The next thing to add is the ground. In the Flappy Bird game the ground is constantly scrolling from right to left. It’s also a repeated pattern which in nearly all instances in games means that it’s a simple graphic which is drawn several times per frame to give the impression of a continuous surface.

We need to draw and add our ground graphic file to our files folder. In the download lnk, I have already added this and updated the source code to include all extra code in this tutorial.

What code do we need to add?

First we need to declare a new texture to hold our ground graphic. Add the following line the globals section:

Dim myGD As lgTexture ‘ground image

We also need to declare some variables to use to move the ground image for each frame by a set amount and another to control the overall speed of the game. We’ll declare a variable called frames which will hold the frame number we’re on for our game and a speed variable to change how fast the game runs. We’ll make the ground move at the same value as the speed variable for each frame the game renders. This will make more sense when we actually draw the ground image.

So also in Globals, add the following lines:

Dim frames As Float = 0

Dim speed As Float = 3

Notice that it is possible to set a value to a variable at the same time as declaring it.

Next we need to point the mgGD lgTexture object at the actual graphics file, we do this in LG_Create using the following line:

myGD.InitializeWithFile(lGdx.Files.internal(“ground.png”)) ‘ load ground tile image

Next move to the LG_Render section, we’re all ready to draw the ground image now. Before we do that, just change the line that draws the background to the following:

Batch.DrawTex2(myBacking,0,vpH*0.20,vpW,vpH*0.80)

Notice we change some of the values, this is to leave us a gap at the bottom of the screen to draw the ground image. This is to make sure the ground image doesn’t obscure our background image. So it draws the background from 20% up the surface to a height of 80% of the surface which will bring it right to the top of the screen.

Next we need to set our frames variable to increment for each frame drawn. At the beginning of the LG_Render section, add the following line:

frames = frames + speed

This will mean for each frame drawn to the screen, the frames variable will increase by the speed, which currently will give us a sequence of 3,6,9,12,15,19,21,etc….

We are now ready to draw out ground.

Our ground image is to be drawn multiple times in one frame, so the easy way to do this is to use a for loop. A for lop simply starts a new variable at one number, and the increments it after each loop until it reaches another number. Let’s look at our loop to draw our ground images.

After  the line that draws the background, add this group of commands:

For x = 0 To 6

      ‘draw each tile over 20%

      Batch.DrawTex2(myGD,(x*vpW*0.20)-(framesMod(vpW*0.20)),0,vpW*0.20,vpH*0.20)

Next

Right, to explain this, the top line and bottom line just means to take a new variable “x”, set it’s number to zero for the first loop, then one, then two, until it reaches 6 when the loop will end. We then draw the ground image at coordinates that alter based on what X is. We want each ground image to be 20% the width of the screen, so we use the calculation vpW*0.20 to set this value, we then times that by the value of x for each loop, so the result is six images drawn next to each other of the ground graphic. We also minus the frames value from this x coordinate to give the scrolling effect, the part that says Mod(vpW*0.20)simply means to devide the frames amount by 20% the width of the viewport width and return the remainder, this is because the frames value keeps going up each frame, but we want a value returned that is between 0 and the width of the ground graphic, which this gives us.

 

And that’s it!

Try running it and you should see a smooth scrolling ground under your background image.

Try changing the speed, try different ground images sizes, and maybe try drawing a scrolling ceiling too?

 

In part 3 I’ll show you how to add the pipes and make them scroll with the ground, and then it’s plain sailing from there to add our bird and get it flapping!!!

 

Download the source code here:

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

 

 

Advertisements

11 thoughts on “Write a Flappy Bird clone using Basic4Android and LibGDX – Part 2”

    1. apologies it seemed to work when running a later tutorial.. but when compiling at this stage of the tutorials it get this error still:

      Parsing code. 0.04
      Compiling code. Error
      Error compiling program.
      Error description: Too many parameters.
      Occurred on line: 41
      surface = lGdx.InitializeView(True, “LG”)
      Word: LG

    2. Actually, you don’t have to downgrade OpenGL. I solved this issue by changing surface = lGdx.InitializeView(True, “LG”) to surface = lGdx.InitializeView(“LG”), which means support for newer versions of LibGDX.

    1. I solved this by using the older versions of opengl and libgdx, for some reason the newer ones didn’t work? Also double check you have them selected in the libs tab in the bottom right of the screen.

  1. For any error messages, I will need to know the version of B4A that you are running. I am running the latest version 3..50 but am trying to get hold of older versions in order to test these errors.

  2. I notice that you have the game starting with the ground moving, how do I switch this to static and then after a tap to move stuff? I’m finding your tutorials VERY helpful and thank you so much. I found it by accident, get it out there! Would also be nice to know how to replace an animation in real time i.e. stop walking and jump from the same position etc. Malky

    1. You just need to take the speed bit out of the draw ground bit in the title screen section of code. The ground should then move once the game starts.

  3. Thank you so much Andy. I’ll try this tonight.

    My latest problem is getting the coords touched area as they appear to be world coords as against the physical x/y coords, plus stopping an animation as I said, to replace it with a jump one then back again etc.

    If you could please pass a hint or two, I will be on my way I think?

    Malky

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