Lwjgl / Opengl 字体渲染

问题描述 投票:0回答:1

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

opengl fonts bitmap rendering lwjgl
1个回答
11
投票

我曾经遇到过同样的问题,所以这就是我解决问题的方法。

我通常会制作很多小示例程序,这样我实际上仍然可以找到有确切问题的程序,所以这里是一个屏幕截图。

before

正如您已经描述的那样,问题在于我们对每个字符使用相同的宽度,这导致了可怕的间距。

基本上我最终所做的是将每个字符和符号的 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 ...

了解文件

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

file data/materials/font/font1.png

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

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

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

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
而不是 default
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个方法
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();
}

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

当使用我刚才描述的方法时,你最终会得到这个结果。 (这又是我为解决这个问题而制作的实际程序的屏幕截图)

after

比较

之前

before

之后

after

额外

以下是关于为什么您应该选择这样做的一些要点。

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

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

© www.soinside.com 2019 - 2024. All rights reserved.