Search code examples
javalibgdxtiled

Highlighting a tile with transparency


I am making turn based strategy based on a tiled map. My map contains two layers - first one is visible all the time and is used as a background, the second one is used for highlighting the tiles. Highlighted tiles shows possible movement for the player. For now the progress looks like this:

My border boxes pic

To make a highlighting possible I use this for loop:

for(int s = 0;s<7;){ for (int i = 0;i<7;i++) { if ((inField(clickx + i,clicky + s)) && !(tileWithPlayer(clickx + i,clicky + s))) { highlight_layer.getCell(clickx + i, clicky+s).setTile(mark); } } s++; }

In this I use one tile from second layer of the map to make a border for a specific tiles. For now this tile is only 2px border of 32x32 transparent tile. To make highlighting disappear, I use similar for loop, where I set the tile to null. Selecting/deselecting tiles works great, but it is probably not the most efficient way to do this. I would like to exchange the blue border boxes into colored transparent boxes, something like in Advance wars during the movement, or as it can be seen below:

Desired look pic

I tried to make a semi transparent tile on the second layer in tiled, but without luck. It could be nice if there is some possibility to apply only semi-transparent color on the specific tiles, without using the second layer tile. So, my question is - how can I exchange those ugly borders, into fully colored, (semi)transparent tiles, to achieve similar result as in above picture?


Solution

  • Well...okay. I'm not an expert with Tiled. I've never really worked with it much but doesn't it support PNG tilemap imports? As in...make a tile texture that is semi transparent and then use that in your map on the second layer and only activate the ones that you really need?

    Alternatively you could do it programmatically. Where for every tile that you need to highlight you just create a new TextureRegion with the coortinates of your tile:

        float x = tileWidth * col;
        float y = tileHight * row;
    
        final TextureRegion region = Assets.getRegion(...);
    

    This way you load a texture region to be displayed at the right position whenever you need it to. You could even (if the range is never going to change) store them in a collection and then with every move shift their coordinates by one in whatever direciton.

    This would at least be my approach, not really knowing anything about Tiled.

    I have used a HexagonTile map before, however I had to write my own implementation (based on LibGDX). Here is the code, in case it helps you to further understand the idea: https://github.com/2RSoftworks/interstellarempires/blob/master/IEMaster/IEClient/src/main/de/r2soft/empires/client/maps/hex/R2HexMapRenderer.java#L167

    Hope this helped.