Posted by: Xalthorn | September 26, 2007

Mondestia Isometric tests

After spending a great deal of time messing around with ideas of how to make an Isometric display work in a web interface I think I’ve found a solution that I’m happy with in concept.  I still need to tidy it up a lot and stop wasting so much screen real estate, but it works.  The tests can be seen on the mondestia site (  They may take a while to load and draw as they are being fully created on the server with no local javascript.  Once the final decision has been made, I’ll work on optimising everything, but at the moment, being able to quickly write and test code is more important.

The first test, a quick display test, drops isometric tiles in a layered display to fit a general rectangle rather than the standard diamond.  It works nicely enough but the ragged edge is just not attractive.

The second test does a couple of other things.  Firstly, it drops some monsters on the map to further test the display, as objects naturally overlap tiles and the edge of the map.  Secondly, it tries to smoothen the overall display by placing a filler border around the ragged edge.  Although it achieves what it sets out to, it still isn’t attractive.  It does nothing to hide the fact that we’re drawing with tiles (even though the tiles are way too vivid and have no smooth seaming) and also, should a building or object cover two or more tiles, we won’t be able to see any squares that are right on the edge, between the jags.

The third test takes a much more traditional viewport approach to the isometric graphic system.  It places a decorative (hopefully useful) frame around the display, neatly cutting the jagged edges away.  Because the monsters are quite large, and as such will always stand higher than any tile on the top row, there has to be a large portion of frame ‘above’ the display.  It doesn’t make sense to leave it as a simple part of the frame, or even a title as there would be far too much of it.

Because of that, I decided to use the upper part of the frame as part of the interface display.  Quite what it will show I’ve not decided, and the simple mock up is an extreme waste of screen space.  However, it will be used somehow as the overall image is quite appealing and I can use the side parts of the frame for other things as well.

It also means that the display fits perfectly into a rectangle and once I’ve decided how big the display is to be, stylesheets can be designed around it.



  1. Hey, I’ve been working on a similar rendering technique for rendering isometric maps as you have, although my ideal game type is different, (I’m trying to make a Sim-City clone) I was wondering how you plan on storing your maps, when I was looking into storing maps I noticed that a 200×200 map with information detailing which tile to use ended up being around 5Mb on disk. To store the map which is basically a multi-dimensional array, I used the serialize function within PHP. How are you storing your maps?

    I was looking into using a random seed to save a maps terrain on the server, but this simply exchanged a hefty amount of disk space for a hefty amount of CPU usage. If you would like to see what I’ve done so far email me at horrain(AT)gmail(DOT)com and ill send you a link.

  2. Hiya,

    Dungeon Escape will be a very simple map storage system, as each map is really quite small.

    When I start worrying about the Mondestia RPG, it will need a more complete mapping solution. I have some ideas and need to thrash them out with technical demo code, but there isn’t as big a rush with that one.

    I’m confused why a 200×200 map is taking up 5Mb.

    200 x 200 is 40,000 individual cells. what are you storing in each cell? If my calculations are correct, you’re using about 131 bytes of information for each cell.

    I haven’t used the serialize function, I tend to pack and unpack my data manually. I might have a better look at serialize.

    I’d love to see what you’ve done. I’ll drop you an email now.

  3. Yeah 131 bytes does seam a tad excessive. I may have to have a look into what I’m storing, ill probably find out that I’m storing far to much repetitive data, hopefully i can get this down further, or optimise my method of regenerating the whole map from a single numeric value.

    Serialize is awesome, you just pass it anything, array object whatever and it will output it into a nice format, and unserialize will convert it back into its native format. The good thing about these two functions is that they are executed in C, meaning they are a lot quicker than PHP code. Though they can be a little tricky to optimise.

  4. I’ve replied to your email, but I’ll repeat something here, in case someone else is having the same issues.

    If you find you’re storing a lot of repeated text, like imagemap sections, you could replace the whole of the following:

    area shape=”poly” coords=”

    with a token like


    or shorter (@A for example). Obviously don’t use tokens that could be typed in by someone when you’re storing user input, but if it’s map data that you create, you store, and you will extract, you should be safe.

    Then all you would do is place the token into the database rather than the repeated text, and when you extract the data, run a quick string replace to turn the tokens back to something useful.

  5. Having had a fresh look at the tests, I’ve done a bit of fiddling.

    Because the isometric tiles were just plain ugly, I was finding it hard to compare the two views fairly, the top down version was just smoother with proper tile transitions.

    So I’ve taken the top down tiles, done some tweaking in photoshop and used those for the isometric tests.

    This means that apart from the fact that the top down version uses some RPG Maker graphics and the isometric version uses my rendered troll graphic, the comparison should be fairer.

    Of course, what I need to do now is to crack open the renderer and do a top down view of the troll and use that in the top down tests.

    With the prettier fringe tiles being used for the isometric view it shows a glaring oversight with the framed test.

    The frame was sized to hide the jagged edge of the larger image version. Of course, when the display uses smaller tiles, the jagged edge is much thinner.

    I should spend some time making alternative frames but I fear I might be spending too much time fine tuning what is essentially a quick graphical test (or letting myself get distracted with ‘easy’ work, avoiding the bigger picture).

    With the new tiles, I’m definitely preferring the isometric view, just for a feeling of solidity that the top down doesn’t really give.

    I’ll wait for a few reactions or comments before I commit to this, because once I’ve committed to it, I don’t want to return to the decision.

  6. Hey guys, don’t use serialize, this is really a waste of space a it generates massive overhead.

    I suggest you look into yaml which is a language specifically designed for Data.

    Or probably use XML instead of serialize…

    Serialization will generate a copy of each tile and it’s data, even all you use is just 3 tiles. Think about it…

  7. […] one particular case I read about memory requirements of large tile maps on Xalthorn’s Blog. A commenter (horRAiN) mentioned that his map used up about 5 MiB if he saved it to a text file […]

  8. If I was to use a generic function to pack or unpack data that I usually write my own routines for, I’d do some testing first.

    I really need to go and read about serialize to see what it actually does, but at the moment I’m throwing bloaty code tests around for proof of concept.

  9. Packing would even more minify the data to save. I was just giving an example as serialize was how I first started to save data into external files for reloading 🙂

    Basically serialize describes the data structure as well as the data itself.

    That way if you decide to make any changes to your file (as you would with xml or yaml data) you can easily break the data if you change the data type or length.

    And since serialize just flattens what it finds in the datastructure you pass to it it tends to bloat up your file. If you have an image in an array, it’ll save the image rather than a reference to it.

  10. Ooh yuck,

    I can see how it can be used as a general purpose save and load, but I’d much rather design and understand my data structures from the start and write custom routines that know and trust the format of the data that they will be receiving.

    It also means that if I want certain things to be calculated from other pieces of data, I can elect to not bother saving those calculated values.

    I’ll still do some reading on the function, in case I can find a use for it, but I prefer to write my own library of routines for doing such things, if only for portability.

    For example, I use a specific random number generator that I wrote for my maze creation routines so that no matter what platform or language I write the program in, the maze will be identical from the same seed.

  11. I can relate, I too prefer to write up my own libraries… Gives you more chance to learn and optimize.

    Hey, I’d like to know more about that random number generator for your maze creation. I was tinkering myself and thought I would go with perlin noise or something like that to create a map. The difficulty with random fields is to create a map that has no closed areas…

  12. I’ll have to dig the code out, but basically it just populated an array of values according to a predefined formulae and then drew numbers out of there for the predictable randomness.

    Hmm, that didn’t explain it very well, I definitely need to dig my code out.

    Creating a map with no closed areas is down to the map generation algorithm, not the random number generator. I just created the number generator to allow me to get the same results each time.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: