How do I make a tile become brighter upon hovering over it?

Question

I have created a hexagonal isometric tiled map using the HexagonalTiledMapRenderer in libGDX and the programme Tiled. The map is being rendered correctly, but I do not know how to access information about individual tiles, and therefore I do not know how to deal with user input.

What I want is to make a tile light up upon hovering over it (also that something about the tile can be printed, like what tile it is, i.e. forest, river, mountains), so I figure I'll need some sort of grid-like system, and I thought that would be given to me by the tiled map, but I cannot find it/understand it.

Some code
Main core class

public class MyGdxGame extends Game {

 @Override
 public void create () {
    setScreen(new Play());
 }
}

play class

public class Play implements Screen {

 private TiledMap map, hexMap;
 private HexagonalTiledMapRenderer hexRenderer;
 private OrthographicCamera camera;

 @Override
 public void show() {
    hexMap = new TmxMapLoader().load("hexTiledMap.tmx");
    System.out.println(hexMap.getProperties().getKeys());
    hexRenderer = new HexagonalTiledMapRenderer(hexMap);

    camera = new OrthographicCamera();
    camera.setToOrtho(false);
 }

 @Override
 public void render(float delta) {
    Gdx.gl.glClearColor(0, 0, 0, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    hexRenderer.setView(camera);
    hexRenderer.render();
 }

 @Override
 public void resize(int width, int height) {
    camera.viewportWidth = width;
    camera.viewportHeight = height;
    camera.update();
 }
}

Example of what I want to do with it

I want to be able to, for example, make just one tile brighter, or more red, or make it disappear. So I basically want to make the tiles interactive. I want the programme to know, for example, what tile is under the cursor. These are all only examples, I hope you understand what I want.

What do you mean by "light up"? Do you want to have some sort of overlay? The data of the tile can be found by getting the tiles properties. — Jim, Dec 19 '16 at 12:56
I want to be able to, for example, make just one tile brighter, or more red, or make it disappear. So I basically want to make the tiles interactive. I want the programme to know, for example, what tile is under the cursor. These are all only examples, I hope you understand what I want. — The Coding Wombat, Dec 20 '16 at 11:03
I understand what you mean. Its going to be a longer explanation, but nothing advanced. I am at work right now, but tonight I can make an example for you. — Jim, Dec 20 '16 at 11:40
This may help you http://stackoverflow.com/questions/24080272/libgdx-how-to-make-tiled-map-tiles-clickable?rq=1 — resw67, Dec 20 '16 at 20:39
@IronMonkey have you gotten around coming up with an answer? — The Coding Wombat, Dec 21 '16 at 23:01

score 3 · Accepted Answer · answered Dec 22 '16 at 22:29

This is really a 3 part question.

Selecting a tile

You have your mouse position, your camera position and the size of the tiles. If you translate your mouse position according to the camera position you get the mouse coordinates of the map. Then take these coordinates and devide with the tilesize. Cast the x and y values to Integer and you have the tile the mouse is hovering over.

Make a tile light up

An easy way is to have a semi transparent tile/sprite and display it above the tile that you are hovering with the mouse.

Getting the properties of a tile:

TiledMap map;
TiledMapTileLayer tileLayer;

//define the layer where you select the tile
tileLayer = (TiledMapTileLayer) map.getLayers().get("layername");

//get the tile that you want
Cell cell = tileLayer.getCell(x,y);
TiledMapTile tile = cell.getTile();

//this is where you get the properties of the tile
tile.getProperties().get("propertiename");

The way you define the properties in Tiled is by selecting a tile (or a number of tiles) in the tileset, right-click and select "Tile properties". In the properties window, at the bottom left, you see a plus sign. Click on this and you can add a custom property (you give it a name and a type). The properties set in the tileset will carry over to each tile you place in the tilemap.

Ex: if you want to define the type of tile (tree, sand, water etc.) you select the tile and add a propertie of the name "TileType" as a String. When you press ok you can give the type a value. Ex "Sand".

Then when you want the type of a selected tile you read the property:

String tileType = tile.getProperties().get("TileType");

This way you can set a number of properties on a tile.

If you try to get a cell from the tilemap from an x,y position that has no tile, tileLayer.getCell(x,y) will return null. So remember to check for this.

How do I make a tile become brighter upon hovering over it?

1 Answers1