TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊
更新：糾正了地圖渲染算法，添加了更多插圖，更改了格式。
也許可以說將瓦片映射到屏幕的“之字形”技術(shù)的優(yōu)勢在于，瓦片x和y坐標(biāo)位于垂直軸和水平軸上。
“畫鉆石”的方法：
通過使用“在鉆石中繪制”繪制等距圖，我相信這是指for通過在二維數(shù)組上使用嵌套循環(huán)來繪制地圖，例如以下示例：
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)
)
優(yōu)點(diǎn)：
該方法的優(yōu)點(diǎn)是它是一個(gè)簡單的嵌套for循環(huán)，具有相當(dāng)簡單的邏輯，可在所有圖塊中一致地工作。
壞處：
這種方法的一個(gè)缺點(diǎn)是，地圖上圖塊的x和y坐標(biāo)將以對角線增加，這可能使得將屏幕上的位置直觀地映射到以數(shù)組表示的地圖上更加困難：
瓷磚地圖的圖像
但是，實(shí)現(xiàn)上述示例代碼將有一個(gè)陷阱–渲染順序?qū)?dǎo)致應(yīng)該位于某些圖塊后面的圖塊被繪制在前面的圖塊之上：
錯(cuò)誤渲染順序?qū)е碌膱D像
為了解決此問題，for必須反轉(zhuǎn)內(nèi)部循環(huán)的順序-從最高值開始，再向較低值進(jìn)行渲染：
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)
)
通過上述修復(fù)，應(yīng)該更正地圖的呈現(xiàn)方式：
正確渲染順序生成的圖像
“之字形”方法：
優(yōu)點(diǎn)：
“之字形”方法的優(yōu)點(diǎn)也許在于，呈現(xiàn)的地圖可能看起來比“鉆石”方法在垂直方向上更加緊湊：
鋸齒形渲染方法看起來很緊湊
壞處：
從嘗試實(shí)現(xiàn)之字形技術(shù)開始，缺點(diǎn)可能是編寫渲染代碼有點(diǎn)困難，因?yàn)樗荒芟駀or在數(shù)組中每個(gè)元素上的嵌套循環(huán)那樣簡單地編寫：
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
)
另外，由于渲染順序的交錯(cuò)性質(zhì)，嘗試計(jì)算圖塊的坐標(biāo)可能會(huì)有些困難：
之字形順序渲染的坐標(biāo)
注意：此答案中包含的插圖是使用所呈現(xiàn)的圖塊渲染代碼的Java實(shí)現(xiàn)創(chuàng)建的，其中以下int數(shù)組為地圖：
tileMap = new int[][] {
{0, 1, 2, 3},
{3, 2, 1, 0},
{0, 0, 1, 1},
{2, 2, 3, 3}
};
磁貼圖像為：
tileImage[0] -> 一個(gè)盒子里面有一個(gè)盒子。
tileImage[1] -> 黑匣子。
tileImage[2] -> 一個(gè)白盒子。
tileImage[3] -> 一個(gè)帶有高灰色物體的盒子。
關(guān)于瓷磚寬度和高度的注意事項(xiàng)
上面的代碼示例中使用的變量tile_width和tile_height是指表示地磚的圖像中地磚的寬度和高度：
該圖顯示了瓷磚的寬度和高度
只要圖像尺寸和圖塊尺寸匹配，就可以使用圖像的尺寸。否則，可以使用圖塊之間的間隙來渲染圖塊地圖。
舉報(bào)