Java-Gaming.org Hi !
 Featured games (91) games approved by the League of Dukes Games in Showcase (800) Games in Android Showcase (237) games submitted by our members Games in WIP (867) games currently in development
 News: Read the Java Gaming Resources, or peek at the official Java tutorials
Pages: [1]
 ignore  |  Print
 [SOLVED] theory on isometric  (Read 3130 times) 0 Members and 1 Guest are viewing this topic.
Yemto

Senior Devvie

Medals: 4
Exp: 3 years

 « Posted 2013-08-17 13:18:30 »

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
 « Reply #1 - Posted 2013-08-17 13:30:33 »

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
 « Reply #2 - Posted 2013-08-17 13:31:33 »

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.

JevaEngine, Latest Playthrough (This demo is networked with a centralized server model)

Yemto

Senior Devvie

Medals: 4
Exp: 3 years

 « Reply #3 - Posted 2013-08-17 13:45:03 »

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
 « Reply #4 - Posted 2013-08-17 13:51:43 »

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.

JevaEngine, Latest Playthrough (This demo is networked with a centralized server model)

Yemto

Senior Devvie

Medals: 4
Exp: 3 years

 « Reply #5 - Posted 2013-08-17 14:04:31 »

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
 « Reply #6 - Posted 2013-08-17 14:12:15 »

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

JevaEngine, Latest Playthrough (This demo is networked with a centralized server model)

jonjava
 « Reply #7 - Posted 2013-08-17 14:17:06 »

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

sproingie

JGO Kernel

Medals: 202

 « Reply #8 - Posted 2013-08-17 16:42:25 »

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

Senior Devvie

Medals: 4
Exp: 3 years

 « Reply #9 - Posted 2013-08-17 17:34:16 »

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.
Pages: [1]
 ignore  |  Print

 Riven (346 views) 2019-09-04 15:33:17 hadezbladez (5128 views) 2018-11-16 13:46:03 hadezbladez (2010 views) 2018-11-16 13:41:33 hadezbladez (5397 views) 2018-11-16 13:35:35 hadezbladez (1118 views) 2018-11-16 13:32:03 EgonOlsen (4536 views) 2018-06-10 19:43:48 EgonOlsen (5393 views) 2018-06-10 19:43:44 EgonOlsen (3081 views) 2018-06-10 19:43:20 DesertCoockie (3975 views) 2018-05-13 18:23:11 nelsongames (4526 views) 2018-04-24 18:15:36
 A NON-ideal modular configuration for Eclipse with JavaFXby philfrei2019-12-19 19:35:12Java Gaming Resourcesby philfrei2019-05-14 16:15:13Deployment and Packagingby philfrei2019-05-08 15:15:36Deployment and Packagingby philfrei2019-05-08 15:13:34Deployment and Packagingby philfrei2019-02-17 20:25:53Deployment and Packagingby mudlee2018-08-22 18:09:50Java Gaming Resourcesby gouessej2018-08-22 08:19:41Deployment and Packagingby gouessej2018-08-22 08:04:08
 java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org