Perspective Coords for 2D Hex Grid

Question

Here's a stumper...

Porting some old code, I have this 2D hex grid being rendered in 2.5D:

The y-scale & position of the tiles is calculated for perspective, but I'd like to scale & position them for perspective horizontally as well (the toons at the top of the board look squished). Here's the current code:

const SCALE_X = PixiStages.game._width * 0.0012;
const SCALE_Y = PixiStages.game._height * 0.0018;

this.scale.x = SCALE_X;
this.scale.y = SCALE_Y * ( 0.5 + 0.5 * gamePiece.y / Game.TILE_ROWS );

const getStageXFromBoardX = ( board_x ) => {
    const tileWidth = SCALE_X * 38;
    return board_x*tileWidth;
}

const getStageYFromBoardY = ( board_y ) => {
    const tileHeight = SCALE_Y * 44;        
    return board_y*tileHeight/4 + board_y*board_y*tileHeight / (8*Game.TILE_ROWS);
}

Simply changing the x-scale to this.scale.x = SCALE_X * ( 0.5 + 0.5 * gamePiece.y / Game.TILE_ROWS ); looks like this:

... so I guess I just need an equation to set their x-position correctly.

Any ideas or links? Thanks!

Answer 1

Note that X-coordinate after perspective transformation depends both on X and on Y source coordinates. General expression

XPersp = (A * X + B * Y + C) / (G * X + H * Y + 1)

For your case (perspective sight along central axis) transformation of rectangle with corners (XCenter-W,0)-(XCenter +W, H) to trapezoid centered vertically at XCenter, shifted up by YShift, is:

XPersp = XCenter + (X - XCenter) / (H * Y + 1)
YPersp = (YShift +  E * Y) / (H * Y + 1)

where H, E are some coefficients, adapted for good look.

Vary E (defines trapezoid height) about 0.5-2.0, H (defines trapezoid tilt) about 0.005