Java-Gaming.org Hi !
 Featured games (84) games approved by the League of Dukes Games in Showcase (569) Games in Android Showcase (154) games submitted by our members Games in WIP (618) 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 888 times) 0 Members and 1 Guest are viewing this topic.
Yemto

Junior Devvie

Medals: 1
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.
opiop65

JGO Kernel

Medals: 165
Projects: 7
Exp: 4 years

JumpButton Studios

 « 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

Junior Devvie

Medals: 1
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

Junior Devvie

Medals: 1
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

Junior Devvie

Medals: 1
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

You cannot reply to this message, because it is very, very old.

 Riven (22 views) 2015-04-16 10:48:47 Duke0200 (35 views) 2015-04-16 01:59:01 Fairy Tailz (27 views) 2015-04-14 20:13:12 Riven (28 views) 2015-04-12 21:36:37 bus hotdog (45 views) 2015-04-10 02:39:32 CopyableCougar4 (46 views) 2015-04-10 00:51:04 BurntPizza (46 views) 2015-04-06 22:06:58 ags1 (51 views) 2015-04-02 10:58:48 Riven (49 views) 2015-04-01 18:27:05 ags1 (66 views) 2015-03-31 10:55:12
 BurntPizza 24x theagentd 21x wessles 15x 65K 12x Rayvolution 12x kingroka123 11x alwex 10x KevinWorkman 9x ra4king 8x phu004 8x kevglass 8x SHC 8x Olo 7x Ecumene 7x chrislo27 7x Roquen 7x
 How to: JGO Wikiby Mac702015-02-17 20:56:162D Dynamic Lighting2015-01-01 20:25:42How do I start Java Game Development?by gouessej2014-12-27 19:41:21Resources for WIP gamesby kpars2014-12-18 10:26:14Understanding relations between setOrigin, setScale and setPosition in libGdx2014-10-09 22:35:00Definite guide to supporting multiple device resolutions on Android (2014)2014-10-02 22:36:02List of Learning Resources2014-08-16 10:40:00List of Learning Resources2014-08-05 19:33:27
 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