Step 1 – Get the images to the assets folder
Before we start to add our spirtes we need some images, so you download them from here
Step 2 – Change the orientation
As you could see in the previous lecture, our app starts in landscape mode by default. We play our Flappy Bird game in portrait mode.
To change the orientation open from the “manifest” folder the AndroidManifest.xml file. Here we have the usual stuff what we have used to and some other stuff as well. For us the important line is where the
lines is inside the <activity> tag. Change it to portrait.
Step 3 – The Background
Go back to our code and open from the “core” folder the FlappyBird::class. There as we talked in the last lecture we have the two methods. The create and the render methods. Create method happens when the app is run and the render method happens continously as the app is processed.
First delete the line where we have added the badLogic.jpg file, we don’t need it in our app. Then delete everything from the render method. So now we can start coding from scratch.
We are going to start with the background and after we continue with our flappy bird.
We will add the background as a SpriteBatch. The batch can be an image, a character or as in our case a background and we use to manage displaying animation. Add the batch!!.begin() line to the render method and this tells the render that we are going to start displaying sprites from now.
In this case, in our game we will use a Texture.
The name of the file is background-day.png and we will add it to the backGround variable, what we have already declared as null directly in the FlappyBird::class. In the create method give it the Texture(“background-day.png”) value.
The next is to add the draw method to the render method. The draw method has many options. In our Flappy Bird game we are going to use this one
texture: Texture ,
x: Float ,
y: Float ,
width: Float ,
height: Float )
The texture will be the backGround variable, then 0f, 0f, It means the bottom left corner of the screen in Float. The next two options are the width and hight. The GDX library provides us the width and the hight of the screen, so our background will have the same size like the screen.
After implementation of the background we will use the batch again, but in this case the end() method.
Here you can see what we are having this time.
Adding the background image
Step 4 – The Bird
The next step is to add our bird to the game. To do this we are going to add new Texture, but in this case our task is more difficult what we had in the previous step, because we have here a flying bird.
Our bird has 3 states. They are the down-middle-up flap positions or states. During the game this 3 states going to be changed as follows:
- Middle etc.
For the implementation of the flapstates we are going to use a mutableList and this will contain the 3 images with the 3 states.
In Kotlin a mutableList is a generic ordered collection of elements that supports adding and removing elements.
So add the following line to our FlappyBird::class.
var birdsState = mutableListOf<Texture>()
… and the next lines go to the create method.
Draw the bird
Before we let our bird flying, we have to draw it to the screen, and the bird has to be in the middle of the screen.
To have it there, we are going to use the width and the hight of the GDX library again and we define a new variable, named as size. This size will be equal with the minimum of the width and the hight. We need this, otherweis our bird will be cropped or streched. We declare this variable again in the FlappyBird::class, but the initialization goes to the create method.
var size: Float = 0f
size = min(
To have our bird in the middle, we are going to divide the width and the height of the screen by 2, minus the half of the bird size. After this little calculations, then draw method should look like this.
(Gdx.graphics.width/2 – size/2),
(Gdx.graphics.height/2 – size/2),
The flying bird
To continue the implementation of the flight of the bird, we are going to have one more variable, what will represent the state of the flap as an integer, it is the flapState.
In the create method we have added 4 times the images to our mutableList, to the birdsState. It means it has 4 indexes: 0, 1, 2, 3.
In the render method we will have a when statement, what will check every run the value of the flapState and based on these, the image of the bird will be displayed on the screen.
0 -> flapState = 1
1 -> flapState = 2
2 -> flapState = 3
3 -> flapState = 0
The whole source code of the FlappyBird::class
To have a clear view about the FlappyBird::class, we are going to show you the whole source code. If you have missed something, then please here check this again.
Adding the bird and let it fly
Step 5 – Run the app
I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉
Have a nice a day! 🙂