zekoff Posted February 23, 2015 Share Posted February 23, 2015 Using a tileset image with these properties:432x396 image size32x32 tile size12x11 distinct tiles2px margin on all sides4px spacing between tilesTileset image is attached, annotated with red for margin pixels and green for spacing pixels. When creating a tilemap based on this tileset, Phaser.Tileset warns that "image tile area is not an even multiple of tile size" in the function updateTileData. (Link to relevant lines of code in Phaser.) Then, when the tilemap is loaded, it displays the wrong tiles. The offending calculation seems to be lines 217 and 218. The formula as written only accounts for the left/top margin pixels, but adding the right/bottom margin is important for checking whether the image is sized correctly or not. Furthermore, when counting rows and columns, the use of Math.floor at 227/228 does prevent loading of partial tiles if the image is in fact sized correctly, but in this case (where the margin is smaller than the spacing) it will actually cut off the last row and column of tiles. With the current formula, the rowCount formula is:var rowCount = (imageHeight - this.tileMargin) / (this.tileHeight + this.tileSpacing);Thus:var rowCount = (432 - 2) / (32 + 4) = 11.94...5This causes the "even multiple" warning. The Math.floor call at 227 then forces this value down to 11 rows, when in fact there are 12. This in turn causes Phaser to assign tile IDs incorrectly, which leads to the wrong tiles being displayed. Changing the formula at 217/218 to the following will handle this case, while preserving the current version's ability to discard extraneous pixels:var rowCount = (imageHeight - this.tileMargin * 2 + this.tileSpacing) / (this.tileHeight + this.tileSpacing);Thus:var rowCount = (432 - 4 + 4) / (32 + 4) = 12...which is the correct value, as confirmed by Tiled. Since colCount works the same way, all of the above applies there. See also this issue report, which resulted in the current version of the code. The change in the associated pull request fixed the issue, but didn't account for these margin/spacing issues. Additional "test cases:"4 rows, 16px tiles, 0 margin, 0 spacingImage height would be 64px(64 - 0 + 0) / (16 + 0) = 4 rows4 rows, 16px tiles, 2 margin, 1 spacingImage height would be 71px(71 - 4 + 1) / (16 + 1) = 4 rowsThis seems like just a bug, but I wanted to find out if someone is actually relying on the current behavior for some reason, and if you see any problem with the proposed fix. stauzs and jdnichollsc 2 Link to comment Share on other sites More sharing options...
jdnichollsc Posted March 12, 2015 Share Posted March 12, 2015 Hi people! My tilemap load correctly but shows the following warnings in the console: Regards, Nicholls Pooya72 1 Link to comment Share on other sites More sharing options...
fariazz Posted May 19, 2015 Share Posted May 19, 2015 hey Nicholls! Did you sort out what the problem was? I'm getting that warning too but everything looks good. Link to comment Share on other sites More sharing options...
Skeptron Posted May 19, 2015 Share Posted May 19, 2015 Same here! 404 for the map file but the game works fine. Link to comment Share on other sites More sharing options...
drhayes Posted May 19, 2015 Share Posted May 19, 2015 That 404 for a ".map" file is because Chrome is looking for source maps. It's a tool for debugging minified or transpiled JS; it has no effect on the running game and your users won't ever see an effect. jdnichollsc 1 Link to comment Share on other sites More sharing options...
Skeptron Posted May 19, 2015 Share Posted May 19, 2015 Good to know. Thanks! Link to comment Share on other sites More sharing options...
fariazz Posted May 20, 2015 Share Posted May 20, 2015 My comment was not in regards of the map file, but in regards of the message "Phaser.Tileset - image tile area is not an event multiple of the size". I'm actually using tiles that are 35x35. Everything runs fine. jdnichollsc 1 Link to comment Share on other sites More sharing options...
Recommended Posts