等距地图绘图,生成

时间:2012-05-08 11:52:09

标签: java graphics geometry

我正在制作一个等距游戏,我只设法制作一个曲折的等距地图。我最初的想法是钻石形状,但我无法做到这一点。

钻石: 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));
                }
            }
        }
    }
          }

组块:

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

            }
        }

我需要帮助才能将地图变成钻石,而不是曲折。如果您需要有关代码的更多信息,请在下面进行评论。此代码的一个错误是每两个瓷砖就像一个1像素宽的空间。我不知道为什么..我试过调整补偿,没有帮助.. 当前偏移量:(平铺构造函数)

 offset = new IsometricOffset(21,11);

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

这是一张照片:

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

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

编辑:

改变并得到了这个: 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

1 个答案:

答案 0 :(得分:1)

尝试将地图旋转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:工作证明。

代码(动作脚本,但算法没有区别):

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

结果:

good looking tiles