2D六角網格的透視坐標

Question

這是一個難得的......

移植一些舊代碼，我在2.5D渲染這個2D十六進制網格：

瓷磚的y尺度和位置是針對透視計算的，但是我想要水平地對它們進行縮放和定位（板頂部的卡通看起來壓扁）。 這是當前的代碼：

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);
}

只需將x-scale更改為this.scale.x = SCALE_X * ( 0.5 + 0.5 * gamePiece.y / Game.TILE_ROWS ); 看起來像這樣：

...所以我想我只需要一個方程來正確設置它們的x位置。

任何想法或鏈接？ 謝謝！

Answer 1

請注意，透視變換后的X坐標取決於X和Y源坐標。 一般表達

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

對於您的情況（沿中心軸的透視瞄准），將帶角的矩形（XCenter-W，0） - （XCenter + W，H）轉換為在XCenter垂直居中的梯形，向上移動YShift，是：

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

其中H，E是一些系數，適合好看。

變化E（定義梯形高度）約0.5-2.0 ，H（定義梯形傾斜）約0.005