Wireworld Simulator Using the Raylib: Part2¶

这部分主要实现 无限画布 的功能，包含视角移动、视图缩放、网格自动拓展。

修复网格外绘制造成的问题 ¶

某些情况下，窗口大小会大于网格大小，鼠标在网格外点击会导致 grid 下标溢出。

限制范围：

diff --git a/main.c b/main.c
index 828e1c8..f86f289 100644
--- a/main.c
+++ b/main.c
@@ -252,8 +252,12 @@ void HandleUserInput(void) {
         !CheckCollisionPointRec(mousePosition, playButtonRect) &&
         !CheckCollisionPointRec(mousePosition, nextButtonRect) &&
         !CheckCollisionPointRec(mousePosition, indicatorRect)) {
-        grid[mouseYGridPos][mouseXGridPos] = selectCellType;
-        DrawCell(mouseXGridPos, mouseYGridPos, GetCellColor(selectCellType));
+        if ((mouseXGridPos >= 0 && mouseXGridPos < cols) &&
+            (mouseYGridPos >= 0 && mouseYGridPos < rows)) {
+            grid[mouseYGridPos][mouseXGridPos] = selectCellType;
+            DrawCell(mouseXGridPos, mouseYGridPos,
+                     GetCellColor(selectCellType));
+        }
     }

     DrawCellLines(mouseXGridPos, mouseYGridPos, WHITE);

使用 calloc 初始化网格 ¶

使用 calloc 可以在分配内存的同时将内存初始化为 0，也正好就是 EMPTY，省去额外遍历初始化的过程。

void InitGrid(void) {
    grid.cells = RL_CALLOC(grid.rows, sizeof(Cell*));
    for (int y = 0; y < grid.rows; y++) {
        grid.cells[y] = RL_CALLOC(grid.cols, sizeof(Cell));
    }
}

视角移动 ¶

无限画布的前置功能，按住鼠标右键拖动画布。

试了几个方案，最后还是用了 2D 摄像头，通过移动摄像头位置模拟画布拖动，这种方法不会太过复杂。

Camera2D camera = {0};

camera.zoom = 1.0f;

if (IsMouseButtonDown(MOUSE_BUTTON_RIGHT)) {
    Vector2 delta = GetMouseDelta();
    delta = Vector2Scale(delta, -1.0f / camera.zoom);
    camera.target = Vector2Add(camera.target, delta);
}

这时网格的绘制逻辑需要放在 2D 模式中（BeginMode2D 和 EndMode2D 之间）。

由于 HandleUserInput 函数需要在鼠标左击时绘制「细胞」以及在鼠标悬停时绘制「预览边框」，所以也需要放在 2D 模式中：

BeginMode2D(camera);

float frameTime = GetFrameTime();
elapsedTime += frameTime;

if (isPlaying && elapsedTime >= refreshInterval) {
    UpdateGrid();
    elapsedTime = 0.0f;
}

for (int y = 0; y < rows; y++) {
    for (int x = 0; x < cols; x++) {
        Color cellColor = GetCellColor(grid[y][x]);
        DrawCell(x, y, cellColor);
    }
}

HandleUserInput();

EndMode2D();

按钮我希望保持屏幕固定位置，不会被脱拽移动，它们在结束 2D 模式后绘制：

EndMode2D();

DrawIndicators();
DrawPlayButton();
DrawNextButton();

顺带把 HandleUserInput 重构了，拆成几个函数：

void HandleUserInput(void) {
    HandleCellPlacements();
    HandleButtonClicks();
    HandleShortcuts();
    HandleCameraMovement();
}

网格拓展 ¶

策略 ¶

策略很简单，下面几张图展示了一个基本案例。

初始时相机和网格坐标一致，同为 (0, 0)。网格大小 20 x 12，其中有一细胞位于 [9, 5] 处（第 6 行，第 10 列）。

当按住鼠标右键向右下角滑动时，相机向左上角移动到 (-8, -4)，越过网格的横纵边界。

此时网格需向 X 和 Y 方向拓展一个固定的单位长度，这里设置为 8。于是网格坐标变成了 (-8, -8)，大小变成了 28 x 20。

细胞变成 [17, 13]，在网格中的位置变化了，但相对相机的位置没变，屏幕上不会有感知。

只在越过边界时拓展网格，同时选择一个合适的值作为每次拓展的单位长度，可以避免频繁地内存分配。

当相机越过右或下边界时，网格坐标不需要更改，只需要拓展大小。

代码 ¶

因为需要同时管理网格的坐标、长宽和细胞，所以创建 Grid 结构体用来表示网格信息：

typedef struct {
    Vector2 position;
    int rows;
    int cols;
    Cell** cells;
} Grid;

一些代码要进行相应更改，比如：

for (int y = 0; y < grid.rows; y++) {
    for (int x = 0; x < grid.cols; x++) {
        Color cellColor = GetCellColor(grid.cells[y][x]);
        DrawCell(x, y, cellColor);
    }
}

移动相机时，检查是否越过网格边界，并针对特定方向拓展网格。

