Why are there large spaces between the hexes when rendered by HexagonalTiledMapRenderer? The tiles ARE black bordered, but that doesn't account for all the extra space. I was also able to get them much closer together by modifying the .tmx file that Tiled produced.
Picture showing the tiles fitting tightly together. The left and bottom borders are filled out with orange tiles.
You can see the map properties as tile width 156, tile height 96, side length 0, staggered axis x, stagggered index odd, and tile render order right down:
Picture showing the tiles as rendered in game by HexagonalTiledMapRenderer:
Picture showing what the in game rendering looks like if I edit the tag's tilewidth attribute to be 100 instead of 166:
I imported the below image into Tiles using tile width 156, height 96, margin 0, spacing 0, and transparent color white. I got it from one of the libGDX tests:
test3.tmx as generated by Tiled:
<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="hexagonal" renderorder="right-down" width="25" height="25" tilewidth="166" tileheight="96" hexsidelength="0" staggeraxis="x" staggerindex="odd" nextobjectid="1">
<tileset firstgid="1" name="hexes" tilewidth="60" tileheight="52" tilecount="16">
<image source="hexes.png" trans="ffffff" width="256" height="256"/>
</tileset>
<tileset firstgid="17" name="hexes" tilewidth="82" tileheight="52" tilecount="12">
<image source="hexes.png" trans="ffffff" width="256" height="256"/>
</tileset>
<tileset firstgid="29" name="1" tilewidth="112" tileheight="97" tilecount="4">
<image source="hexes.png" trans="ffffff" width="256" height="256"/>
</tileset>
<layer name="Tile Layer 1" width="25" height="25">
<data encoding="base64" compression="zlib">
eJztk0sKwDAIRL2Iev9btguFwSbNT7ooDgzSSObZhBCVSvnSYhTjBwy5zeYvGPrinnqztRir+aN/V+uL2ddGM89kRwYZQ2Ed6052j+HOyI4MPCvncfCukIHfHHon7whzst9Ga24JPdQKW+h5t76fG/0TK9RM4/l4vQDIeBDE
</data>
</layer>
</map>
Finally, here's the source code of the class doing the rendering:
package com.mpinnegar.zoguequest.screens;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.InputProcessor;
import com.badlogic.gdx.assets.AssetManager;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer.ShapeType;
import com.badlogic.gdx.maps.MapRenderer;
import com.badlogic.gdx.maps.tiled.TmxMapLoader;
import com.badlogic.gdx.maps.tiled.renderers.HexagonalTiledMapRenderer;
import com.badlogic.gdx.math.MathUtils;
import com.badlogic.gdx.math.Vector2;
import com.badlogic.gdx.math.Vector3;
import com.mpinnegar.zoguequest.ZogueQuest;
public class OverWorld extends AbstractScreen {
private final int overWorldGameWidth = 100;
private final int overWorldGameHeight = 100;
private Vector3 userClickCoordinates = new Vector3();
private final OrthographicCamera camera = new OrthographicCamera(overWorldGameWidth, overWorldGameHeight);
private Vector2 currentPosition = new Vector2();
private Vector2 destinationPosition = new Vector2(100, 100);
private MapRenderer mapRenderer = new HexagonalTiledMapRenderer(new TmxMapLoader().load("test3.tmx"), .2f);
public OverWorld(ZogueQuest zogueQuest, AssetManager assetManager) {
super(zogueQuest, assetManager);
}
@Override
public void render(float delta) {
Color markerColor = Color.WHITE;
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
if (!currentPosition.epsilonEquals(destinationPosition, .5f)) {
Vector2 directionToDestination = destinationPosition.cpy().sub(currentPosition).nor();
currentPosition.add(directionToDestination.scl(50 * delta));
currentPosition.y = MathUtils.clamp(currentPosition.y, 0, overWorldGameHeight);
currentPosition.x = MathUtils.clamp(currentPosition.x, 0, overWorldGameWidth);
} else {
markerColor = Color.BLUE;
}
camera.update();
mapRenderer.setView(camera);
mapRenderer.render();
ShapeRenderer shapeRenderer = new ShapeRenderer();
shapeRenderer.setProjectionMatrix(camera.combined);
shapeRenderer.begin(ShapeType.Filled);
shapeRenderer.setColor(markerColor);
shapeRenderer.circle(currentPosition.x, currentPosition.y, 2);
shapeRenderer.end();
shapeRenderer.begin(ShapeType.Line);
shapeRenderer.setColor(Color.GREEN);
shapeRenderer.rect(0, 0, overWorldGameWidth, overWorldGameHeight);
shapeRenderer.end();
}
@Override
public void show() {
super.show();
Gdx.input.setInputProcessor(new InputProcessor() {
@Override
public boolean keyDown(int keycode) {
return false;
}
@Override
public boolean keyUp(int keycode) {
return false;
}
@Override
public boolean keyTyped(char character) {
return false;
}
@Override
public boolean touchDown(int screenX, int screenY, int pointer, int button) {
userClickCoordinates.set(screenX, screenY, 0);
userClickCoordinates = camera.unproject(userClickCoordinates);
destinationPosition.set(userClickCoordinates.x, userClickCoordinates.y);
return true;
}
@Override
public boolean touchUp(int screenX, int screenY, int pointer, int button) {
return false;
}
@Override
public boolean touchDragged(int screenX, int screenY, int pointer) {
return false;
}
@Override
public boolean mouseMoved(int screenX, int screenY) {
return false;
}
@Override
public boolean scrolled(int amount) {
return false;
}
});
}
@Override
public void resize(int width, int height) {
super.resize(width, height);
camera.viewportWidth = overWorldGameWidth * aspectRatio(width, height);
camera.viewportHeight = overWorldGameHeight;
camera.position.set(camera.viewportWidth / 2, camera.viewportHeight / 2, 0);
}
}
