javascript - 仅在可见区域在 Canvas 上绘制

Question

我正在开发简单的迷你游戏，我开始注意到一些性能下降。游戏的制作方式是，你有一个 5000 x 5000 大小的大房间( Canvas )，并且玩家配备了视口(viewport)相机，他可以通过鼠标拖动来移动。现在的问题是，如果我为整个房间绘制 2000 个对象，则会导致性能显着下降。我在想是否有一种方法可以只绘制在当前相机区域中可见的对象，而不是在玩家显然看不到的整个房间中。

我尝试按扇区(区域)划分房间，但这效果不太好。也许有人对此主题有一些想法。

这是最大数量对象的渲染代码:

for(var i = 0; i < game.objects.stars.pool.length; i++) {
    var current = game.objects.stars.pool[i];
    game.components.star.apply(i);
    game.mechanics.draw.circle(current.x, current.y, current.r);
}

可以采取什么措施来按照我描述的方式提高性能？

Answer 1

我也遇到过这样的问题，我是这样解决的:

var in_viewport = function(x, y, margin) {
    if(
        x >= cam.x - margin &&
        x <= cam.x + cam.w + margin &&
        y >= cam.y - margin &&
        y <= cam.y + cam.h + margin
    ) {
       return true;
    }

    return false;
};

它可以像这样实现到您的逻辑中:

for(var i = 0; i < game.objects.stars.pool.length; i++) {
    var current = game.objects.stars.pool[i];
    if( in_viewport(current.x, current.y, 100) === true ) {
        game.components.star.apply(i);
        game.mechanics.draw.circle(current.x, current.y, current.r);
    }
}

现在简单解释一下:

margin 参数建议设置为100 ，因为这将有助于解决“事情突然出现”的问题。它只会渲染 100 范围内的对象。在相机的范围之外，因此即使您快速移动相机，东西也应该已经在那里，而且性能应该处于非常好的位置。

cam.x , cam.y , cam.w , cam.h in_viewport里面应更改函数以匹配您的相机对象命名，如果您已经在相机对象内拥有右侧和底部边界，则只需替换 x + w和y + h具有正确的参数。