Collision detection with isometric tiles stored in rectangular files

Question

So I'm working with a player moving across a grid of isometric tiles. Each tile is stored in a .png file. I have a class that crops out BufferedImages from different sprite sheets and initializes them for use in my game. When I crop out a tile image, the image is cropped out like this (minus the black border):

Because the four corners of this rectangle are transparent, I'm able to tessellate the tiles perfectly. I'm now trying to implement collision detection and having a tough time. The player moves by following the mouse around. In the player's tick/update method, I am checking to see if his new position will be in a tile marked as being solid. If the tile is solid, I don't update his position so that movement doesn't occur. My problem is that when I check to see if the player is moving into a solid tile, I'm checking the entire .png image, including the transparent corners.

So, if I'm moving towards these 'stone' tiles and I mark them as being solid, the player isn't colliding with the tiles in a natural way.

In the image you see here, I've updated these stone tiles with a black border showing the edge of the BufferedImage, and I've updated my player with a red rectangle indicating his bounding box. I've marked these tiles as solid. As I approach the tiles from the left moving right, I collide with these black lines rather than the colored portion of the tile. Actually, sometimes I collide with nothing to the left of the tile, like in this image (I'm sure that's just my math somewhere.)

I considered trying to attach a Polygon object to each solid tile that covers only the visible pixels of each .png file and doing collision against the polygon instead of the whole tile. I'm currently trying to implement this and having troubles.

My question here then is, how would you implement collision detection in this scenario? Would you draw polygons in the shape of the visible portion of each BufferedImage and do collision against these polygons like this? Is there a change that I can make or a technique I can use to implement smooth collision detection? Should I use a polygon object to crop my tiles in the first place? I'm looking for the simplest way to go about this.

Answer 1

In my opinion, the best way to do this would be "convert" map into simple 2D topdown plane, then check the collision with more simple figure.

So you've got Screen World, which is drawn with tiles and stuff, but also your world's Computer Representation, just a 2D grid\matrix\array or anything. You can easily find different approaches of translating world coordinates into screen coordinates and vice-versa.

Use plain 2D world for collsion and use isometric tiles for drawing the world onto the screen.