Jump to content

  • Log In with Google      Sign In   
  • Create Account

Banner advertising on our site currently available from just $5!

1. Learn about the promo. 2. Sign up for GDNet+. 3. Set up your advert!


Member Since 13 Aug 2010
Offline Last Active Apr 06 2015 04:22 PM

Posts I've Made

In Topic: Problem with 2D isometric tile picking

20 March 2015 - 07:16 PM

Unrelated issue: Typically you shouldn't load images every frame, you should load images once and then store them someplace where you can repeatedly use them.


Oh, thanks for that. Fixed that up and now it only loads the once.



That depends entirely on your API and language, though it looks like you already figured that out.


That actually still seems to be my problem, after some troubleshooting I've noticed that none of my if statements actually get called. So I must have done something wrong with that. I'm using Java with the LibGdx API so I'll keep looking for something about that. I also changed the if statements so that they increment diagonally as well.

In Topic: Problem with 2D isometric tile picking

19 March 2015 - 04:38 PM

Okay, so I tried to implement this solution and this is what I came up with.



    public void gta(int clickX, int clickY){
        Pixmap mouseMap = new Pixmap(Gdx.files.internal("mouseMap.png"));
        Color red = new Color(255,0,0,0);
        Color green = new Color(0,255,0,0);
        Color blue = new Color(0,84,166,0);
        Color yellow = new Color(255,242,0,0);
        Color black = new Color(0,0,0,0);

        Vector2 coords = isoToCart(clickX,clickY);
        int mouseMapX = clickX%TILE_WIDTH;
        int mouseMapY = clickY%TILE_HEIGHT;
        int val = mouseMap.getPixel(mouseMapX, mouseMapY);
        Color color = new Color(val);
        }else if(color.equals(green)){
        }else if(color.equals(blue)){
        }else if(color.equals(yellow)){
        if(data[(int)coords.y][(int)coords.x] == 0){
            data[(int)coords.y][(int)coords.x] = 1;
            data[(int)coords.y][(int)coords.x] = 0;

It still seems to be quite a bit off. I'm not sure what's going on with this code. I'll keep at it but I'm going to leave this here to see if anyone has any ideas.

In Topic: Problem with 2D isometric tile picking

19 March 2015 - 03:49 PM


Have you considered a mouse map?


Mouse maps are the easy way to do hexagon or isometric (or any shape) mouse picking without any complex math.




You basically divide the screen into rectangles (offset by the camera), figure out what rectangle the mouse is in for your tile x,y, then index into an image like the above one (kept on the CPU side of things, not stored in the videocard, because it's not actually drawn).


You get the pixel color, and then make a slight adjustment:(based on how your map staggering is laid out)

if(color == blue) TileY -= 1;
if(color == red) TileY -= 1, TileX += 1;
if(color == green) TileY += 1;
if(color == yellow) TileY += 1, TileX += 1;
if(color == black) do nothing;

I had honestly never heard of a mouse map up until this post but it seems like a really good solution. I'm just not sure how you're supposed to implement the actual mouse map. Do I create an image with the different colors? How do I check what color the click was registered on? The rest of it seems pretty straightforward.


At the moment what I was thinking was creating some sort of mouseMap.png or similar then getting where the mouse was clicked on the mousemap. All you'd have to do at that point is check the color. I'm just unsure of how exactly you would do that. Any suggestions?

In Topic: Rendering sprite on isometric tilemap (LibGDX)

25 November 2014 - 11:46 AM

Are you using a libGDX API to do the isometric rendering?  I am not familiar with libGDX but I would imagine the API has gridToScreen and screenToGrid methods.


You could setup the modelView matrix and do the screen projection yourself but that will be complicated.


Edit:  Looking at the API it seems that they hide everything.


This may help: http://clintbellanger.net/articles/isometric_math/


Yes, I'm using LibGDX for my isometric rendering.


I've also looked at that article and tried the methods listed but that doesn't seem to work either. I'm not at home so I can't describe exactly what happened but it wasn't desirable.


I was hoping I could figure how how they do it within the API and copy it's functionality perhaps.



In Topic: Rendering sprite on isometric tilemap (LibGDX)

24 November 2014 - 10:06 PM

I've done work before with regular grids without an API and feel like I have a solid understanding on how those work. I don't want to rotate my sprite before I draw it, I want to draw it the way it is. I'm having trouble with screen placement though as it appears that they are not placed the same (I've tried). I'll include the API code for the isometric map renderer and hopefully someone will have an idea. All I want to do is for example, I want my player to be at (10, 3) on the map, what transformations will I need to do to that vector to get the actual screen coordinates.

public class IsometricTiledMapRenderer extends BatchTiledMapRenderer {

	private Matrix4 isoTransform;
	private Matrix4 invIsotransform;
	private Vector3 screenPos = new Vector3();

	private Vector2 topRight = new Vector2();
	private Vector2 bottomLeft = new Vector2();
	private Vector2 topLeft = new Vector2();
	private Vector2 bottomRight = new Vector2();

	public IsometricTiledMapRenderer (TiledMap map) {

	public IsometricTiledMapRenderer (TiledMap map, Batch batch) {
		super(map, batch);

	public IsometricTiledMapRenderer (TiledMap map, float unitScale) {
		super(map, unitScale);

	public IsometricTiledMapRenderer (TiledMap map, float unitScale, Batch batch) {
		super(map, unitScale, batch);

	private void init () {
		// create the isometric transform
		isoTransform = new Matrix4();

		// isoTransform.translate(0, 32, 0);
		isoTransform.scale((float)(Math.sqrt(2.0) / 2.0), (float)(Math.sqrt(2.0) / 4.0), 1.0f);
		isoTransform.rotate(0.0f, 0.0f, 1.0f, -45);

		// ... and the inverse matrix
		invIsotransform = new Matrix4(isoTransform);

	public void renderObject (MapObject object) {


	private Vector3 translateScreenToIso (Vector2 vec) {
		screenPos.set(vec.x, vec.y, 0);

		return screenPos;

	public void renderTileLayer (TiledMapTileLayer layer) {
		final Color batchColor = spriteBatch.getColor();
		final float color = Color.toFloatBits(batchColor.r, batchColor.g, batchColor.b, batchColor.a * layer.getOpacity());

		float tileWidth = layer.getTileWidth() * unitScale;
		float tileHeight = layer.getTileHeight() * unitScale;
		float halfTileWidth = tileWidth * 0.5f;
		float halfTileHeight = tileHeight * 0.5f;

		// setting up the screen points
		// COL1
		topRight.set(viewBounds.x + viewBounds.width, viewBounds.y);
		// COL2
		bottomLeft.set(viewBounds.x, viewBounds.y + viewBounds.height);
		// ROW1
		topLeft.set(viewBounds.x, viewBounds.y);
		// ROW2
		bottomRight.set(viewBounds.x + viewBounds.width, viewBounds.y + viewBounds.height);

		// transforming screen coordinates to iso coordinates
		int row1 = (int)(translateScreenToIso(topLeft).y / tileWidth) - 2;
		int row2 = (int)(translateScreenToIso(bottomRight).y / tileWidth) + 2;

		int col1 = (int)(translateScreenToIso(bottomLeft).x / tileWidth) - 2;
		int col2 = (int)(translateScreenToIso(topRight).x / tileWidth) + 2;

		for (int row = row2; row >= row1; row--) {
			for (int col = col1; col <= col2; col++) {
				float x = (col * halfTileWidth) + (row * halfTileWidth);
				float y = (row * halfTileHeight) - (col * halfTileHeight);

				final TiledMapTileLayer.Cell cell = layer.getCell(col, row);
				if (cell == null) continue;
				final TiledMapTile tile = cell.getTile();

				if (tile != null) {
					final boolean flipX = cell.getFlipHorizontally();
					final boolean flipY = cell.getFlipVertically();
					final int rotations = cell.getRotation();

					TextureRegion region = tile.getTextureRegion();

					float x1 = x + tile.getOffsetX() * unitScale;
					float y1 = y + tile.getOffsetY() * unitScale;
					float x2 = x1 + region.getRegionWidth() * unitScale;
					float y2 = y1 + region.getRegionHeight() * unitScale;

					float u1 = region.getU();
					float v1 = region.getV2();
					float u2 = region.getU2();
					float v2 = region.getV();

					vertices[X1] = x1;
					vertices[Y1] = y1;
					vertices[C1] = color;
					vertices[U1] = u1;
					vertices[V1] = v1;

					vertices[X2] = x1;
					vertices[Y2] = y2;
					vertices[C2] = color;
					vertices[U2] = u1;
					vertices[V2] = v2;

					vertices[X3] = x2;
					vertices[Y3] = y2;
					vertices[C3] = color;
					vertices[U3] = u2;
					vertices[V3] = v2;

					vertices[X4] = x2;
					vertices[Y4] = y1;
					vertices[C4] = color;
					vertices[U4] = u2;
					vertices[V4] = v1;

					if (flipX) {
						float temp = vertices[U1];
						vertices[U1] = vertices[U3];
						vertices[U3] = temp;
						temp = vertices[U2];
						vertices[U2] = vertices[U4];
						vertices[U4] = temp;
					if (flipY) {
						float temp = vertices[V1];
						vertices[V1] = vertices[V3];
						vertices[V3] = temp;
						temp = vertices[V2];
						vertices[V2] = vertices[V4];
						vertices[V4] = temp;
					if (rotations != 0) {
						switch (rotations) {
						case Cell.ROTATE_90: {
							float tempV = vertices[V1];
							vertices[V1] = vertices[V2];
							vertices[V2] = vertices[V3];
							vertices[V3] = vertices[V4];
							vertices[V4] = tempV;

							float tempU = vertices[U1];
							vertices[U1] = vertices[U2];
							vertices[U2] = vertices[U3];
							vertices[U3] = vertices[U4];
							vertices[U4] = tempU;
						case Cell.ROTATE_180: {
							float tempU = vertices[U1];
							vertices[U1] = vertices[U3];
							vertices[U3] = tempU;
							tempU = vertices[U2];
							vertices[U2] = vertices[U4];
							vertices[U4] = tempU;
							float tempV = vertices[V1];
							vertices[V1] = vertices[V3];
							vertices[V3] = tempV;
							tempV = vertices[V2];
							vertices[V2] = vertices[V4];
							vertices[V4] = tempV;
						case Cell.ROTATE_270: {
							float tempV = vertices[V1];
							vertices[V1] = vertices[V4];
							vertices[V4] = vertices[V3];
							vertices[V3] = vertices[V2];
							vertices[V2] = tempV;

							float tempU = vertices[U1];
							vertices[U1] = vertices[U4];
							vertices[U4] = vertices[U3];
							vertices[U3] = vertices[U2];
							vertices[U2] = tempU;
					spriteBatch.draw(region.getTexture(), vertices, 0, 20);