Remove X-flip on image: tiles now read normally

The user wanted the image content to be readable (not X-flipped).
The X-swap arrangement (canvasX = -perp + ...) already places east
tiles on the right side of the screen, so the X arrangement
reads naturally left to right without needing the image to be
flipped.

The image is now drawn with positive width and height, so
place names, street names, and the coordinates labels (x=NNN,
y=NNN) are all readable. The X-swap arrangement positions the
tiles so that:
- west tiles (low x) drawn at canvas left
- east tiles (high x) drawn at canvas right

So the X coordinates increase left to right when reading the
corridor from screen left to screen right.
This commit is contained in:
Richard Zink committed 2026-10-08 09:30:36 +02:00
1 parent e33598476a
commit 97e37e065a
1 file changed
+8 -8
+8 -8
View File
@@ -345,14 +345,14 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) {
return Promise.resolve(false);
}
return fetchTileImage(tileX, tileY).then(function(img) {
// Mirror image across the NS axis (horizontal / X-flip):
// draw with negative width and positive height, anchored at
// the tile's right edge (canvasX + 256). Image top (north)
// stays at canvas top, image bottom (south) at canvas bottom.
// Image left (west) -> canvas right, image right (east) ->
// canvas left.
groundCtx.drawImage(img, canvasX + GROUND_TILE_SIZE, canvasY,
-GROUND_TILE_SIZE, GROUND_TILE_SIZE);
// 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);
groundLoadedTiles[tileX + '_' + tileY] = true;
// Thin border so the user can see where one tile ends and the