在2D游戲中繪制等距圖塊的正確方法是什么？我已經閱讀了一些參考資料（例如this），這些參考資料建議以這種方式渲染圖塊，這些圖塊將使地圖的2D數組表示形式中的每一列都呈鋸齒形。我想應該以菱形的方式繪制它們，在屏幕上繪制的內容與2D陣列的外觀更緊密相關，只是稍微旋轉一下即可。兩種方法都有優點還是缺點？
3 回答
Qyouu
TA貢獻1786條經驗 獲得超11個贊
更新：糾正了地圖渲染算法，添加了更多插圖，更改了格式。
也許可以說將瓦片映射到屏幕的“之字形”技術的優勢在于，瓦片x和y坐標位于垂直軸和水平軸上。
“畫鉆石”的方法：
通過使用“在鉆石中繪制”繪制等距圖，我相信這是指for通過在二維數組上使用嵌套循環來繪制地圖，例如以下示例：
tile_map[][] = [[...],...]
for (cellY = 0; cellY < tile_map.size; cellY++):
for (cellX = 0; cellX < tile_map[cellY].size cellX++):
draw(
tile_map[cellX][cellY],
screenX = (cellX * tile_width / 2) + (cellY * tile_width / 2)
screenY = (cellY * tile_height / 2) - (cellX * tile_height / 2)
)
優點：
該方法的優點是它是一個簡單的嵌套for循環，具有相當簡單的邏輯，可在所有圖塊中一致地工作。
壞處：
這種方法的一個缺點是，地圖上圖塊的x和y坐標將以對角線增加，這可能使得將屏幕上的位置直觀地映射到以數組表示的地圖上更加困難：
瓷磚地圖的圖像
但是，實現上述示例代碼將有一個陷阱–渲染順序將導致應該位于某些圖塊后面的圖塊被繪制在前面的圖塊之上：
錯誤渲染順序導致的圖像
為了解決此問題，for必須反轉內部循環的順序-從最高值開始，再向較低值進行渲染：
tile_map[][] = [[...],...]
for (i = 0; i < tile_map.size; i++):
for (j = tile_map[i].size; j >= 0; j--): // Changed loop condition here.
draw(
tile_map[i][j],
x = (j * tile_width / 2) + (i * tile_width / 2)
y = (i * tile_height / 2) - (j * tile_height / 2)
)
通過上述修復，應該更正地圖的呈現方式：
正確渲染順序生成的圖像
“之字形”方法：
優點：
“之字形”方法的優點也許在于，呈現的地圖可能看起來比“鉆石”方法在垂直方向上更加緊湊：
鋸齒形渲染方法看起來很緊湊
壞處：
從嘗試實現之字形技術開始，缺點可能是編寫渲染代碼有點困難，因為它不能像for在數組中每個元素上的嵌套循環那樣簡單地編寫：
tile_map[][] = [[...],...]
for (i = 0; i < tile_map.size; i++):
if i is odd:
offset_x = tile_width / 2
else:
offset_x = 0
for (j = 0; j < tile_map[i].size; j++):
draw(
tile_map[i][j],
x = (j * tile_width) + offset_x,
y = i * tile_height / 2
)
另外，由于渲染順序的交錯性質，嘗試計算圖塊的坐標可能會有些困難：
之字形順序渲染的坐標
注意：此答案中包含的插圖是使用所呈現的圖塊渲染代碼的Java實現創建的，其中以下int數組為地圖：
tileMap = new int[][] {
{0, 1, 2, 3},
{3, 2, 1, 0},
{0, 0, 1, 1},
{2, 2, 3, 3}
};
磁貼圖像為：
tileImage[0] -> 一個盒子里面有一個盒子。
tileImage[1] -> 黑匣子。
tileImage[2] -> 一個白盒子。
tileImage[3] -> 一個帶有高灰色物體的盒子。
關于瓷磚寬度和高度的注意事項
上面的代碼示例中使用的變量tile_width和tile_height是指表示地磚的圖像中地磚的寬度和高度：
該圖顯示了瓷磚的寬度和高度
只要圖像尺寸和圖塊尺寸匹配，就可以使用圖像的尺寸。否則，可以使用圖塊之間的間隙來渲染圖塊地圖。
添加回答
舉報
0/150
提交
取消