0

前言

是的，这里有很多要介绍的内容......但我会尽我所能保持这个组织得井井有条、内容丰富且直截了当！

使用 C++ 中的HGE 库，我创建了一个简单的平铺引擎。
到目前为止，我已经实现了以下设计：

  • 一个CTile类，表示 a 中的单个图块CTileLayer，包含行/列信息以及一个HGE::hgeQuad（存储顶点、颜色和纹理信息，请参阅此处了解详细信息）。
  • 一个CTileLayer类，表示二维“平面”瓦片（存储为一维CTile对象数组），包含行/列数、X/Y 世界坐标信息、瓦片像素宽度/高度信息，以及图层的整体宽度/高度（以像素为单位）。

ACTileLayer负责渲染在虚拟相机“视口”边界内完全或部分可见的任何图块，并避免对超出此可见范围的任何图块执行此操作。在创建时，它会预先计算要存储在每个CTile对象中的所有信息，因此引擎的核心有更多的呼吸空间，并且可以严格专注于渲染循环。当然，它还处理每个包含的 tile 的正确释放。

问题

我现在面临的问题基本上归结为以下架构/优化问题：

  1. 在我的渲染循环中，即使我没有渲染任何超出可见范围的图块，我仍然会循环遍历所有图块，这似乎对较大的图块地图（即超过 100x100 行/ 64x64 平铺尺寸的列仍会将帧速率降低 50% 或更多）。
  2. 最终，我打算创建一个花哨的瓷砖地图编辑器来配合这个引擎。
    但是，由于我将所有二维信息存储在一个或多个一维数组中，所以我不知道在没有一些主要性能影响的情况下实现某种矩形选择和复制/粘贴功能的可能性有多大—— - 涉及每帧循环遍历每个图块两次。然而，如果我使用 2D 数组，FPS 下降会稍微少一些但更普遍！

漏洞

如前所述...在我的CTileLayer对象渲染代码中，我已经根据它们是否在可视范围内优化了要绘制的图块。这很好用，对于较大的地图，我注意到只有 3-8 FPS 下降（与没有此优化的 100+ FPS 下降相比）。

但我认为我计算的范围不正确，因为在地图滚动到一半后，您可以开始看到没有渲染图块的间隙（在最顶部和最左侧），好像剪裁范围的增加速度比相机可以移动（即使它们都以相同的速度移动）。

沿着 X 轴和 Y 轴，这个间隙的大小会逐渐增加，最终在大地图上占据屏幕顶部和左侧的近一半。

代码

//
// [Allocate]
// For pre-calculating tile information
// - Rows/Columns   = Map Dimensions (in tiles)
// - Width/Height   = Tile Dimensions (in pixels)
//
void CTileLayer::Allocate(UINT numColumns, UINT numRows, float tileWidth, float tileHeight)
{
    m_nColumns = numColumns;
    m_nRows = numRows;

    float x, y;
    UINT column = 0, row = 0;
    const ULONG nTiles = m_nColumns * m_nRows;
    hgeQuad quad;

    m_tileWidth = tileWidth;
    m_tileHeight = tileHeight;
    m_layerWidth = m_tileWidth * m_nColumns;
    m_layerHeight = m_tileHeight * m_nRows;

    if(m_tiles != NULL) Free();
    m_tiles = new CTile[nTiles];

    for(ULONG l = 0; l < nTiles; l++)
    {
        m_tiles[l] = CTile();
        m_tiles[l].column = column;
        m_tiles[l].row = row;
        x = (float(column) * m_tileWidth) + m_offsetX;
        y = (float(row) * m_tileHeight) + m_offsetY;

        quad.blend = BLEND_ALPHAADD | BLEND_COLORMUL | BLEND_ZWRITE;
        quad.tex = HTEXTURE(nullptr); //Replaced for the sake of brevity (in the engine's code, I used a globally allocated texture array and did some random tile generation here)

        for(UINT i = 0; i < 4; i++)
        {
            quad.v[i].z = 0.5f;
            quad.v[i].col = 0xFF7F7F7F;
        }
        quad.v[0].x = x;
        quad.v[0].y = y;
        quad.v[0].tx = 0;
        quad.v[0].ty = 0;
        quad.v[1].x = x + m_tileWidth;
        quad.v[1].y = y;
        quad.v[1].tx = 1.0;
        quad.v[1].ty = 0;
        quad.v[2].x = x + m_tileWidth;
        quad.v[2].y = y + m_tileHeight;
        quad.v[2].tx = 1.0;
        quad.v[2].ty = 1.0;
        quad.v[3].x = x;
        quad.v[3].y = y + m_tileHeight;
        quad.v[3].tx = 0;
        quad.v[3].ty = 1.0;
        memcpy(&m_tiles[l].quad, &quad, sizeof(hgeQuad));

        if(++column > m_nColumns - 1) {
            column = 0;
            row++;
        }
    }
}

