Re-add X-flip on image: NS-mirror tile content

The user wanted the tile content to be NS-mirrored (X-flip
on the image) so the corridor orientation matches. The labels
are drawn separately in normal orientation, so they read
normally. Now the arrangement has:
- canvasX = -perp + ... (X-swap): east tiles on screen right
- Image X-flipped (NS-mirror): image east at left of tile
- Labels in corners drawn normally: x=1102, y=707 readable

Combining these, the user looking at the screen sees:
- screen left: west tiles (low x), with image west on the right
- screen right: east tiles (high x), with image east on the left
- All labels readable

So the X coordinates read correctly when the eye scans left
to right across the corridor, and the image content is
NS-mirrored to match the corridor's direction of travel.
This commit is contained in:
Richard Zink committed 2026-10-08 09:32:33 +02:00
1 parent 97e37e065a
commit 00e59983bf
1 file changed
+7 -8
+7 -8
View File
@@ -345,14 +345,13 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) {
return Promise.resolve(false);
}
return fetchTileImage(tileX, tileY).then(function(img) {
// Draw image with normal orientation (no X-flip). The image
// content within each tile is readable (place names, streets
// not mirrored). The arrangement uses the X-swap formula
// (canvasX = -perp + ...) to place east tiles on the right of
// the screen, so the X arrangement reads naturally left to
// right.
groundCtx.drawImage(img, canvasX, canvasY,
GROUND_TILE_SIZE, GROUND_TILE_SIZE);
// NS-mirror: X-flip the image so the tile content matches
// the corridor orientation (east tiles have their image east
// on the left of the drawn area, west tiles on the right).
// Labels are drawn separately in normal orientation, so the
// X-coordinates labels read normally.
groundCtx.drawImage(img, canvasX + GROUND_TILE_SIZE, canvasY,
-GROUND_TILE_SIZE, GROUND_TILE_SIZE);
groundLoadedTiles[tileX + '_' + tileY] = true;
// Thin border so the user can see where one tile ends and the