Flappy Bird – Collision Detection

In the previous lectures in our Flappy Bird tutorial series we have learned how to have a flying bird, the gravity, and in the very last lecture we have added the left moving pipes.

In the next part we are going to add the collision detection. The collision detection is a very important part of the Flappy Bird app. If we can drive the bird between the pipes, then we are going to get 1 point, but if we can’t, then we will lose the game. It means, thet our bird collided with the pipes. At the of this lecture we will have this collision detection 🙂

Step 1 – New shapes

What we need to do to have the collision detection is to create new shapes. It means we will have a circle to overlap the bird, and 2 rectangles for the top and the bottom pipes. After that, when they are on the screen, we will look using GDX library for a collision between those shapes.

ShapeRenderer

Here instead of using a batch, we are going to use a ShapeRenderer.  Batches allows us just to draw textures. ShapeRenderer enables us to draw shapes also to the screen, and it can do collision detection as well. So in the FlappyBird::class we will declare the ShapeRenderer variable.

var shapeRenderer: ShapeRenderer? = null

Thenafter we will set it’s value in the create method.

shapeRenderer = ShapeRenderer()

To see on the screen where are the shapes, we will add them a blue filled color. We can do that in the render method, directly after the begin of the batch.

shapeRenderer!!.begin(
    ShapeRenderer.ShapeType.Filled)

shapeRenderer!!.setColor(
    Color.BLUE)

Step 2 – Circle for the bird

We have implemented our bird as a circle, because the width and the height are ten percent of the width of the screen. After this our task is easy. We are going to create a circle, which will overlap the bird. Initially in the FlappyBird::class it will look like this

var birdCircle: Circle? = null

The GDX library has this circle object and we are going to set the circle directly after the batch of the bird in the render method. So it will overlap the image of the bird. 

set(x: Float,
    y: Float,
    radius: Float)

To draw draw this circle on the bird we have to define the x and y coordinates of the center of the circle, and the radius. It is going to be different, what we have used for the drawing of the bird’s batch. Here we have to define the center of the circle.

The x position is going to be the half of the width, because our bird doesn’t move horizontally, only vertically.

In the previous lectures we have already defined the y coordinate of the bird, and it is the birdY.  This is the coordinate of the bottom of the bird. What we need is the center. We know that the size of the bird is represented by the variable of size. What we need is just the half of this variable. The radius going to be also the half of the size.

birdCircle!!.set(
    (Gdx.graphics.width/2f),
    birdY + size/2,
    size/2)

Still the circle won’t be visible on the screen, so we will add it to the shapeRenderer, what we have defined before already. Here we will have take over the same parameters, what set already, but this time we are going to use our birdCircle.

shapeRenderer!!.circle(
    birdCircle!!.x,
    birdCircle!!.y,
    birdCircle!!.radius)

Still we haven’t closed the shapeRenderer, so after the circle we need this line, otherwise our app is going to crash.

shapeRenderer!!.end()

Step 3 – Recangles for the pipes

The next step is to cover the pipes with similar shapes like what we made for the bird. We will have 2 rectangles. One for the top and one for the bottom pipe. Basically we have always 4-4 pipes drawn, so we will define 2 mutableLists and they are going to contain the Rectangle objects. They go to the FlappyBird::class.

var topPipeRect = mutableListOf<Rectangle>()
var bottomPipeRect = mutableListOf<Rectangle>()

We won’t give them size, because they are mutable, so they can contain as Rectangles as we want. In this case we are going to have 4 Recangles inside. We will add them in the create method, and there we have defined earlier a for loop. From now we are going to have inside of it this 2 more lines:

topPipeRect.add(Rectangle())
bottomPipeRect.add(Rectangle())

What we need is to have the moving pipes together with our original pipes. To do this, we are going to set this recangles after the circle of the bird. Here we will have a for loop. The positions going to be the same like what have defined for the draw of the pipes. When the set has been finished, we have to add them to the shapeRenderer as well.


The recangles of the top and bottom pipes

Step 4 – Collision Detection

In this section we are going to talk about the collision detection. You will see, it is very easy 🙂

Directly before the end method of the shapeRenderer we will have a for loop and inside of it we will define an if-statement after the recangels of the pipes. The Gdx library has an Intersector method. From this method we can call the overlaps method. It observers two shapes. If they overlap each other, then it gives us back a bool with value of true.

In the overlaps method we will analyze if the circle of the bird and the two pipes overlap each other. If they do, then we will get back a log message in the Logcat. If they don’t overlap each other, then won’t happen anything, because we don’t need to have any event in this case.


Collision Detection

Step 5 – Remove ShapeRenderer

As we talked about at the beginning of this tutorial, we should add the ShapeRenderer to the game to see where are our shapes, but we don’t need them anymore. What we need is only the circle and rectangles, but they has to be invisible.

So just comment out the line of the ShapeRenderer. Still the collision detection is going to work, even if you don’t see this shapes 🙂

Step 6 – The whole FlappyBird::class


FlappyBird::class

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! 🙂

 


 

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

4 thoughts on “Flappy Bird – Collision Detection”

    1. No, I have only written tutorials. I think if you google it, then you will find many good sources. I gonna use it in my next tutorial as well, but I will publish it later.

Leave a Reply

Your email address will not be published. Required fields are marked *