Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I'm trying to create a staggered isometric map in Javascript.

    var x, y, row, column, top, left, 
        width = window.innerWidth, height = window.innerHeight,
        tile = {width: 64, height: 32};

    row = Math.ceil(width / tile.width); // how many rows will be in map
    column = Math.ceil(height / tile.height); // how many columns will be in map

    for (x=0 ; x<row ; x++){
        for (y=0 ; y<column ; y++){
            top = y * tile.height - (y % 2 == 0 ? 0 : tile.height / 2);
            left = x * tile.width - (y % 2 == 0 ? 0 : tile.width / 2);

            $('<div />').addClass('tile').css({
                width: tile.width,
                height: tile.height,
                top: top,
                left: left
            }).appendTo('body');
        }
    }

My formula doesn't work for vertical axis. It creates something like this. http://postimage.org/image/ekfnlbgoh/

How can I make it work? I need it to be something like this. http://legendofmazzeroth.wikidot.com/staggered-isometric-maps


Here is the latest code:

    row = Math.ceil(height / (tile.height / 2));
    column = Math.ceil(width / tile.width);

    for (y=0 ; y<=row ; y++){
        for (x=0 ; x<=column ; x++){
            top = y * (tile.height / 2) - (tile.height / 2);
            left = x * tile.width - (y % 2 == 0 ? 0 : tile.width / 2) - (tile.height / 2);

            $('<div />').addClass('tile').css({
                width: tile.width,
                height: tile.height,
                top: top,
                left: left
            }).appendTo('body');
        }
    }

By the way, thanks to you that column/row mistake has been fixed.

share|improve this question
    
i tinkered with this code in chrome...instead of outputting the <div>, i made it output a <P> tag like this: document.write(<P>top="+top+"left="+left); when i run it, i see output like this: top=[object DOMWindow]left=0 changing the variable name from top to t makes the output more meaningful: top=0left=0 top=16left=-32 top=64left=0 –  amb Apr 20 '12 at 10:05

1 Answer 1

First, You've got your rows and columns backwards:

row = Math.ceil(height / tile.height); //number of rows
column = Math.ceil(width / tile.width); //number of columns

Then, there's a couple different ways to cycle through the tiles, depending on how you want the spaces to be indexed (if this is merely for background purposes, then it's not that important, but possibly if you need to keep track of where on the board all the other game entities are).

The closest way to what you're doing would be to always have the left variable be offset by 1/2 the width, then alternate the top offset based on the modulus (and watch those x/y values that were turned around because of the row/columns being backwards):

for (y=0 ; y<row ; y++){
    for (x=0 ; x<column ; x++){
        left = x * tile.width - tile.width / 2;
        top = y * tile.height - (y % 2 == 0 ? 0 : tile.height / 2);

        $('<div />').addClass('tile').css({
            width: tile.width,
            height: tile.height,
            top: top,
            left: left
        }).appendTo('body');
    }
}

Hope that helps.

share|improve this answer
    
Thanks for the answer Drew. Welcome to GDSE! –  Byte56 Apr 25 '12 at 21:02

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.