Lwjgl / Opengl字体渲染

Question

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

Answer 1

我也曾经有过同样的问题，所以下面是我解决问题的方法。

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

正如你已经描述过的，问题在于我们为每个字符使用相同的宽度，这使得这些可怕的行间距。

基本上我最后做的是把每个字符和符号的x，y，宽度，高度，xoffset，yoffset，xadvance写到一个文件中。

• x/y = 图像上字符的 x/y 坐标。
• 宽度/高度 = 字符的宽度/高度。
• 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 ...

让我简短地解释一下每行的作用。

< code > file data/materials/font/font 1 . png

告诉解析器我们想要加载和，并使用下面给定的路径作为字体纹理。你当然可以手动操作，我就是这么做的。

< code > char default width = 5 height = 7 xoffset = 0 yoffset = 0 x advance = 1

这将设置新 char 的默认值，因此，如果我们定义了一个 char 并且它不包含上述任何字符，则将为其提供默认值。

< code>char id=a x=8 y=48

这定义了字符“a”，因为ìd=a当然会告诉它是“a”，而x=8 y=48是字符在纹理上的位置的左上角坐标。

同样，由于我们定义了字符默认宽度= 5 高度 = 5 .....，因此默认情况下也会将其分配给字符。因此，基本上解析器读取字符 id=a x=8 y=48，因为字符 id=a x=8 y=48 宽度=5 高度=7 xoffset=0 yoffset=0 xadvance=1

这也是我将< code > char id = I x = 72y = 48 width = 1 添加到示例中的原因，您可以看到我们将宽度定义为仅< code>1而不是默认的< code>5

字符id=x=0，y=16

这实际上定义了空格，因此，如果您愿意，请呈现字母或符号而不是空格，也可以这样做。

首先，我主要有两个类：BitmapFont和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;
}

BitmapFont类主要包含2个mehods静态加载（最终文件）和渲染（字符串文本、浮点x、浮点y、浮点大小）

它包含更多的方法，如处置（），获取纹理（）等，尽管对于您的问题来说，它们是无关紧要的。

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;
}

解析完文件后，我还将字符< code>x，y，width，height 转换为纹理上的实际< code>u，v，u2，v2，坐标。我是这样循环遍历每个< code>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;
}

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

public final void render(String text, float x, float y, float size) {
    // BIND FONT TEXTURE

    glBegin(GL_QUADS);

    for (int i = 0, istop = text.length(); i < istop; i++) {
        char ascii = text.charAt(i);

        BitmapGlyph g = ...; // Get the stored glyph according to the char, check against the BitmapGlyph id

        float ww = g.width * size;
        float hh = g.height * size;

        float xx = x + g.xoffset * size;
        float yy = y + g.yoffset * size;

        glTexCoord2f(g.u, g.v);
        glVertex2f(xx, yy);

        glTexCoord2f(g.u, g.v2);
        glVertex2f(xx, yy + hh);

        glTexCoord2f(g.u2, g.v2);
        glVertex2f(xx + ww, yy + hh);

        glTexCoord2f(g.u2, g.v);
        glVertex2f(xx + ww, yy);

        x += (g.width + g.xadvance) * size;
    }

    glEnd();
}

重要提示：我只使用不推荐使用的方法，因为它更易于解释。

当使用我刚才描述的方法时，您将得到以下结果。（同样，这是我为解决这个问题而制作的实际程序的截图。）

这里有一些关于为什么你应该选择这样做的观点。

< li >这样，您不必以相同的方式排列所有字符。 < li >您可以随时添加新字符和/或符号。 < li >字符可以是您想要的任何大小。

这可能是我做过的最长的回答，尽管我希望你能用它！