Question

I am making an isometric game and I only managed to create a zigzag isometric map. My original idea was diamond shape but I cant manage to do so.

Diamond:
coobird.net/img/tile-diamond-good-order.png

Zigzag:
coobird.net/img/tile-zigzag-compact.png

Here is a bit of my code to show you what is happening:

World:

  public void chunkGenerate() {
    moduleX = ((ListManager.getTileWidth()*8));
    moduleY = ((ListManager.getTileHeight()*8));
    for (int x = 0; x <= width; x++) {
        for (int y = 0; y <= height; y++) {
            if ((x%moduleX) == 0) {
                if ((y%moduleY) == 0) {
                    chunkList.add(new Chunk(x,y));
                }
            }
        }
    }
          }

Chunk:

 public void Generate() {
    for (int x = 0; x < 8; x++) {
        for (int y = 0;y< 8; y++) {
            tileList.add(new Tile(location.getX()+(x*ListManager.getTileWidth()),location.getY()+(y*ListManager.getTileHeight()),0));
        }
    } 
}

Rendering:

        for (Chunk c : w.getChunkList()) {
            g2d = (Graphics2D) g.create();
            for (int i = 0; i<c.getTileList().size(); i+=2) {
                g2d.drawImage(test2, (c.getTileList().get(i).getLocation().getX()+c.getTileList().get(i).getOffset().getxOffset()), (c.getTileList().get(i).getLocation().getY()+c.getTileList().get(i).getOffset().getyOffset()+w.getvOffset()), this);
                g2d.drawImage(test2, (c.getTileList().get(i).getLocation().getX()), (c.getTileList().get(i).getLocation().getY()+w.getvOffset()), this);
            }
            for (int i = 1;i<c.getTileList().size(); i+=2) {
                g2d.drawImage(test2, (c.getTileList().get(i).getLocation().getX()), (c.getTileList().get(i).getLocation().getY()+w.getvOffset()), this);
                g2d.drawImage(test2, (c.getTileList().get(i).getLocation().getX()+c.getTileList().get(i).getOffset().getxOffset()), (c.getTileList().get(i).getLocation().getY()+c.getTileList().get(i).getOffset().getyOffset()+w.getvOffset()), this);

            }
        }

I need help with making the map into a diamond, instead of zigzag. If you need further information on the code, comment below. Also one bug with this code is that there is like a 1 pixel wide space every couple of tiles. I don’t know why.. I tried adjusting the offsets, didn’t help..
Current offsets: (Tile constructor)

 offset = new IsometricOffset(21,11);

Closest I got to having no space was 20,10 but there was still a tiny space

here is a pic:

http://img845.imageshack.us/img845/6242/picbz.png

Thanks for the help!
edit:
Apparently two of the tiles on the screen are actually only 1 tile in the engine. I am working on fixing it.

EDIT:

Changed and got this:
img526.imageshack.us/img526/3121/test333.png

drawing:

        for (Chunk c : w.getChunkList()) {
            /*for (int i = 0; i<c.getTileList().size(); i++) {
                g2d.drawImage(test2, (c.getTileList().get(i).getLocation().getX()), (c.getTileList().get(i).getLocation().getY()+w.getvOffset()), this);
            }*/
            for (int i = 0;i<c.getTileList().size(); i++) {
                g2d.drawImage(test2, (c.getTileList().get(i).getLocation().getX()+c.getTileList().get(i).getOffset().getxOffset()), (c.getTileList().get(i).getLocation().getY()+c.getTileList().get(i).getOffset().getyOffset()+w.getvOffset()), this);

            }
        }

(I tried drawing without the offsets it drew the same thing as the picture)
Generating:

    for (int x = 0; x < 8; x++) {
        for (int y = 0;y< 8; y++) {
            tileList.add(new Tile(location.getX()+(x*ListManager.getTileWidth()/2),location.getY()+(y*ListManager.getTileHeight()/2),0));
        }
        location.setX(location.getX()+ListManager.getTileWidth()/2);
        location.setY(location.getY()+ListManager.getTileHeight()/2);
    } 

After experimenting:

Generate:

        public void Generate() {
    for (int x = 0; x < 8; ++x) {
        for (int y = 0;y< 8; ++y) {
            tileList.add(new Tile(location.getX()+(y*ListManager.getTileWidth()/2),location.getY()-(y*ListManager.getTileHeight()/2),0));
        }
        location.setX(location.getX()+ListManager.getTileHeight()/2);
        location.setY(location.getY()+ListManager.getTileWidth()/2);
    } 
}

result: This is the closest i got:
http://img814.imageshack.us/img814/3450/bombombom.png

Answer 1

Try to imagine your map rotated by 45 degree.

              (0, 3)
       (0, 2)        (1, 2)
(0, 1)        (1, 1)        (2, 2)
       (1, 0)        (2, 1)
              (2, 0)

And the rendering cycle must be like that:

x = 0, y = 100,
for (dx = 0; dx < 3; ++dx) {
    for (dy = 0; dy < 3; ++dy) {
        drawTile(x + dy * width / 2, y - dy * height / 2);
    }
    x += width / 2;
    y += height / 2;
}

UPD: Proof of working.

Code (actionscript, but there is no difference for algorithm):

var x:Number = 100, y:Number = 100, 
    dx:Number, dy:Number, px:Number, py:Number,
    halfWidth:Number = 40, halfHeight:Number = 20,
    s:Sprite = new Sprite(),
    g:Graphics = s.graphics;

g.lineStyle(1, 0xffffff);
for (dx = 0; dx < 3; ++dx) {
    for (dy = 0; dy < 3; ++dy) {
        px = x + dy * halfWidth;
        py = y - dy * halfHeight;

        g.moveTo(px - halfWidth , py);
        g.lineTo(px, py - halfHeight);
        g.lineTo(px + halfWidth, py);
        g.lineTo(px, py + halfHeight);
        g.lineTo(px - halfWidth, py);
    }
    x += halfWidth;
    y += halfHeight;
}

addChild(s);

Result: