[英]Perspective Coords for 2D Hex Grid
Here's a stumper... 这是一个难得的......
Porting some old code, I have this 2D hex grid being rendered in 2.5D: 移植一些旧代码,我在2.5D渲染这个2D十六进制网格:
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). 瓷砖的y尺度和位置是针对透视计算的,但是我想要水平地对它们进行缩放和定位(板顶部的卡通看起来压扁)。 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 );
只需将x-scale更改为
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. ...所以我想我只需要一个方程来正确设置它们的x位置。
Any ideas or links? 任何想法或链接? Thanks!
谢谢!
Note that X-coordinate after perspective transformation depends both on X and on Y source coordinates. 请注意,透视变换后的X坐标取决于X和Y源坐标。 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: 对于您的情况(沿中心轴的透视瞄准),将带角的矩形(XCenter-W,0) - (XCenter + W,H)转换为在XCenter垂直居中的梯形,向上移动YShift,是:
XPersp = XCenter + (X - XCenter) / (H * Y + 1)
YPersp = (YShift + E * Y) / (H * Y + 1)
where H, E are some coefficients, adapted for good look. 其中H,E是一些系数,适合好看。
Vary E (defines trapezoid height) about 0.5-2.0
, H (defines trapezoid tilt) about 0.005
变化E(定义梯形高度)约
0.5-2.0
,H(定义梯形倾斜)约0.005
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.