fbpx

Flappy Bird – The Flying Bird

Reading Time: 5 minutes
In the next part of the Flappy Bird tutorial we are going to teach our bird how to fly. We are going to see how we can add our own sprites to our Flappy Bird app and we will have a basic animation to make the bird flap up and down.

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

Download FlappyBird Images

Dowload them and save them somewhere in you computer and extract them. Then move the images to the assets folder of you project. So open Android Studio and our Flappy Bird project. Ther on the left side you can see the assets folder. Right click on the folder, and “Show in explorer” option. In the popped up window open the assets folder, and copy the images.

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 

android:screenOrientation=“landscape”

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.

The background

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

draw(
    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:

        1.  Down
        2.  Middle
        3.  Up
        4. Middle
        5. Down
        6. 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.

birdsState.add(Texture(“bluebird-downflap.png”))
birdsState.add(Texture(“bluebird-midflap.png”))
birdsState.add(Texture(“bluebird-upflap.png”))
birdsState.add(Texture(“bluebird-midflap.png”))

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(
    (Gdx.graphics.width*0.1).toFloat(),
    (Gdx.graphics.height*0.1).toFloat()
)

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.

batch!!.draw(
    birdsState[flapState],
    (Gdx.graphics.width/2 – size/2),
    (Gdx.graphics.height/2 – size/2),
    size,
    size
)

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.

when(flapState)
{
    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

At the end of this part we are going to test the app. So run it, and if you made everything right, then you have to see a very fast flying bird. About the speed we are going to talk in the upcoming parts of this tutorial.

Questions

I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂

 


 

Click to rate this post!
[Total: 0 Average: 0]
Follow and like us:

3 thoughts on “Flappy Bird – The Flying Bird”

  1. I had this problem

    Caused by: java.lang.ClassNotFoundException: Didn’t find class “com.flappybird.ca.AndroidLauncher” on path: DexPathList[[zip file “/data/app/com.flappybird.ca-khGyl4Lnsd87y1yC8oAx3A==/base.apk”],nativeLibraryDirectories=[/data/app/com.flappybird.ca-khGyl4Lnsd87y1yC8oAx3A==/lib/arm64, /data/app/com.flappybird.ca-khGyl4Lnsd87y1yC8oAx3A==/base.apk!/lib/arm64-v8a, /system/lib64, /product/lib64]]

    • my solution was put this code project build.gradle:

      buildscript {
      ext.kotlin_version = ‘1.3.21’
      repositories {
      google()
      jcenter()

      }
      dependencies {
      classpath ‘com.android.tools.build:gradle:3.4.1’
      classpath “org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version”

      // NOTE: Do not place your application dependencies here; they belong
      // in the individual module build.gradle files
      }

      }
      And then add these plugins to your module build.gradle:

      apply plugin: ‘kotlin-android-extensions’
      apply plugin: ‘kotlin-android’

Leave a comment

stay informed!

Subscribe to receive exclusive content and notifications