Teki – The touch of the arrows

In this chapter of the Teki Android game tutorial we gonna talk about how we can implement the touch on the two arrows. For this we can use the images of the 2 arrows, what we have implemented in the very last lecture.

Later on when we touch the up arrow then Teki has to jump, when we touch the down arrow, Teki has to crawl.

About these move we gonna talk in the next lecture.

Let’s start coding 🙂

Step 1 – The Circle shape

The SpriteBatch object can’t handle any touch events on the images, which are drawn on the screen. For this we have to define 2 Circles for the 2 arrows.

We are going to do it in the touchUpAndDownArrow() method. We call it like this, because this method will handle the touch event from the user, the shapes of the Circles are only the part of it.

In case of this Circles the origin of the screen is at the top left corner as we now already from the previous chapters. So instead of using the same system, what we have used for the draw() of the images, we count the Y coordinate backwards. The X coordinate will be counted using the same system.

When we want to create a Circle, we need the coordinates for the origin and the radius. For the origin we should only subtract the width of the images from the screenHeight and minus the radius. The radius will be the half of the height or the width of the images.

Up Arrow

Up Arrow
Down Arrow

Down Arrow

Step 2 – The touch

The GDX library has an input option, and this has a justTouched method. The same, what we have used to start the game. To observe the touches, we will have an if-statement. This will be executed, if the screen has been touched.

if (Gdx.input.justTouched()) { ​ }

So what we actually want is 2 buttons for the 2 arrows. At the start when we touch the screen, the method will be executed. Here we want to have the touch only if we have touched the screen where the buttons are.

Get the touched points

We can get the touched coordinates on the screen using the GDX library. Also from the input we can call the getX() and the getY() methods. They will get back the X and the Y coordinates of the user’s touch.

Compare the points

We have already the two Circles and the coordinates of the touches. Now our task is to compare them with each other. We can do it using an if-statement.

We will have 2 of them inside the if-statement of the justTouched() method. If the Circles of the up and down arrows contain the touched point, then it gonna be executed. In the source code it looks like this


The touches
Call the touchUpAndDownArrow() method

As we have already talked about this method goes to render() method, when the gamesState equals to 1.

Now if you run the app, and you touch the arrow, then in the Android Studios Logcat you will see the log messages.

TekiTutorail::class

Finally the whole source code for the TekiTutorail::class.


The touches

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 *