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:
1 parent
97e37e065a
commit
00e59983bf
1 file changed
+7
-8
Vendored
+7
-8
@@ -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
|
||||
|
||||
Reference in new issue
Block a user