java - 等距 map 绘制、生成

Question

我正在制作一个等距游戏，但我只成功创建了一个锯齿形等距 map 。我最初的想法是钻石形状，但我无法做到。

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

之字形: coobird.net/img/tile-zigzag-compact.png

这是我的一些代码，向您展示正在发生的事情:

世界:

  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));
                }
            }
        }
    }
          }

block :

 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));
        }
    } 
}

渲染:

        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);

            }
        }

我需要帮助将 map 变成菱形，而不是锯齿形。如果您需要有关代码的更多信息，请在下面发表评论。此代码的另一个错误是每两个图 block 都有一个 1 像素宽的空间。我不知道为什么..我尝试调整偏移量，但没有帮助.. 当前偏移量:(Tile 构造函数)

 offset = new IsometricOffset(21,11);

我最接近没有空间的是 20,10，但仍然有一个很小的空间

这是一张图片:

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

感谢您的帮助! 编辑: 显然，屏幕上的两个图 block 实际上只是引擎中的 1 个图 block 。我正在努力修复它。

编辑:

改变并得到这个: img526.imageshack.us/img526/3121/test333.png

绘图:

        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);

            }
        }

(我尝试在没有偏移的情况下进行绘制，它绘制的内容与图片相同) 生成:

    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);
    } 

实验后:

生成:

        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);
    } 
}

结果:这是我得到的最接近的结果: http://img814.imageshack.us/img814/3450/bombombom.png

Answer 1

尝试想象您的 map 旋转了 45 度。

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

渲染周期必须是这样的:

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:工作证明。

代码( ActionScript ，但算法没有区别):

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);

结果: