• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Devaka Cooray
  • Tim Cooke
Sheriffs:
  • Rob Spoor
  • Liutauras Vilda
  • paul wheaton
Saloon Keepers:
  • Tim Holloway
  • Tim Moores
  • Mikalai Zaikin
  • Carey Brown
  • Piet Souris
Bartenders:
  • Stephan van Hulst

Isometric assistance needed

 
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello,

This is my first post on this forum and i introduce myself as a java newbie. Over the past two years i have been creating a turn based java game on and off. Ive had many attempts, each attempt getting better. My last attempt i coded random map generation, units, terrain types, movement, battle system etc. However, my weakness is understanding of graphics in java, in particular , isometric graphics. I feel let down as i can code a decent amateur game, but can only display it "top-down".

Firstly, while i have been game programming, i have looked extensively at isometric graphics. I have found good information, such as in gamedev.net/amits webpage/various forums. I understand the concept of isometrics - it is basically a square grid rotated 45% to create the illusion of 3d. I believe this is done via a formula. Any code examples are for c++.

Please find below a very simple method to generate square terrain tiles. The way it works is as follows;

1- a reference array is created. This decides terrain type. In this example each has a movement cost and an icon.
2- a JLabel array that displays the icon of the terrain. Only one layer is used in this simple example.
3-each JLabel is a 64x64 square. Grid size is set at 2x2.

Note; the code has been typed out recently and i apologize for any "case" errors/unprofessional layout/any "}" left out at end of code etc. i think x/y may be mixed up too.











1: how do i make this isometric (i assume rotate 45 degrees)
2: if it is not possible to do this (due to square jlabels), how do i represent graphics via the reference array.
3: Any advice on "better coding" would be appreciated
4: Would it be possible to display both isometric and "top-down" with the same application. e.g. Main window = isometric/Pop-up window = topdown

Thankyou for reading the post and i hope you can help, either with code,advice,links etc.

Regards,

David
[ October 01, 2006: Message edited by: David Laverty ]
 
Ranch Hand
Posts: 38
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi,
i can try to explain what i did.
The tiles are still rectangular (64x,31y) but the are overlapping eachother.
And every 2nd row is shifted a half tile to the left or right. That way all the tiles are linked together.
I did save all the background tiles in an HashMap<Point, Sprite>.
The Point represents the world coords. where the tile is and the Sprite is a simple Class i made. It contains a BufferedImage and the AnchorPoint of the tile.(in case it is not 0,0). The values of the AnchorPoint added/substracted directly before the final painting part. The Sprite-Class itsef has nothing to do with Items or other Objects. It is just a graphical representation of such an object.
The i just loop over the coordinates i wanna paint and tell the Sprite to paint it self. Could look like this.

gfx2d is the graphics context where the tiles should be painted...

Something like this... its not really hard. And its allready sorted. In the x-for loop you could also check if a hero stands around on that coordinate and paint that guy to, that way the graphics do nicely cover each other.
Scrolling around in a large map is also fairly easy and just needs a small modification of the above code.

Does that help?
[ October 01, 2006: Message edited by: Michael Kohlbach ]
 
Mike Cole
Ranch Hand
Posts: 38
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Since you didn't reply for a few days i would like to ask if that helped you or if you need some more ideas/tips or whatever....
 
Ranch Hand
Posts: 3061
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
For complicated graphics, you should look into Java3D or OpenGL bindings for Java (such as jogl). These libraries provide a lot more tools that you can use other than the simple graphics in the Swing library. I'm willing to bet that most of the C++ samples you see online use OpenGL, so if you use OpenGL in Java, it will probably be easier to translate them over.

I hope this helps.

Layne
 
David Laverty
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello,

Apologies to michael kohlbach for my delay in my reply - i work 45 hours a week and is have been busy recently!
I read what you wrote, and i have managed to create a grid of isometric tiles, using jlabels with icons ( i will change this to images when i get the time ). A diamond shape is the top layer, with a transperent background, allowing me to shift my rows.
Your second comment, about painting sprites on the screen over the background has given me some ideas and things to think about. However i have come across some issues that i have not been able to fix due to time constraints.

1: i cant figure out how to give a tile height (z) - If i want a graphic to be taller than 1 tile, i CURRENTLY have to split the graphic among tiles eg a Tree. Any suggestions?
2: i am concerned with my future graphics , in particular, graphics in front of other graphics eg a tree blocking a character. This is something i will look into.
3: i have not devised a formula to make my tile grid - I currently hard code each tile using "if..else" statements which position a tile depending on wether its location in grid is odd or even. This is something i can fix with time.
4: As you may be aware, i am coding a UFO clone (to an extent). If you are familiar with this kind of turnbased game, you should have an idea of what i am trying to produce (The engine, not the game). I have checked out other UFO clones and isometric engines (with some understanding).

Layne Lund, thankyou for your interest and offer of assistance. I will definately look into jlog. Being amateur, this was not something i had heard of. Now i have - i will read into it! :-)

I am quite busy up until friday evening, when i shall be back to check this thread out. I am pleased with the help i have received and i have made progress.

Regards,

David
 