void HandleCameraMovement(void) {
    if (IsMouseButtonDown(MOUSE_BUTTON_RIGHT)) {
        Vector2 delta = GetMouseDelta();
        delta = Vector2Scale(delta, -1.0f / camera.zoom);
        camera.target = Vector2Add(camera.target, delta);

        Vector2 cameraOffset = Vector2Subtract(camera.target, grid.position);
        bool isOutsideX = cameraOffset.x + screenWidth >
                          grid.position.x + grid.cols * cellSize;
        bool isOutsideY = cameraOffset.y + screenHeight >
                          grid.position.y + grid.rows * cellSize;
        if (cameraOffset.x < 0)
            ExpandGrid(LEFT);
        if (cameraOffset.y < 0)
            ExpandGrid(UP);
        if (isOutsideX)
            ExpandGrid(RIGHT);
        if (isOutsideY)
            ExpandGrid(DOWN);
    }
}

根据拓展方向计算新的行列数，创建新的 cells。计算偏移，将之前的细胞按照偏移放置在新 cells 中，以确保它们在屏幕上的位置不变。最后使用新的数据更新 grid 完成拓展：

const int gridIncrement = 10;

void ExpandGrid(Direction direction) {
    int newRows =
        grid.rows + (direction == UP || direction == DOWN ? gridIncrement : 0);
    int newCols = grid.cols +
                  (direction == LEFT || direction == RIGHT ? gridIncrement : 0);
    int xOffset = (direction == LEFT ? gridIncrement : 0);
    int yOffset = (direction == UP ? gridIncrement : 0);

    Cell** newCells = RL_CALLOC(newRows, sizeof(Cell*));
    for (int y = 0; y < newRows; y++) {
        newCells[y] = RL_CALLOC(newCols, sizeof(Cell));
    }

    for (int y = 0; y < grid.rows; y++) {
        for (int x = 0; x < grid.cols; x++) {
            newCells[y + yOffset][x + xOffset] = grid.cells[y][x];
        }
    }

    FreeGrid();

    grid.cells = newCells;
    grid.rows = newRows;
    grid.cols = newCols;

    grid.position.x -= cellSize * xOffset;
    grid.position.y -= cellSize * yOffset;
}

算得上是无限画布了。

仅绘制可见部分 ¶

网格过大时会出现明显的卡顿，因为视图外的细胞也照常绘制了。

可以通过计算当前相机视野内的网格单元格范围，只绘制这些单元格：

void DrawVisibleCells(void) {
    Vector2 topLeft = GetScreenToWorld2D(Vector2Zero(), camera);
    Vector2 bottomRight =
        GetScreenToWorld2D((Vector2){screenWidth, screenHeight}, camera);

    int startX = (int)floor((topLeft.x - grid.position.x) / cellSize);
    int startY = (int)floor((topLeft.y - grid.position.y) / cellSize);
    int endX = (int)ceil((bottomRight.x - grid.position.x) / cellSize);
    int endY = (int)ceil((bottomRight.y - grid.position.y) / cellSize);

    startX = Clamp(startX, 0, grid.cols);
    startY = Clamp(startY, 0, grid.rows);
    endX = Clamp(endX, 0, grid.cols);
    endY = Clamp(endY, 0, grid.rows);

    for (int y = startY; y < endY; y++) {
        for (int x = startX; x < endX; x++) {
            Color cellColor = GetCellColor(grid.cells[y][x]);
            DrawCell(x, y, cellColor);
        }
    }
}

视图缩放 ¶

最初实验了使用相机的 zoom 字段完成缩放，但发现效果不怎么好，缩得太小时网格线会变得不清晰甚至消失，并且给许多计算引入了新变量。

所以，最终还是使用了调整细胞大小 cellSize 的方案，以此模拟“视图的缩放”。

滚动鼠标滚轮时，调整细胞大小和网格位置，确保网格会以鼠标指针所在的位置为中心进行缩放，使得鼠标指针所指的网格单元在缩放前后保持不变：

void HandleZoom(void) {
    float wheel = GetMouseWheelMove();
    if (wheel != 0) {
        int newCellSize = cellSize + wheel * zoomSpeed;
        if (newCellSize >= minCellSize && newCellSize <= maxCellSize) {
            Vector2 mousePos = GetScreenToWorld2D(GetMousePosition(), camera);
            Vector2 gridPos =
                Vector2Divide(Vector2Subtract(mousePos, grid.position),
                              (Vector2){cellSize, cellSize});

            cellSize = newCellSize;

            grid.position = Vector2Subtract(
                mousePos,
                Vector2Multiply(gridPos, (Vector2){cellSize, cellSize}));
        }
    }
}

拓展网格在视图的移动和缩放结束后进行：

void HandleCameraMovement(void) {
    if (IsMouseButtonDown(MOUSE_BUTTON_RIGHT)) {
        Vector2 delta = GetMouseDelta();
        delta = Vector2Scale(delta, -1.0f / camera.zoom);
        camera.target = Vector2Add(camera.target, delta);
    }
}

void HandleUserInput(void) {
    HandleCellPlacements();
    HandleButtonClicks();
    HandleShortcuts();
    HandleCameraMovement();
    HandleZoom();

    Vector2 cameraOffset = Vector2Subtract(camera.target, grid.position);
    if (cameraOffset.x < 0) {
        ExpandGrid(LEFT);
    }
    if (cameraOffset.y < 0) {
        ExpandGrid(UP);
    }
    if (cameraOffset.x + screenWidth > grid.position.x + grid.cols * cellSize) {
        ExpandGrid(RIGHT);
    }
    if (cameraOffset.y + screenHeight >
        grid.position.y + grid.rows * cellSize) {
        ExpandGrid(DOWN);
    }
}

总结 ¶

最终代码见 github.com/13m0n4de/wireworld/blob/main/main.c。

下一步计划：

导入导出
设置页面