加载性能更好的贴图

Question

所以，我正在尝试使用javascript和canvas 2d api创建一个游戏(没有任何外部库/框架)。现在我打算保持简单。然而，在创建它时，我意识到我不理解一些概念，特别是如何加载我的平铺基于地图(使用平铺编辑器创建)有效

我知道对于我的小项目来说这已经足够了，但如果我想在游戏循环中加载一些更大的贴图，这可能会大大降低性能。当使用工作线程时，我发现了一个很好的解决方案，但我不知道这是否会解决问题。我在考虑一些只加载屏幕上可见像素的东西，但是，我不知道这是否可行，如果这是一个理想的解决方案

任何解决这个问题的方法都会帮助我更好地理解它，我会很感激的。

Answer 1

你应该只加载你的资产一次，在你需要它们之前(所以在加载通常是一个好地方)。
那么使用drawImage()的裁剪选项绘制位图通常已经足够好了。如果你的tile图太大了，像这样画出来是一个问题，你可以考虑把它分成多个较小的文件，然后它的网络成为一个问题，你的目标只是最近的浏览器，你可以使用createImageBitmap方法，它允许直接做裁剪，并将只存储裁剪的tile作为位图，使它在drawImage中使用更快的资产:

(async () => {
const blob = await fetch("https://upload.wikimedia.org/wikipedia/commons/6/68/BOE_tile_set.png")
.then(resp => resp.ok && resp.blob());
const tiles = [];
const tileWidth = 28;
const tileHeight = 36;
for (let i=0; i<77; i++) {
const x = i % 8;
const y = Math.floor(i / 8);
// create one ImageBitmap per tile
const bmp = await createImageBitmap(blob, x * tileWidth, y * tileHeight, tileWidth, tileHeight);
tiles.push({
bmp,
x: 0,
y: 0,
dirX: Math.random() * 2 - 1,
dirY: Math.random() * 2 - 1
});
}

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
draw();

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
tiles.forEach((tile) => {
tile.x = tile.x + tile.dirX;
tile.y = tile.y + tile.dirY;
if (tile.x < -tile.bmp.width) {
tile.x = canvas.width;
}
if (tile.x > canvas.width) {
tile.x = -tile.bmp.width;
}
if (tile.y < -tile.bmp.height) {
tile.y = canvas.height;
}
if (tile.y > canvas.height + tile.height) {
tile.y = -tile.bmp.height;
}
ctx.drawImage(tile.bmp, tile.x, tile.y);
});
requestAnimationFrame(draw);
}
})().catch(console.error);

<canvas></canvas>