基于顶点实现等距瓦片地图(Isometric tile)无法生成正确菱形布局问题求助

• 等距瓦片宽高比例不符合规范：标准等距瓦片的宽高比为2:1，你当前设置blockWidth和blockHeight均为64，相当于绘制旋转45度的正方形，拼接时无法形成连续的菱形网格。
• Y轴坐标计算逻辑错误：计算pos.y时误用了blockWidth作为参数，应该匹配等距瓦片的实际高度blockHeight计算。
• 顶点偏移参数不匹配：单个瓦片的顶点Y轴偏移量仍然使用blockWidth计算，和等距瓦片的高度参数不对应，导致单个瓦片形状本身就不符合等距绘制要求。

修改瓦片参数、坐标计算逻辑和顶点偏移量即可，修正后代码如下：

const uint16_t tileMapSize = 16;

quad = &this->tilesDiamond[(x + y * tileMapSize) * 4]; // tilesDiamond is the vertexarray

// 等距瓦片宽高比固定为2:1，宽度64对应高度32，可按你的素材实际比例调整
const uint16_t blockWidth = 64, blockHeight = 32;

pos.x = (x-y) * blockWidth/2;
// Y轴计算改用blockHeight参数
pos.y = (x + y) * blockHeight/2;

// 顶点Y偏移统一使用blockHeight计算
quad[0].position = sf::Vector2f(pos.x, pos.y);
quad[1].position = sf::Vector2f(pos.x+ blockWidth/2, pos.y+ blockHeight/2);
quad[2].position = sf::Vector2f(pos.x, pos.y + blockHeight);
quad[3].position = sf::Vector2f(pos.x - blockWidth/2, pos.y+ blockHeight/2);

补充说明 #

如果需要避免网格因x-y为负数显示到视口外，可在pos.x计算后添加偏移量pos.x += tileMapSize * blockWidth / 2，让网格左上角对齐视口左上角。

内容的提问来源于stack exchange，提问作者Oliver Dahlén