如何在Phaser中的任意大小的canvas上使用16/32平方像素的瓷砖

我的问题是关于相位和平铺,但我不太清楚如何问,所以请忍受我。

我是否需要将我的瓷砖地图的canvas或区域的大小设置为我的瓷砖集中单个瓷砖的大小的倍数(以像素为单位)? 还是有一种缩放地图的方式适合一个特定的屏幕区域?

我不太清楚如何更好地解释我的问题,所以我会举一个我正在谈论的例子。 因为我只使用免费的游戏艺术(比如在opengameart.org上find的),所以大多数的拼图集都有16×16或者32×32的像素。 我想要显示瓷砖的游戏区域分别是16还是32的倍数?

换句话说,如果我想要一个尺寸为900×900的canvas的32×32的瓦片,我必须绘制/devise我的瓦片的大小是〜28x〜28像素吗?

如果我想要使用大小为32×32的瓷砖的tileset,我必须使canvas成为32的倍数,比如像1024×1024。

感谢您的支持和任何帮助。

Phaser中通常的工作stream程是使用tilemaps:

  1. 您可以在Tiled之类的地图编辑器中制作拼贴地图,然后将其导出为Phaser可以支持的格式,例如JSON。
  2. 在Phaser中加载瓷砖贴图 。 您现在可以一次绘制整个地图的图层 – 您不必担心个别图块。
  3. 现在可以通过使用像Phaser.Tilemap.widthInPixels()这样的方法来计算出瓷砖贴图的大小。
  4. 您可以使用Phaser.TilemapLayer.scale()缩放地图中的各个图层。 缩放的工作就像精灵和组 – 你可以单独缩放X和Y,作为一个小数,1.0是正常的尺度。
  5. 要找出正确的比例因子,请将canvas大小除以地图大小。 例如,要在900像素canvas内适应800像素,请按比例缩放900.0/800.0

请注意,一般来说,像这样的缩放看起来很糟糕,因为您正在尝试适应非整数数字。 想象一下,试图将28个像素拉伸到32个像素 – 要么是28个原始像素中的4个,要么以某种方式涂抹整个像素。 这样的缩放对于瓷砖地图来说是非常不寻常的,所以我建议让你的地图适合你的canvas,而不是相反。