Perspektive Coords für 2D-Hex Grid

Question

Hier ist ein stumper ...

einigen alten Code Porting, ich habe diesen 2D-hex grid in 2.5D gemacht zu werden:

Die y-Skala & Position der Kacheln sind für die Perspektive berechnet, aber ich würde gerne skalieren & positionieren Sie sie auch für die Perspektive horizontal (die Toons an der Spitze des Bretts sehen gequetscht aus). Hier ist der aktuelle 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); 
} 

einfaches Ändern der x-Skala zu this.scale.x = SCALE_X * (0.5 + 0.5 * gamePiece.y/Game.TILE_ROWS); sieht wie folgt aus:

... also denke ich, ich brauche nur eine Gleichung ihre x-Position korrekt einzustellen.

Irgendwelche Ideen oder Links? Vielen Dank!

Answer 1

Beachten Sie, dass die X-Koordinate nach der Perspektiventransformation sowohl von X- als auch von Y-Quellkoordinaten abhängt. Allgemeiner Ausdruck

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

für Ihren Fall (perspektivische Sicht entlang der Mittelachse) Transformation von Rechteck mit Ecken (XCenter-W, 0) - (XCenter + W, H) senkrecht auf XCenter zentriert Trapezes nach oben verschoben durch yshift ist:

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

wo H, E sind einige Koeffizienten, für eine gute Optik angepasst.

Vary E (definiert Trapezhöhe) über 0.5-2.0, H (definiert Trapez Neigung) über 0.005