How to use 16/32 square pixel tiles in tilemap on arbitrarily sized canvas in Phaser

Question

My question is about Phaser and Tiled but I'm not quite sure how to ask it so please bear with me.

Do I need to make the size of the canvas or area on which I want to display my tilemap a multiple of the size in pixels of an individual tile in my tileset? Or is there a way of scaling a tilemap to fit a particular screen area?

I'm not really sure how to explain my question better so I will give an example of what I'm talking about. Because I'm using only freely available game art (such as that found on opengameart.org), most tilesets come with tiles sized 16x16 or 32x32 pixels. Does the game area I want to display the tiles in have to be a multiple of 16 or 32, respectively?

Or put another way, if I wanted to have a grid of 32x32 tiles fit inside of a canvas of say, 900x900 dimension, must I have to draw/design my tiles to be of size ~28x~28 pixels?

And if I want to use a tileset with tiles of size 32x32 must I make the canvas a multiple of 32, like 1024x1024 for example?

Thanks for bearing with me and for any help.

Answer 1

The usual workflow with tilemaps in Phaser is this:

1. You make a tile map, probably in a map editor like Tiled, and export to a format that Phaser can support, like JSON.
2. Load the tile map in Phaser. You can now draw entire layers of the map in one go - you don't have to worry about individual tiles.
3. You can now figure out how big the tile map is by using methods like Phaser.Tilemap.widthInPixels().
4. You can scale individual layers in the tilemap using Phaser.TilemapLayer.scale(). The scaling works just like sprites and groups - you can scale x and y individually, as a decimal, with 1.0 being normal scale.
5. To figure out the right scaling factor, divide the canvas size by the tilemap size. For example, to fit 800 pixels inside a 900 pixel canvas, scale by 900.0/800.0.

Note that in general, scaling like this will look bad because you're trying to fit non-round numbers. Imagine trying to stretch 28 pixels to fit 32 - either you double 4 out of the 28 original pixels, or you smudge out the whole thing in some manner. Scaling like this is highly unusual for tile maps, so I would advise making your maps fit your canvas, rather than the other way around.