視角COORDS二維六角格

Question

這裏有一個難倒的......

移植一些舊的代碼，我有這樣的2D六方格在2.5D渲染：

的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規模簡單地更改爲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) 

對於你的情況（透視視線沿中心軸）與角部的矩形的轉化（X中心值-W，0） - （X中心值+ W，H）到梯形垂直於X中心值中心，向上移動通過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