等轴测图瓷砖地图 - 有更大尺寸的瓷砖？

Question

你好，我有以下两个等距地砖：

普通瓷砖（水）：

石瓦：

我需要添加一些瓦片像我的游戏板上有一块岩石砖，但问题是，像这块岩石这样的砖需要更高的高度。

目前，岩石瓷砖有更大的高度18px。 我试图把岩石分成3块，但它看起来很丑，因为你可以在岩石上看到地砖的线条。

目前，该板是这样的：

board http://gyazo.com/49f6549404a934919b33c30b94b9c88c.png

正如你所看到的，因为高度差的瓷砖也会有不同的位置。

我的图形代码层是由图层设计的，其中有一个名为Board的图层，而Board图层包含一个名为Nature的图层，该图层负责岩石，花朵等。

我的板图中：

@Override 
public void render(Graphics g) { 
    g.translate(this.translate.getX(), this.translate.getY()); 

    for (int i = 0; i < tiles[0].length; i++) { 
     for (int j = 0; j < tiles[1].length; j++) { 
      int x = (j * sprite.getWidth()/2) - (i * sprite.getWidth()/2); 
      int y = (j * sprite.getHeight()/2) + (i * sprite.getHeight()/2); 
      this.tiles[i][j].render(g, x, y); 
     } 
    } 

    // rendering rocks and so on.. 
    this.nature.render(g); 
} 

这就是我如何呈现自然层：

@Override 
public void render(Graphics g) { 
    for (int i = 0; i < this.tiles[0].length; i++){ 
     for (int j = 0; j < this.tiles[1].length; j++){ 
      if (this.tiles[i][j] == null) 
       continue; 
      int width = this.tiles[i][j].getWidth(); 
      int height = this.tiles[i][j].getHeight(); 
      int x = (j * width/2) - (i * width/2); 
      int y = (j * height/2) + (i * height/2); 

      g.drawImage(this.tiles[i][j], x, y); 
     }   
    } 
} 

我已经试过了18减去高度，但仍然没有运气，它仍然混乱。 有没有任何正确方法确实绘制比实际大小更大的图块？

Answer 1

抽象你的瓷砖。您目前似乎认为一个图块简单地表示为一个图像，并且所有内容都具有统一的大小。

正如你所看到的，并不总是撑起来。如果你制作了一个明确的Tile类，你可以把它的所有细节封装在那里，并将处理这些奇怪东西的责任移到那里。

一个简单的瓷砖类看起来是这样的：

public class Tile { 
    int offsetX; 
    int offsetY; 
    Image image; 

    // Renders the tile at logical coordinates x, y   
    public void draw(Graphics g, int x, int y) { 
     g.drawImage(image, x + offsetX, y + offsetY, null); 
    } 
} 

总之，瓷砖管理其古怪本身。

你可以走得更远，并将游戏相关数据附加到贴图（例如，玩家可通过，损坏等）。您可以使用统一的界面来处理拼贴（Tile类API），但每个拼贴可根据需要更改渲染（使用offsetX/Y来调整其图像大小）。

编辑：更改渲染中x/y的计算公式，使其与基本地砖的大小（112,56我猜测）一起工作，独立于实际tile精灵的大小。您不希望精灵大小混乱在网格中的位置（网格大小由基本地砖大小决定）。瓦片只补偿它的精灵和基本尺寸（带有偏移量）之间的差异。