Javascript 2D game tile textures

Question

I am using a texture atlas for my tiles. Of course I need to get the sub-images to draw them on the canvas as separate tiles. Right now I can think of two ways to implement this.

1. Divide the texture atlas into separate Image instances. Then draw them onto the canvas accordingly.

2. Use a single image, and just draw part of it by adding extra parameters to CanvasRenderingContext2D's method `drawImage.

I'm not sure which is better. My thoughts were that the first option would be more manageable and flexible, since each tile is separated. What would be better? What are the ups and downs of each?

Answer 1

The ups of the "storing texture in atlas" would be, that you can assign textures dinamically. E.g. you hve your dungeon brick tile on the 0;0 coordinates on your image. If ypu put the 0 id on the array where the tile goes, then instead of harcoding it in, you can just do

texX = (i * texSize) % imageWidth

texY = Math.floor(i * texSize / image.width) * texSize

i is the id of the tile, texX and texY are the x and y positions, texSize is 1 textures width.

So for example, you have your texture at (5; 3), and it has 8 textures across, then you set it's id to 29.