Isometric Mouse Collision?

Game Mechanics
#1

I’ve been messing around with drawing isometric tiles and I’m a bit stuck on mouse collisions. I found this article on isometric tiles: http://clintbellanger.net/articles/isometric_math/

Here’s my rendering code:

 for(int x = 0; x < map.width(); x++){
	for(int y = map.height(); y >= 0; y--){
		Sprite s = map.getSpriteAt(x, y);

        int xa = (x - y) * (s.width / 2);
        int ya = (x + y) * (s.height / 2);

        Point p = mouseToIsoTile(mx, my, s.width, s.height);
        if(p.x != x || p.y != y) screen.renderSprite(s, xa, ya);
    }
}

The onTile() methods takes in the mouse x,y coords as well as the sprite width and height.

Here’s the onTile() method:

public Point onTile(int xa, int ya, int width, int height){
	int x = (xa / (width / 2) + ya / (height / 2)) / 2;
	int y = (ya / (height / 2) - (xa / (width/ 2))) / 2;
	return new Point(x, y);
}

When I run the code to hide the tile below the mouse I get this:

You can see the hidden tile is somewhat accurate, but it seems off and I cant seem to figure out why.

#2

Seems like a sprite anchoring issue (should be top corner pixel of your isometric sprite) (the first tile top corner should be smack middle on the top left corner of the screen) – that or screen offset issue.

#3

I’m not doing any screen offset just yet.

This is the sprite I’ve been using, its 30x15. (Its part of a 64x64 spritesheet, I cut it out at runtime)

537×534 1.01 KB

When I switch to this sprite, which is 32x32 with the tile on the bottom half, strange things happen.

Edit: I fixed the weird tiles in the last image by changing this line in the rendering code from

int ya = (x + y) * (s.height / 2);

to

int ya = (x + y) * (s.height / 2) / 2;

The mouse collision is still very broken.

Here’s a bigger gif. It seems to break on the right half of each tile.

736×760 92.1 KB

#4

Perhaps s.width / s.height doesn’t correspond to the actual tile width/height (not necessarily the same as sprite width/height)

Nevertheless if the error remains constant on all the tiles it’s just a small offset issue – try adding ± offsets to the tiles until you get the correct behavior – then you will know the actual error offsets in numbers and it might help you pinpoint the actual issue.

#5

Looks like you’re missing an x offset. Either width/2 for mouse interpretation or -width/2 for rendering. adjusting either should solve the problem. The link you provided mentions this in the fine print which is annoying since as far as I can tell an offset is required for any useful implementation.

Or to put it another way. In this image you’ve declared 0,0 to be the top-left corner of the image when actually you want 0,0 to be the top corner of the green diamond. So coordinates need to be shifted by width/2.

537×534 1.01 KB

#6

Looking at the video, it seems that the issue is that you are using bounding squares, not the actual tile itself. Might need to rotate the bounding square to match.

I dont’ have any good solutions.

good luck.