Big tilemaps performance

[marc_max]

I'm coding a vanilla JS canvas engine from scratch. I plan to start a little metroidvania-like platformer as soon as possible.
Since it might get some big maps, got a little doubt regarding performance...

Which is the best way to render a map bigger than game screen?

• Prerendering the tilemap into a huge image (i.e. an horizontal level could be as big as 8000x240), then draw it according to the scroll position. I figure this have a cost during the map building (and also RAM), but then it should be faster while drawing it every frame.
• Parsing the tilemap array and drawing only the visible tiles according to the scroll position. I figure this is slower because of calculations made every frame, but I might be wrong.

I have tried to do some benchmark with both methods, but it doesn't seem to have any noticeable difference in both my desktop PC and laptop. It might have some impact on smartphones though, which is what really worries me.

 

[b10b]

15 minutes ago, marc_max said:

Parsing the tilemap array and drawing only the visible tiles according to the scroll position.

Generally this.  Or at least that's the starting point.

There are finer points to consider: how large a buffer / margin to operate, how frequently to reconfigure the tiles, whether the larger tilemap should be chunked, whether tiles can be cached / cloned, ..., ..., ...., no end to it?

Tiling is about juggling multiple subsystems at once, each having their own level of precision vs performance.  Rendering on screen needs highest precision and will likely represent the largest impact on performance - so don't worry about abstract calculations that will reduce that burden.  And remember, only some things need doing every frame!