Mike Cole
Ranch Hand
Posts: 38
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
UFO- long time ago i cant remember much... my goals are something like utlima or arcanum/fallout like.
Anyway...
For the layer question, atm. i have a Map Class which contains a List of MapLayers each MapLayer is made of other seperate and visible Layers. A "background" layer. Then an "object" layer and a "hero" layer. I dont paint one layer after another, i paint coordinate by coordinate, because each coordinate can contain more than just one graphic object(expect for the things in the BG-Layer).
The "object" layer is more sopisticated it is a
HashMap<Point, ArrayList<Sprite>> A coordinate with a List of graphics. This enables me to make a wall-tile and draw a torch on the same Coords.

For the graphics i made a Sprite-Class which contains a BufferedImage(hardware-accelerated) the Anchor-Point for the image(if it is animated it will do that to). With this anchor point i can make an offset in the Z-Axis. (Actually in all 3 directions). Normally all my sprites are more or less centered. A 64h,32w image has an anchor like x+32 y+16 z+0. With this i can "move" a tile up or down, which gives the impression you walk through a doorway or under a bridge. This is really just something the Sprite needs to know the MapLayer just paint coordinate after coordinate.

So the map says: MapLayer1.paintYourself(); -> MapLayer1 says: Sprite.paintYourselfAt(coord.x*64, coord.y*16); and finally the Sprite uses something like: this.paintYourself(int x,int y) {drawImage(img, x+anchorP.x, y+anchorP.y+anchorP.z)}

As mentioned in the first post this works quite good with sorting issues. Things are not drawn before something, if they are actually behind an object(coordinate wise).

For the sprites themself i made a sprite-editor where you can place your image on a iso-grid and move it around, adjust animation speed and then save it as a sprite file.

Overall i have around 90-100 FPS, but i will have some more when the GUI hides some of the rows and i dont have to draw them aynmore.
 
David Laverty
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thankyou for reply Micheal,


I have looked at what you said and understand isometrics more. Also , i had heard of "hashmap" but did not know what is did - it is something i will look at and see if i can use!
The idea of layers i have heard of before. The games ultima and arcanum i am familiar with - ultima is where i first heard of layers (i believe one of the ultima games used 7 layers!).
Currently i am still creating the basics of the isometric engine. I have the diamond shape art, and can arrange it into rows and columns. As i am sure you are aware, this produces a "Zig-Zag" layout, rather than a map with 4 corners.
Having a map with 4 corners is what i am working on now. So far, i have coded this to create the top half of a map - i.e. a 3x3 map has 5 rows (1 tile, 2 tiles, 3 tiles, 2 tiles, 1 tile). My code currently creates the top two rows and the middle row. I can just reverse it to create the bottom half.
However, my code is long and very amateur. Although it works, alot of the LOC code be reduced by using a formula (some of my code is manually worked out rather than worked out in a loop or nested loop).
If you are able to help (it is basically a maths/algoritm problem), let me know and i will post the relavent code). Im not sure if this would be the correct forum however.

Thankyou,

David
[ October 07, 2006: Message edited by: David Laverty ]
 
Mike Cole
Ranch Hand
Posts: 38
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hey!
Iso map-types... What you are looking for is called a Diamond-Map. I did a Staggered-Map and there are also Slide-Maps.
I mainly did the staggered because it felt natural somehow and i plan to never let the player reach the edges of the map. But there is also the possibility only to fill a half tile. by putting these to the border it will look like one big rectangle map.

Sure you can post some code but iam no pro myself! But i will try to help where ever i can. It is code for a game so it would fit here perfectly
 
David Laverty
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi,

I read what you wrote about how you dealt with a staggered map. Ive decided to do the same - your trick of changing the border art to decide the user is good. Also, ive found rows and columns more accessible with staggered.
[ October 08, 2006: Message edited by: David Laverty ]
 
David Laverty
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi!

What method did you use to correctly map isometric coordinates?

I used formula found on www.gamedev.net. An instance of a mouseListener was added to each created tile. When clicked, the row + col was displayed eg 1/0. This only mapped the coordinates of the WHOLE image (ie both the diamond and the transparent, which is wrong) - ie overlapping issues.

I have read about a method where each tile has 4 colors at its edges eg red,green, etc. If a particlar color is clicked, the row or column is changed appropriately. IS this what i should be doing?

Regards,

David
 
Mike Cole
Ranch Hand
Posts: 38
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi, i didn't invest much time into that. I just use the biggest rectangle possible inside the diamond-shaped gfx to find out on which one iam. This works atm. but the mouse jumps around sometimes.

About that colored mouse-map image, yes, i was thinking about that too. It sounds logical, but i did'nt knew how i should implement that, so i moved over to "object"-picking. That is were i stand atm. but iam also not very sucessful there...

Currently iam not that motivated to program in the evening, because i code the whole day at work and have 3 evenings in a week, where i visit a school... and most important is getting cold, the days shorter and the trees loose their leafes. So, most of the time i hang around in my room ask myself where i would be in some years and such... yeah, its very boring but i can't motivate myself to sit in front of the PC and do something usefull... cruel world.

Anyway, if you find out how to do that mouse-map thing with java tell me please. Maybe that gives me some motivation back.

Thanks and bye!
 
Enjoy the full beauty of the english language. Embedded in this tiny ad:
Smokeless wood heat with a rocket mass heater
https://woodheat.net
reply
    Bookmark Topic Watch Topic
  • New Topic