[SOLVED] theory on isometric

[Yemto]

I don't really like to do two threads so soon. But I need to hear what people think about this. So I'm making a isometric game, and I'm not sure how to detect where a player clicks. So far the only idea I have is to loop through all loaded blocks and check if the mouse is on the grass on one of them. I don't think i can translate the mouse coordinates to isometric, since the map isn't going to be limited in size, and some block will be higher/lower than others.

Here is one example on how one part of a chunk will look.


I been working on a code that uses toRadians, sin, and cos to calculate where the edges of the grass on each blocks end up on the screen.

[Opiop]

Are you using LibGDX? If you are, it offers lots of functions for isometric tile games. I'd also say Google around for isometric picking more, there's bound to be something!

[Jeremy]

You are translating the tile's location using a some algorithm:

i.e:
x = x0*(tileWidth / 2.0F) + y0(-tileWidth / 2.0F)

y = x0(tileHeight / 2.0F) + y0(tileHeight / 2.0F)

Where tileHeight and tileWidth are the height and width of the tile's selectable surface.

Where x0 and y0 are your tile x & y coordinates.

From here there are two ways to go:

Reverse the Projection

You can construct a Projection Matrix from this (you can use Java's AffineTransform for example or implement this yourself (more optimal because all you need is a 2x2 matrix.)

Once you have a projection matrix for this system of equations, your can dot a vector with it, which will translate that vectors xy components to the respective screen-location. To do the reverse, you need to inverse the matrix and dot the screen xy components. If you zoom in/out and scale your sprites, you need to also scale your projection matrix.

Use a Color Map

Essentially, you translate the cursors X/Y location to a buffered Image that looks something like this:


You can then get an approximation of the cursors location by dividing it into cells. Then pick the colour map and test which colour it is over to determine exactly which tile it is over.

If you need me to go over more details just ask.

Games published by our own members! Check 'em out!

[Yemto]

Are you using LibGDX? If you are, it offers lots of functions for isometric tile games. I'd also say Google around for isometric picking more, there's bound to be something!

No, I don't use any libraries/engines at all. It's pure java2D.

You are translating the tile's location using a some algorithm:

i.e:
x = x0*(tileWidth / 2.0F) + y0(-tileWidth / 2.0F)

y = x0(tileHeight / 2.0F) + y0(tileHeight / 2.0F)

Where tileHeight and tileWidth are the height and width of the tile's selectable surface.

Where x0 and y0 are your tile x & y coordinates.

From here there are two ways to go:

Reverse the Projection

You can construct a Projection Matrix from this (you can use Java's AffineTransform for example or implement this yourself (more optimal because all you need is a 2x2 matrix.)

Once you have a projection matrix for this system of equations, your can dot a vector with it, which will translate that vectors xy components to the respective screen-location. To do the reverse, you need to inverse the matrix and dot the screen xy components.

Use a Color Map

Essentially, you translate the cursors X/Y location to a buffered Image that looks something like this:


You can then get an approximation of the cursors location by dividing it into cells. Then pick the colour map and test which colour it is over to determine exactly which tile it is over.

If you need me to go over more details just ask.

The buffered image sounds like an interesting. So if I understand it correctly, It's making a buffered image that is exactly like the map/chunk, aside form the fact it only do it in two colors, and I can use getRGB() to match it up with the correct block, is that right?

[Jeremy]

The buffered image sounds like an interesting idea. So if I understand it correctly, It's making a buffered image that is exactly like the map/chunk, aside form the fact it only do it in two colors, so I can use getRGB() to match it up with the correct block, is that right?

Yep, sounds about right. Just make sure that it is regenerated whenever zoom into the world (if you ever support that).

It doesn't have to be exactly like the map though, it can be just a rectangle slice like:


If relativeLoc.y > imageHeight /2 && relativeLoc.x < imageWidth/2 && pickedColour==green
    you are in the bottom left green

etc.

Just make sure you translate your cursor to that image properly.

*EDIT*
Oh my god I swear I am dyslexic, I always mix up x and y. Fixed.

[Yemto]

The buffered image sounds like an interesting idea. So if I understand it correctly, It's making a buffered image that is exactly like the map/chunk, aside form the fact it only do it in two colors, so I can use getRGB() to match it up with the correct block, is that right?

Yep, sounds about right. Just make sure that it is regenerated whenever zoom into the world (if you ever support that).

It doesn't have to be exactly like the map though, it can be just a rectangle slice like:


If relativeLoc.y > imageHeight /2 && relativeLoc.x < imageWidth/2 && pickedColour==green
    you are in the bottom left green

etc.

Just make sure you translate your cursor to that image properly.

*EDIT*
Oh my god I swear I am dyslexic, I always mix up x and y. Fixed.

I think I go with that method. But how do I generate the sprites into a single color. I can only think of doing something like this...


...I use the left one to render on the screen, and the right one so I can change it to whatever color I need, and generate it on the bufferedimage.

[Jeremy]

The buffered image sounds like an interesting idea. So if I understand it correctly, It's making a buffered image that is exactly like the map/chunk, aside form the fact it only do it in two colors, so I can use getRGB() to match it up with the correct block, is that right?

Yep, sounds about right. Just make sure that it is regenerated whenever zoom into the world (if you ever support that).

It doesn't have to be exactly like the map though, it can be just a rectangle slice like:


If relativeLoc.y > imageHeight /2 && relativeLoc.x < imageWidth/2 && pickedColour==green
    you are in the bottom left green

etc.

Just make sure you translate your cursor to that image properly.

*EDIT*
Oh my god I swear I am dyslexic, I always mix up x and y. Fixed.

I think I go with that method. But how do I generate the sprites into a single color. I can only think of doing something like this...


...I use the left one to render on the screen, and the right one so I can change it to whatever color I need, and generate it on the bufferedimage.

If you know your selectable surfaces tile width and height, you an just draw the top part using g.drawPolygon. If you want something more flexible, you could also use an RGBImageFilter on the original tile and filter anything that isn't alpha to a particular colour (blue or green) to generate its colourmap:
Here is an example using RpgImageFilter: http://www.massapi.com/source/jdk1.6.0_17/src/java/awt/image/RGBImageFilter.java.html

[jonjava]

You can use a zbuffer for pixel perfect mouse targeting by saving the tile id with the z value.

[sproingie]

You can use a zbuffer for pixel perfect mouse targeting by saving the tile id with the z value.

Best idea yet, allows for arbitrary tile shapes and sizes too.  Meant to quote but hey that also deserved appreciation

[Yemto]

If you know your selectable surfaces tile width and height, you an just draw the top part using g.drawPolygon. If you want something more flexible, you could also use an RGBImageFilter on the original tile and filter anything that isn't alpha to a particular colour (blue or green) to generate its colourmap:
Here is an example using RpgImageFilter: http://www.massapi.com/source/jdk1.6.0_17/src/java/awt/image/RGBImageFilter.java.html

Thanks so much, I just manage to implement it, and it work perfect ^^
I didn't understand RGBImageFilter, so I made my own function to recolor the tiles, and I saved the colors in an array so I can have more than 2.