Skip to content

Project isometric collision shapes with the map's tile ratio - #1766

Merged
obiot merged 2 commits into
melonjs:masterfrom
vtxe02023274:fix/isometric-shape-ratio
Oct 25, 2026
Merged

obiot merged 2 commits into
melonjs:masterfrom
vtxe02023274:fix/isometric-shape-ratio

Conversation

@vtxe02023274

Copy link
Copy Markdown
Contributor

Description

On isometric maps the collision shapes of rectangle, polygon and polyline objects are projected with toIso(), which is the projection of 2:1 tiles: (x - y, (x + y) / 2). Tiled projects object points with the map's tile size (IsometricRenderer::pixelToScreenCoords), ((x - y) * tilewidth / (2 * tileheight), (x + y) / 2), the same way TMXIsometricRenderer.adjustPosition already places the objects. On a map whose tiles are not 2:1 the shapes are stretched or squeezed horizontally and stop lining up with the walls they outline.

TMXObject now keeps tilewidth / (2 * tileheight) from the map and scales x by it after toIso(). For 2:1 tiles it is 1 and nothing changes. Tile objects are untouched, they aren't projected.

I checked it against Tiled: a 4x4 map with 186x108 tiles and a triangle at (108, 108) with points 0,0 216,0 216,108, rendered with Tiled's tmxrasterizer. Its vertices are drawn at (372, 108), (558, 216) and (465, 270), which is what the shape gives after this change. Before it the last two were at (588, 216) and (480, 270).

Added tests to tmxobject.spec.js for rectangles, polygons and polylines on 64x32, 128x32, 186x108 and 32x32 tiles, comparing the vertices with Tiled's formula. The non-2:1 ones fail before this change. Changelog entry added under Fixed.

Type of change

  • Bug fix
  • New feature
  • Documentation update
  • Performance improvement
  • Refactoring (no functional changes)

Checklist

  • I have read the Contributing Guide
  • My code follows the existing code style (pnpm lint passes)
  • I have tested my changes locally (pnpm test passes)
  • I have added tests that cover my changes (if applicable)
  • The build succeeds (pnpm build)

pnpm test: 8508 passed, 2 failed: text-gradient.spec.js (multi-line ramp) fails on master too on my machine, and drawmesh_bench.spec.js timed out after 61 s. eslint and biome pass on the changed files.

Related issues

None, found while comparing isometric maps against Tiled.

@obiot

obiot commented Oct 25, 2026

Copy link
Copy Markdown
Member

another great finding, thanks ! lots of Tiled improvements coming up this 20.11 version, I have a few things also I'm trying to close and also a brand new isometric demo !

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SeWCkETjW35ZbXDRswV1hx
@obiot
obiot merged commit 6ecf5bd into melonjs:master Oct 25, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants