Perspective Coords 2D Hex Grille

Question

Voici un stumper ...

portage du code ancien, j'ai cette grille hexagonale 2D RENDUES en 2.5D:

L'échelle y & position du Les carreaux sont calculés pour la perspective, mais j'aimerais les mettre en position horizontalement (les toons en haut de la planche ont l'air écrasés). Voici le code actuel:

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

Il suffit de changer l'échelle des x à this.scale.x = SCALE_X * (0.5 + 0.5 * gamePiece.y/Game.TILE_ROWS); ressemble à ceci:

... donc je suppose que je dois juste une équation pour définir leur position x correctement.

Des idées, des points d'intérêt? Merci!

Answer 1

Notez que la transformation des coordonnées X après perspective dépend à la fois des coordonnées de source X et Y. expression générale

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

Pour votre boîtier (vue en perspective le long de l'axe central) de transformation de rectangle à coins (XCenter-W, 0) - (XCenter + W, H) de trapèze centré verticalement à XCenter, décalé vers le haut par YSHIFT , est la suivante:

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

où H, E sont des coefficients, adaptés pour un bon look.

Variez E (définit la hauteur trapézoïdal) sur les 0.5-2.0, H (définit l'inclinaison trapézoïdal) à propos 0.005