龟龙签署的距离场

我们的游戏《 Cartridge the Tiger》是基于用C#编写的名为Turtle Dragon的自定义游戏引擎构建的。

最近,我决定从位图字体切换为带符号的距离字段字体,这是一个巨大的进步。

Valve在2007年引入了带符号的距离字段字体。 从那时起,他们变得多产。

关于如何实现带符号的距离字段字体,有很多资源,所以我将不再使用Internet。 相反,我想分享我的结果。

什么是有符号距离字段字体?

在游戏中实现字体的最简单方法是使用位图字体。 本质上,您将每个字符预渲染为纹理,然后通过将像素复制到屏幕来标记出各个字符。

这种方法的问题是扩展。 字体的线条流畅无法很好地缩放。 它们要么变得清晰,扭曲,要么变得模糊。

缩放比例在平滑渐变下效果更好,这就是有符号距离字段的出现。

我们没有存储实际字符,而是存储了一个值,该值指示从该像素到字体边缘的距离。 这是一个距离场,一个距离场。 我们还区分正负距离,指示我们是在角色内还是角色外。 这是签名的部分。

结果看起来像一个模糊的字体。

但是平滑渐变将比以前更好地缩放比例。

那么,如何将上面的纹理转换为平滑的线条呢?

答案很简单,我们选择一个值,任何比外面暗的值,任何比里面亮的值。 如果选择0.5,将得到近似原始字体的文字。

我们使用非常简单的片段着色器或像素着色器进行此操作。 这种方法的优点在于,通过向着色器添加功能,我们可以轻松创建细字体,粗体,边框,发光和阴影。

结果

我选择实现边框,但不选择发光或阴影。

我希望我保留了旧字体渲染的一些屏幕截图,但没有。

我创建的用于生成SDF字体的工具将与Turtle Dragon一起发布,我计划在发布Cartridge the Tiger之后发布。