等軸測圖瓷磚地圖 - 有更大尺寸的瓷磚？

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精靈的大小。您不希望精靈大小混亂在網格中的位置（網格大小由基本地磚大小決定）。瓦片只補償它的精靈和基本尺寸（帶有偏移量）之間的差異。