//
// [Render]
// For drawing the entire tile layer
// - X/Y          = world position
// - Top/Left     = screen 'clipping' position
// - Width/Height = screen 'clipping' dimensions
//
bool CTileLayer::Render(HGE* hge, float cameraX, float cameraY, float cameraTop, float cameraLeft, float cameraWidth, float cameraHeight)
{
    // Calculate the current number of tiles
    const ULONG nTiles = m_nColumns * m_nRows;

    // Calculate min & max X/Y world pixel coordinates
    const float scalarX = cameraX / m_layerWidth;  // This is how far (from 0 to 1, in world coordinates) along the X-axis we are within the layer
    const float scalarY = cameraY / m_layerHeight; // This is how far (from 0 to 1, in world coordinates) along the Y-axis we are within the layer
    const float minX = cameraTop + (scalarX * float(m_nColumns) - m_tileWidth); // Leftmost pixel coordinate within the world
    const float minY = cameraLeft + (scalarY * float(m_nRows) - m_tileHeight);  // Topmost pixel coordinate within the world
    const float maxX = minX + cameraWidth + m_tileWidth;                        // Rightmost pixel coordinate within the world
    const float maxY = minY + cameraHeight + m_tileHeight;                      // Bottommost pixel coordinate within the world

    // Loop through all tiles in the map
    for(ULONG l = 0; l < nTiles; l++)
    {
        CTile tile = m_tiles[l];
        // Calculate this tile's X/Y world pixel coordinates
        float tileX = (float(tile.column) * m_tileWidth) - cameraX;
        float tileY = (float(tile.row) * m_tileHeight) - cameraY;

        // Check if this tile is within the boundaries of the current camera view
        if(tileX > minX && tileY > minY && tileX < maxX && tileY < maxY) {
            // It is, so draw it!
            hge->Gfx_RenderQuad(&tile.quad, -cameraX, -cameraY);
        }
    }

    return false;
}

//
// [Free]
// Gee, I wonder what this does? lol...
//
void CTileLayer::Free()
{
    delete [] m_tiles;
    m_tiles = NULL;
}


问题

  1. 在不严重影响任何其他渲染优化的情况下，可以做些什么来解决这些架构/优化问题？
  2. 为什么会出现这个错误？如何修复？

感谢您的时间！

4

2 回答 2

1

优化地图的迭代是相当直接的。

给定世界坐标（左、上、右、下）中的可见矩形，只需除以图块大小即可计算出图块位置相当简单。

一旦有了这些图块坐标（tl、tt、tr、tb），您就可以非常轻松地计算一维数组中的第一个可见图块。（从 2D 坐标计算任何图块索引的方法是 (y*width)+x - 请记住首先确保输入坐标有效。）然后您只需使用双循环来迭代可见图块：

int visiblewidth = tr - tl + 1;
int visibleheight = tb - tt + 1;

for( int rowidx = ( tt * layerwidth ) + tl; visibleheight--; rowidx += layerwidth )
{
    for( int tileidx = rowidx, cx = visiblewidth; cx--; tileidx++ )
    {
        // render m_Tiles[ tileidx ]...
    }
}

您可以使用类似的系统来选择一块瓷砖。只需存储选择坐标并以完全相同的方式计算实际图块。

