以2D渲染等距文字 [英] Render isometric text in 2D

问题描述

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

我的意思示例:

我什至不确定我应该寻找什么.看来我可以通过使用等轴测投影矩阵和3D网格字体来完成此操作，但是考虑到我在2D模式下工作，这似乎过于复杂了.

有什么想法吗?

解决方案

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 +向下))中起作用.

How can I render text in the form of an isometric projection? I understand the principle but I'm not sure how to actually transform a SpriteFont programmatically to do this.

Example of what I mean:

I'm not even sure what I should be searching for. It seems I could accomplish this by using an isometric projection matrix and a 3D mesh font, but that seems overcomplicated considering I'm working in 2D.

Any ideas?

解决方案

SpriteBatch.Begin takes a Matrix parameter, transforming the sprites you draw (including SpriteFont) onto whichever plane you desire.

Unfortunately Matrix does not provide Create* methods for creating skew matrices. But it is simple enough to create such a matrix by hand. The following piece of code is tested and is pretty close to what you want:

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

The only difference to your diagram is that Y and Y' point in the opposite direction, because XNA's SpriteBatch works in "client" coordinates ((0,0) at top left, and Y+ is down).

这篇关于以2D渲染等距文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！