Isometric 2D Tutorials?

Java 2D
#1

Ok, im a student, and I will be starting my final year project this september, I would like to do a little research starting now on the feasability of certain ideas, one of which is an isometric 2D game, from the angle at which it might look slightly three dimensional.

I have developed games in java in the past, for university, but nothing this big, and I feel I may be in over my head, which is why I am researching this now…

Ideally I would like to get hold of some tutorials on this topic, so I can come up with a spec document, and begin development next month, so that come september I will be able to focus heavily on this as a project.

I am entirely willing to contribute all work that I complete to this forum in the form of an engine for people to use, however, for obvious reasons, publishing of code would have to wait until after I have handed the project in.

cheers

Slip.

#2

For the graphics, I recommend looking at
http://reinerstileset.4players.de/
He used to have some tuturials, but there are a lot of free isometric game graphics there.

#3

Thanks, but its not so much tile sets that I need, I will probably create my own, what I need is a tutorial or sample starter kit, to show how I display the tiles in a 2D java game…

#4

http://www.gamedev.net/reference/articles/article744.asp

http://www.gamedev.net/reference/articles/article747.asp

http://www.gamedev.net/reference/articles/article738.asp

http://www.java-gaming.org/index.php/topic,16936.0.html

http://www.gamedev.net/community/forums/forum.asp?forum_id=13 (show all topics)

http://www.compuphase.com/axometr.htm

http://www-cs-students.stanford.edu/~amitp/gameprog.html

http://www.gamedev.net/reference/list.asp?categoryid=44

#5

You could always fake isometric maps… :stuck_out_tongue:

http://grimdot.com/forum/uploads/1267016843/gallery_1_4_142972.png
.

#6

See section 2 for some Java code I wrote:
http://www.noblemaster.com/public/

Webstart Demo: http://www.noblemaster.com/public/webstart/isomap/IsoMap.jnlp

#7

I entered 2 isometric games in the recent Java4k competition
Falcon4k
Assassins4k

The drawing routine starts at the back row and draws each column of blocks in turn in back to front order (painters algorithm).
This works 100% for drawing the blocks, but what do you do when you want to draw the player, which can overlap up to 4 columns?
The answer is to draw the player in every column it overlaps. You draw all the blocks below the player. Then draw the player. Then draw any blocks above the player.

However you need to mask out the pixels that fall outside the column. This can be achieved by clipping left and right to the column boundaries. Assassins4k uses this technique. You effectively draw the player 4 times. This only works if there are no blocks above the player.

If there are blocks above the player (i.e. you can go under an arch) or you want to draw shadows (as in Falcon4k), clipping left and right is insufficient. You need to mask for the hexagon shape of the isometric cube for the player, and for the quadrilateral floor tile shape for the shadow. You can use Graphics2D and AlphaComposite for this.



                                    // Draw shadow after drawing top block

                                    // Create an image for compositing        
                                    gc.setComposite(AlphaComposite.Src);
                                    gc.setColor(transparent);
                                    gc.fillRect(0, 0,
                                      IMAGEWIDTH, IMAGEHEIGHT);
                                    gc.drawImage(
                                      m<2?shadow[6+m]:shadow[8],
                                      bsx, bsy,        // Destination
                                      bsx+tw, bsy+th,
                                      tx, ty,          // Source Tile
                                      tx+tw, ty+th, null);

                                    // Mask anything not at floor level
                                    gc.setComposite(
                                      AlphaComposite.DstIn);
                                    gc.drawImage(mask, 0, 0, null);

                                    // Draw Shadow
                                    if (mHeight>0)
                                        g.drawImage(composite, sbx, sby, null);

The complicated stuff in the drawImage calls deals with the fact that the player shadow is offset w.r.t. the mask (which is aligned to the column we are drawing)

#8

Excellent List of information that I continually browse for information. Once I read the title of the post those links were the first thing I thought of posting.

They all show a few different approaches and give a pretty good idea of what the Isometric view is. They should all at least give you a good stepping point as they did for me that will eventually lead you to understand what kingaschi and Alan_W are talking about.

I’ve been working on my isotiler program for a few months now and I constantly keep changing the tile size, recreating my iso tiles in the new size and trying it out, just to start all over. The hardest part for me was figuring out how to detect what column and row the mouse was clicking in. Thanks from the help of Demonpants and Dishmoth, I finally got that working.

SwampChicken, you may want to consider creating an Isometric Tutorial Link post in the Tutorial Section to help out the newbs like me.

Thanks for all the info!