Lwjgl / Opengl字体渲染

Question

我正在尝试使用opengl在lwjgl显示器上显示带有自定义字体的文本。目前我正在使用我的自定义位图字体类从png文件加载字体，并以与tileset相同的方式显示它们。它工作正常但是当我将文本绘制到屏幕时，字符之间的间距是不同的，因为字母M比字母I宽，并且所有字符具有不同的宽度。有没有办法检测每个角色的宽度？或者是否有任何特定于lwjgl中字体的库？有一种方法可以使用slick2d来完成它，但加载整个库只是为了显示文本毫无意义！

Answer 1

我曾遇到过同样的问题，所以这就是我为解决问题所做的工作。

我通常会制作很多小的示例程序，所以我实际上仍然可以找到具有确切问题的程序，所以这是截图。

正如您已经描述的那样，问题在于我们为每个角色使用相同的宽度，这会给出那些可怕的间距。

基本上我最终做的是将每个字符和符号的x，y，width，height，xoffset，yoffset，xadvance写入文件。

• x / y =图像上字符的x / y坐标。
• width / height =角色的宽度/高度。
• xoffset / yoffset =这是仅为渲染字符提供的额外间距。
• xadvance =这是在渲染角色后添加的额外间距。
• 所有值都以像素为单位。

以下是一个例子：

file data/materials/font/font1.png

char default width=5 height=7 xoffset=0 yoffset=0 xadvance=1

char id= x=0 y=16

char id=a x=8 y=48
char id=b x=16 y=48
char id=c x=24 y=48
... etc ...
char id=i x=72 y=48 width=1
... etc ...

char id=A x=8 y=32
char id=B x=16 y=32
char id=C x=24 y=32
... etc ...
char id=I x=72 y=32 width=3
... etc ...

了解文件

让我简单解释一下每条线的作用。

file data/materials/font/font1.png

告诉解析器我们要加载并使用以下给定路径作为字体纹理。 您当然可以手动执行此操作，这就是我完成的方式。

char default width=5 height=7 xoffset=0 yoffset=0 xadvance=1

这设置了新char的默认值，因此如果我们定义一个char并且它不包含上述任何一个，它将被赋予默认值。

char id=a x=8 y=48

这定义了字符'a'，因为当然ìd=a表示它是'a'而x=8 y=48是字符在纹理上所在位置的左上角坐标。

同样，因为我们在上面定义了char default width=5 height=5 .....，所以默认情况下它也会分配给角色。因此，解析器基本上将char id=a x=8 y=48读为char id=a x=8 y=48 width=5 height=7 xoffset=0 yoffset=0 xadvance=1

这也是我在示例中添加char id=i x=72 y=48 width=1的原因，您实际上可以看到我们将宽度定义为仅1而不是默认 {{ 1}}

5

这实际上定义了空白，所以如果你想要它，那么渲染一个字母或符号而不是一个空格，也可以这样做。

加载文件

首先，我主要有2个班char id= x=0 y=16和BitmapFont。 我不会为您提供我的两个类的所有代码，因为Stack Overflow的重点不是我们应该完成所有工作。

BitmapGlyph类存储有关字符/符号的信息，因为它只是一个用于存储信息的类，非常简单。

BitmapGlyph

public class BitmapGlyph { public int id; public int x, y, width, height; public int xoffset, yoffset, xadvance; public float u, v, u2, v2; } 课程主要包含2个方法BitmapFont和static load(final File file)

它包含更多方法，例如render(String text, float x, float y, float size)，dispose()等，但对于您的问题，它们无关紧要。

解析文件

getTexture()

在我解析文件后，我还将字符public final static BitmapFont load(final File file) { BitmapFont font = new BitmapFont(); final ArrayList<BitmapGlyph> glyphs = new ArrayList<BitmapGlyph>(); try (final BufferedReader br = new BufferedReader(new InputStreamReader(new FileInputStream(file)))) { String line; while ((line = br.readLine()) != null) { if (line.isEmpty()) { continue; } // Now parse the file, example: if (line.startsWith("file ")) { // I don't know if you have a Texture class, and if you // can load an image from a path to a texture, // though since this is just an example and it's easy // to understand. Then you will just have to adapt it // to your own program. font.texture = new Texture(new File(line.substring(5))); } // PARSE THE REST OF THE FILE } br.close(); } catch (Exception ex) {} return font; } 转换为纹理上的实际x, y, width, height,坐标。我通过像这样循环遍历每个u, v, u2, v2,来做到这一点。

BitmapGlyph

渲染

你可能已经知道这一点，但为了安全起见，我会指导你。

int width = texture.getWidth(); // The width should of course be the actual pixel width of the image.
int height = texture.getHeight(); // The height should of course be the actual pixel height of the image.

for (BitmapGlyph glyph : glyphs) {
    glyph.u = glyph.x / (float) width;
    glyph.v = glyph.y / (float) height;
    glyph.u2 = (glyph.x + glyph.width) / (float) width;
    glyph.v2 = (glyph.y + glyph.height) / (float) height;
}

重要提示：我只使用弃用的方法，因为它更容易解释。

当使用我刚才描述的方式时，你会得到这个结果。 （这是我为修复此问题而制作的实际程序的屏幕截图）

比较

之前

后

附加

以下是您应该选择这样做的原因。

1. 这样您就不必以相同的方式排列所有字符。
2. 您可以随时添加新字符和/或符号。
3. 字符可以是您想要的任何大小。

这可能是我做过的最长的答案，不过我希望你能用它！