Teki – Collision Detection

Until now we have implemented in our Android game, Teki almost everything what do we need to may play the game. We have the running Teki, the barriers, the controls, the score and the constantly accelerating game. Still it is not enough, because we can go trough the barriers. To be honest, it is not what we want. 🙂

In this chapter we are going to implement the collision detection. This will detect, if Teki and barriers have met with each other. If this happens, then the game will finish.

Step 1 – New shapes

To detect the collisions we need to define some new shapes. We gonna create a Rectangle for Teki, and also a Rectangle for the barriers. Only one Rectangle is enough for all barriers.

Define them in the TekiTutorial::class

var tekisRect: Rectangle? = null
var barriersRect: Rectangle? = null

We have to add them the final value also. So the next 2 lines go to the the render() method.

tekisRect = Rectangle()
barriersRect = Rectangle()

Step 2 – Set the ShapeRenderer

Our shapes are ready to set them. It means we are going to add them to the screen. They won’t be visible in the final version of the app, but during the development, to see we are the shapes, we will set for them a blue filled color.

For this we are going to use the ShapeRenderer object. 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 TekiTutorial::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)

As we have done with the batch, here we have to call also the end() method at the end of the render() method, after the line of the batch.

shapeRenderer!!.end()

Step 3 – Rectangle of Teki and the barriers

Teki

We have already defined the Rectangle for her, now we gonna set it to the screen. Our task now is very easy, because we this Rectangle will be 100% the same. It means the size and the position gonna be the same.

tekisRect!!.set(
tekiX,
tekiY,
size*1.2f,
size)

shapeRenderer!!.rect(
tekisRect!!.x,
tekisRect!!.y,
tekisRect!!.width,
tekisRect!!.height)

Add this lines to the render() method, after the drawTeki() method. Leter on, when we could finish the implementation of the collision detection, we are going to delete the line fo the shapeRenderer, because during the game we don’t want to see the ugly blue shapes.

Barriers

In case of the barriers we have an easy task, the positions and the size are again the same.

barriersRect!!.set(
barrierX[i],
barrierY[i],
size*1.2f,
size)

shapeRenderer!!.rect(
barriersRect!!.x,
barriersRect!!.y,
barriersRect!!.width,
barriersRect!!.height)

The set method goes again after the drawBarriers() method and inside of the for-loop. The shapeRenderer visualize the barriersRect.

If you run now the app, then you should see the blue rectangles, which overlap Teki and the barriers.

Step 4 – Collision Detection

The collision detection is again very easy. 😉 It is only an if-statement in the render() method.

The GDX library has an Intersector object. 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.

We will have the if-statement inside the for-loop of the barriers, and after the rect() method of the shapeRenderer.

if (Intersector.overlaps(tekisRect, barriersRect))
{
Gdx.app.log(“Collision”, “Detected”)
}

When the rectangels overlap each other, then in the Logcat of the Android Studio you will see the message, that the shapes overlap each other.

In the next chapter we gonna change this log message, because this will set the gameState to 2. In other words, the game will be over.

Step 5 – Remove the ShapeRenderer

In our final game we don’t want to have this ugly blue rectangles, so let’s get rid of them. What we have to do is to remove the ShapeRenderer object from our game.

Remove the ShapeRenderer:

      • from the TekiTutorial::class
      • from the create() method
      • from the render() method
        • the begin() method and the setColor() method
        • the rect() method of Teki and the barriers
        • the end() method from the end

TekiTutorail::class

The whole source code of the TekiTutorail is available under the link after the implementation of the collision detection.

Download TekiTutorial

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]

Leave a Reply

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