Calculation for widthInPixels and heightInPixels in MapData class does not consider orientation="hexagonal"

[ptantiku]

Version

• Phaser Version: 3.87.0
• Operating system:

Description

When using a tilemap with orientation="hexagonal", each pair of adjacent hexagonal tiles partially overlaps, reducing the overall width and height of the tilemap compared to a rectangular grid.

However, the current calculation for widthInPixels and heightInPixels simply multiplies the number of tiles by their width or height, without accounting for the hexagonal overlap. This results in incorrect dimensions for hexagonal tilemaps, causing layout and rendering inconsistencies.

Example Test Code

Example Code & Suggestion: https://phaser.io/sandbox/8BSZFoKz

Additional Information

The red rectangle uses widthInPixels and heightInPixels.
The green rectangle is what they should be.

I think the issue comes from

phaser/src/tilemaps/mapdata/MapData.js

Line 93 in 97e3e67

this.widthInPixels = GetFastValue(config, 'widthInPixels', this.width * this.tileWidth);

phaser/src/tilemaps/mapdata/MapData.js

Line 102 in 97e3e67

this.heightInPixels = GetFastValue(config, 'heightInPixels', this.height * this.tileHeight);

and my suggested calculation is in the example code above.

[zekeatchan]

Hi @ptantiku. Thanks for submitting this issue. We have fixed this and pushed it to the master branch. It will be part of the next release. Do test it out and let us know if you encounter any issues.