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:
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%
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: