Jump to content

* * * * * 2 votes

Isometric Map in SFML

isometric rpg 2D SFML
4: Adsense

In my ever-so-humble opinion, "traditional" 2D isometric games (ie, games implemented using only 2D techniques to fake an isometric viewpoint) are as dead as last week's meatloaf. Traditional techniques present a number of problems that are solved by hacks and kludges, but which are solved much more elegantly via a 3D approach. Nevertheless, when someone is just starting out with game programming, 3D can be intimidating. Also, maybe you're looking to go retro, and while 3D can benefit even a retro style, still it might be more feasible to implement a traditional 2D system. I personally rarely use traditional 2D in my own projects anymore, but I found this on my hard-drive and updated it. The system is based on the original 2D system upon which I built my older game, Golem, albeit modified to work with SFML.

Presented here is an example of how you might go about implementing a traditional 2D isometric map using SFML. I chuckle as I write this, since SFML is just a 2D front-end sitting on top of OpenGL which is, of course, a 3D API. Nevertheless, SFML is implemented to be a 2D library, and so it might be nice to have an isometric map system that works with SFML without having to delve into OpenGL.

At the end of this article, we will have a working 2D isometric map of arbitrary size, with a basic tile-based lighting scheme, suitable for some sort of graphical roguelike or other 2D RPG-type game. I will provide all of the code, and a working demo. I will discuss the structure of the map, the organization of the lighting scheme, how it all fits together with SFML. I will also touch on a few of the issues and caveats that crop up when using an old-school 2D system, and why using 3D makes things so much easier.

To see what we are shooting for, here are a couple screenshots of the final product:
Attached Image

Attached Image

Now, I explain in the remainder of this post how the system works. If you don't care, already know enough about isometric maps, etc... and just want to get to the code, here is the archive:

Attached File  isometric.zip (2.67MB)
downloads: 3270

Included is all the source, including source to bind SFML to Lua, the isometric map code presented here, and a small sample Lua application demonstrating the system. Tinker to your heart's content. Be warned, though, that this has been sitting on my harddrive mostly untouched for a couple years now, and there might be bugs a-lurking. Since it's not code I commonly use, it hasn't been very thoroughly tested.

Attached Thumbnails

  • Attached Image
  • Attached Image
  • Attached Image
  • Attached Image

Jun 23 2011 06:07 PM
Hardcore. Cheers. Interesting read. I totally agree that it would be preferrable these days to just do this in 3D, but I've found most iso-tutorials to be horribly overcomplex so this is a great addition to teh interwebz anyway.
Jun 27 2011 01:26 PM
Originally published 6/23 - date bumped for featuring purposes
Jun 27 2011 02:10 PM
Nice work!
Jun 28 2011 08:21 AM
SFML is good stuff! but yeah, traditional 2D Iso has gone the way of the dodo for all but niche, edutainment and very casual type applications.
Jun 28 2011 10:44 AM
This is really great. I dont use SFML, I use Java and Slick2d/LWJGL.. but since thats all build on openGL,..I should be able to apply some of this stuff directly. I really want to try out a simple lighting system like youve done. WE NEED MORE ARTICLES LIKE THIS!
Jul 24 2011 02:05 PM
Im not sure what you(and comments) mean by going 3D preferably..Its not a question of programming choice, but art style choice you know..
Unless you mean something like Disgaea, with 2D sprites on top of a 3D environment, but if you want 2D environment, 2D tile'ing' on top of 3D..Is it even possible?(probaly even more complicated)
A good exemple of 2D iso game is the mmorpg Dofus, the art is just awsome, and its not an old school game.

That comes of the top of my head, cause Im a fan of iso games, and I plan to make my iso cubic engine someday.

Good article, thanks for sharing.
Mar 27 2015 12:55 AM

Hello, nice tutorial, thank you!
But please, could you, or someone else, explain with more details the equation to convert world space to screen space?
I'm failing to understand it. if world x equals world y then screen x will always be zero? Why is that? Also the last point in world space, as in your example (4096,4096) would be (0, 8192)? i don't get it... 

Mar 27 2015 02:46 PM

Consider this isometric tile:


The green lines indicate the X and Y axes of the screen coordinate system. The origin of the screen system is at 0, where the green axes cross. The X coordinate increases to the right, the Y increases up. Overlaid on this grid is an isometric tile. In the isometric system, the X axis increases up and right, the Y axis increases up and left. The tile represents a square cell 16x16 units in size, as you can see by the alternating color patterns. The black and blue areas represent grid lines, the red areas are "in between" areas. The blue lines run on the X=0, X=3, X=7, etc.. and Y=0, Y=3, Y=7 etc... coordinates.

The system I uses overlays the isometric grid onto the screen grid with corresponding origins. That is, the origin of the isometric world, (0,0), corresponds with the origin of the screen plane, ie (0,0). On this overlay, you can see that on the tile, as the X coordinate increases (up and rightward) the corresponding screen coordinate increases +2 in the screen X direction and +1 on the screen Y direction. As the Y coordinate increases, the screen X decreases by -2 in the screen X direction, and +1 in the screen Y direction. So by this token, if isometric X==16, corresponding to the right-hand corner of the diamond tile, the screen coordinates will be equal to X=32, Y=16. Now, if you increase isometric Y from that point, you will begin decreasing screen X and continue increasing screen Y, so that at Y==16 the screen X coordinate will be reduced back to 0, the screen Y coordinate will now be at 32. And this spot corresponds to the location (16,16) on the isometric tile, or the top point of the diamond. You can see that indeed any isometric coordinate where X==Y will, in fact, lie along the screen X=0 axis.

Note: GameDev.net moderates comments.