How to "piece together" an image in code, to render later?

Question

I want to make a game in Dart and have decided to use the available port of the JS Phaser game engine. This will be my first time really making a game involving graphics so I guess I'll have a lot to learn as I go along...

The main thing I'm trying to reason about doing in code at the moment is as follows: a key part of the game will be that the grid-based map that will be rendered onscreen will be previously generated to be composed of various "tiles" by an algorithm. You could think of it as analogous to a patchwork quilt I suppose in that regard. So naturally with a map like this I need to have some way of piecing together multiple copies of all my base tile images to form the appropriate map configuration to render. So essentially my question is how would I approach doing this in code so that I can indeed programmatically put together the image of my map and not render it tile-by-tile or something like that.

Answer 1

In most cases, doing what you propose will be less efficient than rendering the maps as individual tiles. The tiled approach gets more efficient the more tiles are repeated, and provided that the tiles aren't too small.

With Phaser, the Tiled format is well supported, so you can follow this workflow:

1. Create a tile map using Tiled
2. Export to JSON
3. Load the map files in Phaser
4. Render the map layers

There is a handy example here.