SFML中仅绘制单个Quad的Tilemap系统是否可行？

我想制作Tilemap，原本觉得用单个Quad对象遍历绘制比单独处理每个Tile更高效，但不确定这个方案是否合理。我的实现思路是：创建指定纹理尺寸的Tilemap，通过双层嵌套循环，用单个Quad设置顶点位置与纹理坐标，逐块绘制完成整个Tilemap的渲染，核心代码如下：

while(iY < sizeX)
{
    while(iX < sizeY)
    {
        // 设置顶点位置
        tileMap[0].position = sf::Vector2f(SizeX + offsetX, SizeY + offsetX);
        tileMap[1].position = sf::Vector2f((SizeX + size) + offsetX, SizeY + offsetX);
        tileMap[2].position = sf::Vector2f((SizeX + size) + offsetX, (SizeY + size) + offsetY);
        tileMap[3].position = sf::Vector2f(SizeX + offsetX, (SizeY + size) + offsetY);
        // 设置顶点纹理坐标
        tileMap[0].texCoords = sf::Vector2f(tex[t][0],tex[t][1]);
        tileMap[1].texCoords = sf::Vector2f(tex[t][2],tex[t][3]);
        tileMap[2].texCoords = sf::Vector2f(tex[t][4],tex[t][5]);
        tileMap[3].texCoords = sf::Vector2f(tex[t][6],tex[t][7]);
        iX += 1;
        SizeX += size;
        // 绘制当前Tile
        window.draw(tileMap, &tilemapSheet);
    }
    iX = 0;
    SizeX = 0;
    SizeY += size;
    iY += 1;
}

方案合理性结论 #

这个方案并不高效，反而会带来明显的性能损耗。原因在于：每次调用window.draw()都会触发一次GPU绘制调用（draw call），而GPU的性能瓶颈往往就在于draw call的数量。如果你的Tilemap有几百甚至上千个Tile，就会触发同等次数的draw call，这会大幅拖慢渲染速度。

正确的优化思路 #

更高效的做法是使用**顶点数组（sf::VertexArray）**存储所有Tile的顶点数据，只调用一次window.draw()完成整个Tilemap的渲染，这样所有Tile的绘制只需要一次draw call，性能会提升数倍甚至数十倍。

核心逻辑示例：

// 初始化顶点数组，存储所有Tile的Quad顶点
sf::VertexArray tileMap(sf::Quads);
tileMap.resize(mapWidth * mapHeight * 4); // mapWidth和mapHeight是Tilemap的行列数

// 批量填充所有Tile的顶点数据
for (int y = 0; y < mapHeight; y++) {
    for (int x = 0; x < mapWidth; x++) {
        int vertexIndex = (y * mapWidth + x) * 4;
        // 设置当前Tile的四个顶点位置
        tileMap[vertexIndex + 0].position = sf::Vector2f(x * size + offsetX, y * size + offsetY);
        tileMap[vertexIndex + 1].position = sf::Vector2f((x + 1) * size + offsetX, y * size + offsetY);
        tileMap[vertexIndex + 2].position = sf::Vector2f((x + 1) * size + offsetX, (y + 1) * size + offsetY);
        tileMap[vertexIndex + 3].position = sf::Vector2f(x * size + offsetX, (y + 1) * size + offsetY);
        
        // 设置当前Tile的纹理坐标（假设tex[t]是当前Tile对应的纹理坐标数组）
        auto& coords = tex[t];
        tileMap[vertexIndex + 0].texCoords = sf::Vector2f(coords[0], coords[1]);
        tileMap[vertexIndex + 1].texCoords = sf::Vector2f(coords[2], coords[3]);
        tileMap[vertexIndex + 2].texCoords = sf::Vector2f(coords[4], coords[5]);
        tileMap[vertexIndex + 3].texCoords = sf::Vector2f(coords[6], coords[7]);
    }
}

// 仅需一次绘制调用完成整个Tilemap渲染
window.draw(tileMap, &tilemapSheet);

原代码的小问题提示 #

• 变量命名逻辑混乱：外层循环条件iY < sizeX、内层iX < sizeY，看起来是把Tilemap的行列数搞反了，建议改成iY < mapHeight、iX < mapWidth更清晰。
• 顶点位置笔误：第一个顶点的SizeY + offsetX应该是SizeY + offsetY，否则会导致Tile的Y轴位置偏移错误。
• 变量t的取值逻辑未体现：需要确保t能正确对应每个Tile的纹理坐标，避免出现纹理错乱。

内容的提问来源于stack exchange，提问作者Athsmooth