5
\$\begingroup\$

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:

enter image description here

Picture showing the tiles as rendered in game by HexagonalTiledMapRenderer:

enter image description here

Picture showing what the in game rendering looks like if I edit the tag's tilewidth attribute to be 100 instead of 166:

enter image description here

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:

enter image description here

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);
    }
}
\$\endgroup\$
  • 1
    \$\begingroup\$ Please try turning on the grid in Tiled and adjusting your "tile side length" so that the grid matches correctly with your tiles. I don't know if it will fix the libgdx rendering issue, but it would improve the mouse picking a little. This entire question should probably be reported as a libgdx issue at github.com/libgdx/libgdx/issues. \$\endgroup\$ – Thorbjørn Lindeijer Sep 1 '15 at 7:55
  • \$\begingroup\$ Aligning the tiles to the grid fixed the problem by increasing the tile side length. If you want to answer the question with your comment I'll be happy to accept it. Just FYI I found importing tilesets into Tiles and trying to get everything working pretty confusing even after following several guides. The critical "map properties" setting is pretty well buried in the menu system, and I had no idea what the tile side length did. \$\endgroup\$ – Jazzepi Sep 1 '15 at 22:12
3
\$\begingroup\$

Try turning on the grid in Tiled (Ctrl+G) and adjusting your "Tile Side Length" in the Map Properties so that the grid matches correctly with your tiles. It may fix the libgdx rendering issue, and would improve the mouse picking in Tiled a little.

I know setting up a hexagonal map (and even an isometric map) is somewhat confusing at the moment. It's definitely something I would like to improve (and of course also something to document in the manual).

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.