在java中使用单独的矩形渲染等距地图答案

【问题标题】：Rendering an isometric map in java with individual rectangles在java中使用单独的矩形渲染等距地图
【发布时间】：2013-06-01 02:45:08
【问题描述】：

过去一个小时左右我一直在研究，但我似乎无法渲染等轴测图。我想实现类似this 的目标。但我收到this...。我将我的地图作为图块存储在一维数组中，如下所示：

private final int width, height;
    private final int tileWidth, length;
    private int[] tiles;

    public Level(int width, int height) {
        this.width = width;
        this.height = height;
        tiles = new int[width * height];
        tileWidth = 68;
        length = 48;
    }

我通过 10, 10 作为宽度和高度的参数。我像这样渲染地图：

public void render(Graphics g) {
        for (int x = 0; x < width; x++) {
            for (int y = 0; y < height; y++) {
                g.setColor(Color.red);
                if (x % 2 == 0)
                    g.drawRect(x * tileWidth, y * length / 2, tileWidth, length);
                else
                    g.fillRect((x * tileWidth) + (tileWidth / 2), (y * length / 2), width, length);
            }
        }
    }

任何帮助将不胜感激，我想学习制作等距游戏，但一直坚持使用平面 2D。

【问题讨论】：

标签： java arrays map isometric

【解决方案1】：

对于瓷砖，您可以使用shear transform:

Graphics2D g2d = (Graphics2D) g;
AffineTransform at = AffineTransform.getShearInstance(1, 0);
g2d.transform(at);
// rest of your drawing code here

您可能还想设置剪切锚点：

double sa_x = 100, sa_y = 100; // or whatever
AffineTransform at = new AffineTransform();

// S3: Move back to original origin
at.translate(sa_x, sa_y);

// S2: Shear
at.shear(1, 0);

// S1: Set origin
at.translate(-sa_x, -sa_y);

您可以改变剪切因子1 以获得不同的剪切量。

【讨论】：

【解决方案2】：

您需要绘制等角线，而不是绘制矩形。

等距几何中的角度有 30 度、90 度、150 度、210 度和 270 度（以弧度表示：pi/6、pi/2、5pi/6、7pi/6、3pi/2、11pi/6 .).

cos(pi/6) 是 sqrt(3)/2 或 0.866... 而 sin(pi/6) 是 1/2 或 0.5。（这很有意义，因为http://en.wikipedia.org/wiki/File:Sin-cos-defn-I.png）

这意味着如果你想从 x1,y1 开始以 pi/6 的角度画一条 D 像素长的线：

x2 = x1+cos(pi/6)*D e.g. x1+D*sqrt(3)/2
y2 = y1+sin(pi/6)*D e.g. y1+D/2

从 x1,y1 绘制到 x2,y2。

所有其他角度要么是这个的反射（一个维度或两个都被设为负数），要么是直上直下（画起来很简单）。

要计算屏幕上的位置以绘制等距对象，请考虑等距几何具有三个维度：X、Y、Z。移动 Z 只会使您将 D 画得更高或 D 更低。 X 或 Y 的移动将使您在一个等角方向或另一个等角方向上移动，x 和 y 与在该方向上绘制一条瓷砖线的距离相同（与上述公式类似）。

【讨论】：