Java-Gaming.org Hi !
Featured games (83)
games approved by the League of Dukes
Games in Showcase (522)
Games in Android Showcase (127)
games submitted by our members
Games in WIP (589)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  [SOLVED] theory on isometric  (Read 743 times)
0 Members and 1 Guest are viewing this topic.
Offline Yemto

Junior Devvie


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.
Offline opiop65

JGO Kernel


Medals: 159
Projects: 7
Exp: 3 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!

Offline 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)

http://www.youtube.com/watch?v=rWA8bajpVXg
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline Yemto

Junior Devvie


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?
Offline 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)

http://www.youtube.com/watch?v=rWA8bajpVXg
Offline Yemto

Junior Devvie


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.
Offline 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)

http://www.youtube.com/watch?v=rWA8bajpVXg
Offline 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.

Offline 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 Smiley


Offline Yemto

Junior Devvie


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.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

trollwarrior1 (15 views)
2014-11-22 12:13:56

xFryIx (68 views)
2014-11-13 12:34:49

digdugdiggy (47 views)
2014-11-12 21:11:50

digdugdiggy (41 views)
2014-11-12 21:10:15

digdugdiggy (35 views)
2014-11-12 21:09:33

kovacsa (59 views)
2014-11-07 19:57:14

TehJavaDev (61 views)
2014-11-03 22:04:50

BurntPizza (60 views)
2014-11-03 18:54:52

moogie (75 views)
2014-11-03 06:22:04

CopyableCougar4 (76 views)
2014-11-01 23:36:41
Understanding relations between setOrigin, setScale and setPosition in libGdx
by mbabuskov
2014-10-09 22:35:00

Definite guide to supporting multiple device resolutions on Android (2014)
by mbabuskov
2014-10-02 22:36:02

List of Learning Resources
by Longor1996
2014-08-16 10:40:00

List of Learning Resources
by SilverTiger
2014-08-05 19:33:27

Resources for WIP games
by CogWheelz
2014-08-01 16:20:17

Resources for WIP games
by CogWheelz
2014-08-01 16:19:50

List of Learning Resources
by SilverTiger
2014-07-31 16:29:50

List of Learning Resources
by SilverTiger
2014-07-31 16:26:06
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
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!