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代替默认值 5

char id= x=0 y=16

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

加载文件

首先,我主要有2类BitmapFont和BitmapGlyph.我不会给你我所有类的所有代码,因为Stack Overflow的重点并不是我们应该完成你所有的工作.

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

渲染

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

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

重要提示:我只使用已弃用的方法,因为它更容易解释.

当使用我刚才描述的方式时,你将得到这个结果.(这是我为修复此问题而制作的实际程序的屏幕截图)

对照

之前

后

额外

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

1. 这样您就不必以相同的方式排列所有字符.
2. 您始终可以添加新字符和/或符号.
3. 字符可以是您希望它们的任何大小.

这可能是我做过的最长的答案,但我希望你能用它!