仅在Canvas可见区域绘制Tilemap的优化方案咨询

Hey, great start—focusing only on drawing visible tiles is exactly the right direction for tile map performance! But iterating through your entire map array and checking visibility for every single tile is wasting a lot of cycles, especially with large maps. Let's break down how to optimize this properly:

• Calculate the visible tile range first (skip full map iteration)
  Instead of looping through every tile in your map and checking if it's visible, figure out exactly which tiles fall within the canvas viewport first. This cuts your loop count drastically.

  Here's how to compute the start/end rows and columns of visible tiles:

  // Assume these values are defined:
  // camera.x, camera.y: offset of your viewport from the top-left of the map
  // tileSize: width/height of each tile (assuming square tiles)
  // canvas.width, canvas.height: dimensions of your rendering canvas
  // map.rows, map.cols: total rows/columns in your map
  
  const startCol = Math.floor(camera.x / tileSize);
  const endCol = Math.ceil((camera.x + canvas.width) / tileSize);
  const startRow = Math.floor(camera.y / tileSize);
  const endRow = Math.ceil((camera.y + canvas.height) / tileSize);
  
  // Now only loop through tiles in this visible range
  for (let row = startRow; row < endRow; row++) {
    for (let col = startCol; col < endCol; col++) {
      // Guard against out-of-bounds tiles (e.g., if camera is at map edge)
      if (row >= 0 && row < map.rows && col >= 0 && col < map.cols) {
        const tile = map.tiles[row][col];
        // Calculate where to draw the tile relative to the canvas
        const drawX = col * tileSize - camera.x;
        const drawY = row * tileSize - camera.y;
        ctx.drawImage(tile.image, drawX, drawY);
      }
    }
  }
  

  For example, if your map is 1000x1000 tiles but only 20x15 are visible, this reduces your loop iterations from 1,000,000 to 300—huge savings!

• Cache tile images to avoid redundant lookups
  If you're fetching tile images directly from the map array every frame, or reloading them, you're adding unnecessary overhead. Preload and cache all tile graphics in an object once at initialization:

  // Initialize a cache for tile images
  const tileImageCache = {};
  
  function preloadTiles() {
    tileImageCache['grass'] = new Image();
    tileImageCache['grass'].src = 'assets/grass.png';
    
    tileImageCache['stone'] = new Image();
    tileImageCache['stone'].src = 'assets/stone.png';
    // Add all your tile types here
  }
  
  // When drawing, use the cached image directly
  ctx.drawImage(tileImageCache[tile.type], drawX, drawY);
  

• Use a tile sprite sheet instead of individual images
  Loading and drawing dozens/hundreds of individual tile images is inefficient. Combine all your tiles into a single sprite sheet image—this reduces HTTP requests (if loading from files) and speeds up drawImage calls since the browser doesn't have to switch between different image sources.

  Example of drawing from a sprite sheet:

  // Load your sprite sheet once
  const tileSheet = new Image();
  tileSheet.src = 'assets/tilesheet.png';
  
  // Assume each tile has a spriteX/spriteY property defining its position in the sheet
  ctx.drawImage(
    tileSheet,
    tile.spriteX * tileSize, tile.spriteY * tileSize, tileSize, tileSize, // Crop area from sheet
    drawX, drawY, tileSize, tileSize // Draw position on canvas
  );
  

• Pre-render static map areas to an offscreen canvas (for static terrain)
  If most of your map doesn't change (e.g., static ground tiles), draw the entire static layer once to an offscreen canvas. Then, each frame, you only need to draw the visible portion of this offscreen canvas instead of redrawing every tile. This cuts drawImage calls from dozens to one per frame.

  Example implementation:

  // Create an offscreen canvas for static tiles
  const offscreenCanvas = document.createElement('canvas');
  const offscreenCtx = offscreenCanvas.getContext('2d');
  offscreenCanvas.width = map.cols * tileSize;
  offscreenCanvas.height = map.rows * tileSize;
  
  // Pre-draw the entire static map once
  function renderStaticMap() {
    for (let row = 0; row < map.rows; row++) {
      for (let col = 0; col < map.cols; col++) {
        const tile = map.tiles[row][col];
        offscreenCtx.drawImage(tileImageCache[tile.type], col * tileSize, row * tileSize);
      }
    }
  }
  
  // Each frame, draw only the visible part of the static map
  ctx.drawImage(
    offscreenCanvas,
    camera.x, camera.y, canvas.width, canvas.height, // Crop visible area from offscreen
    0, 0, canvas.width, canvas.height // Draw to main canvas
  );
  // Then draw dynamic elements (players, enemies) on top
  

• Minimize redundant calculations
  Move any fixed calculations outside your loops. For example, camera.x / tileSize only needs to be computed once per frame, not every time you check a tile. Also, avoid recalculating values that don't change during the loop.

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