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 Promise.resolve(false);
} }
return fetchTileImage(tileX, tileY).then(function(img) { return fetchTileImage(tileX, tileY).then(function(img) {
// Mirror image across the NS axis (horizontal / X-flip): // Draw image with normal orientation (no X-flip). The image
// draw with negative width and positive height, anchored at // content within each tile is readable (place names, streets
// the tile's right edge (canvasX + 256). Image top (north) // not mirrored). The arrangement uses the X-swap formula
// stays at canvas top, image bottom (south) at canvas bottom. // (canvasX = -perp + ...) to place east tiles on the right of
// Image left (west) -> canvas right, image right (east) -> // the screen, so the X arrangement reads naturally left to
// canvas left. // right.
groundCtx.drawImage(img, canvasX + GROUND_TILE_SIZE, canvasY, groundCtx.drawImage(img, canvasX, canvasY,
-GROUND_TILE_SIZE, GROUND_TILE_SIZE); GROUND_TILE_SIZE, GROUND_TILE_SIZE);
groundLoadedTiles[tileX + '_' + tileY] = true; groundLoadedTiles[tileX + '_' + tileY] = true;
// Thin border so the user can see where one tile ends and the // Thin border so the user can see where one tile ends and the