AlaskaLinuxUser's Scratchpad

There are actually many ways that one can “touch” an object in libGDX. You can create scenes with stages and characters and actors, for one. You could do sprite comparisons as another. I decided to go a simple route with intersections.

The goal is to be able to detect that the user has tapped on or touched an object that is displayed on the screen. This is really handy, as it will allow you to manipulate objects to move them, pop balloons, draw pictures, press switches, and more. Pretty much all the usual things that you do in a game. And this is just my rendition of how to do that.

Obviously, the nature of the game would determine if this was a useful method or not. Depending on what you are trying to accomplish, this may or may not be useful. You can check out the whole open source for the project on my GitHub.

So, I first needed some objects to touch, and an object for where I touched under the class:

Circle centerCircle, leftCircle, rightCircle, myTouch;

Then I declared those circles under the onCreate method:

centerCircle = new Circle();
leftCircle = new Circle();
rightCircle = new Circle();
myTouch = new Circle();

Finally, I used shaperenderer to draw them under the render method:

shapeRenderer.begin(ShapeRenderer.ShapeType.Filled); // For visualizing collision shapes.

if (colorChanger == 0) {
shapeRenderer.setColor(Color.BLUE); // For visualizing collision shapes.
} else if (colorChanger == 1) {
shapeRenderer.setColor(Color.RED); // For visualizing collision shapes.
} else {
shapeRenderer.setColor(Color.GREEN); // For visualizing collision shapes.
} // Cool color changing affect, so you know you touched a circle.

leftCircle.set(Gdx.graphics.getWidth()*2/3,
Gdx.graphics.getHeight()*2/3,
100); // Set the circle.

centerCircle.set(Gdx.graphics.getWidth()/2,
Gdx.graphics.getHeight()/2,
100); // Set the circle.

rightCircle.set(Gdx.graphics.getWidth()*1/3,
Gdx.graphics.getHeight()*1/3,
100); // Set the circle.

shapeRenderer.circle(centerCircle.x,centerCircle.y,centerCircle.radius); // For visualizing collision shapes.
shapeRenderer.circle(rightCircle.x,rightCircle.y,rightCircle.radius); // For visualizing collision shapes.
shapeRenderer.circle(leftCircle.x,leftCircle.y,leftCircle.radius); // For visualizing collision shapes.

shapeRenderer.setColor(Color.BLACK); // For visualizing touch shapes.
shapeRenderer.circle(myTouch.x, myTouch.y, myTouch.radius); // for visualizing touches.

shapeRenderer.end(); // For visualizing collision shapes.

You can look at the full source code in the link above if that makes it clearer, but the key thing to focus on here is that I now have 4 circles drawn on the screen. The “myTouch” circle is always black, and the three other circles are chosen by the variable “colorChanger”. This was added as a nice “touch” so you could see them change color when clicked. (Bad pun intended.)

So, how do we register the touches? Like so, also under render:

if (Gdx.input.isTouched()) {

/*
* Here is the interesting part. This should be:
* myTouch.set(Gdx.input.getX(), Gdx.input.getY(), 10);
* But then our touches turn out correct for X, but backwards for Y.
* Try it both ways to see the difference.
*
* Note that this is in portrait mode. It may not be that way in landscape mode.
*/
myTouch.set(Gdx.input.getX(), Gdx.graphics.getHeight() – Gdx.input.getY(), 10);

Gdx.app.log(“WJH touchpoint”, String.valueOf(myTouch)); // Write down for logging/testing.

// Did we have an overlap of the “myTouch” and a circle?
if (Intersector.overlaps(myTouch, centerCircle) ||
Intersector.overlaps(myTouch, rightCircle) ||
Intersector.overlaps(myTouch, leftCircle)) {

if (colorChanger < 2) {
colorChanger++;
} else {
colorChanger = 0;
} // If we have an overlap, then change the color.
}

} else {

myTouch.set(0, 0, 0); // If not touched, let’s move it out of the way.

} // End input detection.

According to this, if you are touching the screen, it will take input from your x/y coordinates. If you are not touching the screen, the size and position of your “myTouch” circle becomes 0.

When you are touching the screen, the myTouch circle is compared to the other circles for an overlapping condition. If they do overlap, the colorChanger is changed, so that the color of the circles can change.

If you download the apk and give it a try, you will see that you can drag a little black dot around the screen, and when you “bump” into or “cross over” the three large circles, they will change color. Pretty spiffy, huh?

Linux – keep it simple.