至于你的bug，为什么你的相机有x，y，left，right，width，height？只需存储相机位置 (x,y) 并根据屏幕/视口的尺寸以及您定义的任何缩放因子计算可见矩形。

于 2013-04-18T10:26:46.470 回答
0

这是一个伪 codish 示例，几何变量在 2d 向量中。相机对象和瓦片地图都有一个中心位置和一个范围（一半大小）。即使您决定坚持使用纯数字，数学也是一样的。即使您不使用中心坐标和范围，也许您会对数学有所了解。所有这些代码都在渲染函数中，并且相当简化。此外，此示例假设您已经获得了一个类似于 2D 数组的对象来保存图块。

所以，首先是一个完整的例子，我将进一步解释每个部分。 

// x and y are counters, sx is a placeholder for x start value as x will 
// be in the inner loop and need to be reset each iteration.
// mx and my will be the values x and y will count towards too.
x=0,
y=0, 
sx=0, 
mx=total_number_of_tiles_on_x_axis, 
my=total_number_of_tiles_on_y_axis

// calculate the lowest and highest worldspace values of the cam
min = cam.center - cam.extent
max = cam.center + cam.extent

// subtract with tilemap corners and divide by tilesize to get 
// the anount of tiles that is outside of the cameras scoop
floor = Math.floor( min - ( tilemap.center - tilemap.extent ) / tilesize)
ceil = Math.ceil( max - ( tilemap.center + tilemap.extent ) / tilesize)

if(floor.x > 0)
    sx+=floor.x
if(floor.y > 0)
    y+=floor.y

if(ceil.x < 0)
    mx+=ceil.x
if(ceil.y < 0)
    my+=ceil.y

for(; y<my; y++)
    // x need to be reset each y iteration, start value are stored in sx
    for(x=sx; x<mx; x++)
       // render tile x in tilelayer y

一点一点的解释。渲染函数的第一件事，我们将使用一些变量。

// x and y are counters, sx is a placeholder for x start value as x will 
// be in the inner loop and need to be reset each iteration.
// mx and my will be the values x and y will count towards too.
x=0,
y=0, 
sx=0, 
mx=total_number_of_tiles_on_x_axis, 
my=total_number_of_tiles_on_y_axis

为了防止渲染所有图块，您需要提供类似相机的对象或有关可见区域开始和停止位置的信息（如果场景可移动，则在世界空间中）

在这个例子中，我为渲染函数提供了一个相机对象，它有一个中心和一个存储为二维向量的范围。

// calculate the lowest and highest worldspace values of the cam
min = cam.center - cam.extent
max = cam.center + cam.extent

// subtract with tilemap corners and divide by tilesize to get 
// the anount of tiles that is outside of the cameras scoop
floor = Math.floor( min - ( tilemap.center - tilemap.extent ) / tilesize)
ceil = Math.ceil( max - ( tilemap.center + tilemap.extent ) / tilesize)
// floor & ceil is 2D vectors

现在，如果在任何轴上 floor 高于 0 或 ceil 低于 0，这意味着在相机勺外有同样多的瓷砖。

// check if there is any tiles outside to the left or above of camera
if(floor.x > 0)
    sx+=floor.x// set start number of sx to amount of tiles outside of camera
if(floor.y > 0)
    y+=floor.y // set startnumber of y to amount of tiles outside of camera

 // test if there is any tiles outisde to the right or below the camera
 if(ceil.x < 0)
     mx+=ceil.x // then add the negative value to mx (max x)
 if(ceil.y < 0)
     my+=ceil.y // then add the negative value to my (max y)

平铺贴图的正常渲染将从 0 变为该轴的平铺数量，这使用循环中的循环来考虑两个轴。但是由于上面的代码，x 和 y 将始终粘在相机边界内的空间中。

// will loop through only the visible tiles
for(; y<my; y++)
    // x need to be reset each y iteration, start value are stored in sx
    for(x=sx; x<mx; x++)
       // render tile x in tilelayer y

希望这可以帮助！

于 2015-08-02T17:51:03.663 回答