在 2D 中渲染等距文本答案

【问题标题】：Render isometric text in 2D在 2D 中渲染等距文本
【发布时间】：2013-01-29 11:38:41
【问题描述】：

如何以等角投影的形式呈现文本？我了解原理，但我不确定如何以编程方式实际转换 SpriteFont 来做到这一点。

我的意思的例子：

我什至不确定我应该搜索什么。看来我可以通过使用等距投影矩阵和 3D 网格字体来实现这一点，但考虑到我在 2D 中工作，这似乎过于复杂。

有什么想法吗？

【问题讨论】：

标签： c# xna rendering isometric

【解决方案1】：

SpriteBatch.Begin 采用Matrix 参数，将您绘制的精灵（包括SpriteFont）转换到您想要的任何平面上。

很遗憾，Matrix 不提供 Create* 用于创建偏斜矩阵的方法。但是手动创建这样的矩阵很简单。以下代码经过测试，与您想要的非常接近：

Matrix skew = Matrix.Identity;
skew.M12 = (float)Math.Tan(MathHelper.ToRadians(36.87f));
Matrix rotate = Matrix.CreateRotationZ(MathHelper.ToRadians(270+26.565f));

sb.Begin(SpriteSortMode.Deferred, null, null, null, null, null, skew * rotate);
// ... draw your sprites here ...
sb.End();

与您的图表的唯一区别是 Y 和 Y' 指向相反的方向，因为 XNA 的 SpriteBatch 在“客户端”坐标中工作（左上角的 (0,0)，Y+ 向下）。

【讨论】：

这行得通，但是，文本的位置似乎也被转换了。看这里：i.imgur.com/KAivIok.png矩阵没有翻译组件，为什么会这样？
变换矩阵围绕世界原点 (0,0) 变换顶点，而不是围绕精灵自身的原点。从概念上讲，您正在变换绘制精灵的整个平面。要在该平面上找到与所需屏幕坐标相匹配的位置，您必须反转转换。像这样：Vector2.Transform(screenCoord, Matrix.Invert(skew * rotate)).
这很有意义。非常感谢！
现在我想通过 RenderTarget2D 将转换后的文本烘焙成纹理。给定转换前文本的大小，我如何确定转换后的大小？
@Salis 您可以使用SpriteFont.MeasureString 的组合来找出文本的角顶点，并使用Vector2.Transform 来转换它们。然后一点数学就会给你大小。

【解决方案2】：

您可以将矩阵变换与精灵批处理一起使用来实现此目的。您可以阅读有关矩阵转换的更多信息here。

【讨论】：